Ajax 与异步数据传输_H5之家 - 中国HTML5教程资源分享第一站

基本概念

Ajax 全称是异步的 JavaScript 和 XML 。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

Ajax 具有以下优点和缺点：

优点

缺点

同源策略

同源策略是Netscape提出的一个著名的安全策略，它是指同一个“源头”的数据可以自由访问，但不同源的数据相互之间都不能访问。我们试想一下以下几种情况：
1. 我们打开了一个天猫并且登录了自己的账号，这时我们再打开一个天猫的商品，我们不需要再进行一次登录就可以直接购买商品，因为这两个网页是同源的，可以共享登录相关的 cookie 或 localStorage 数据；
2. 如果你正在用支付宝或者网银，同时打开了一个不知名的网页，如果这个网页可以访问你支付宝或者网银页面的信息，就会产生严重的安全的问题。显然浏览器不允许这样的事情发生；
3. 想必你也有过同时登陆好几个 qq 账号的情况，如果同时打开各自的 qq 空间浏览器会有一个小号模式，也就是另外再打开一个窗口专门用来打开第二个 qq 账号的空间。

很明显，第1个和第3个例子中，不同的天猫商店和 qq 空间属于同源，可以共享登录信息。qq 为了区别不同的 qq 的登录信息，重新打开了一个窗口，因为浏览器的不同窗口是不能共享信息的。而第2个例子中的支付宝、网银、不知名网站之间是非同源的，所以彼此之间无法访问信息，如果你执意想请求数据，会提示异常：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

那么什么是同源的请求呢？同源请求要求被请求资源页面和发出请求页面满足3个相同：

协议相同
域名相同
端口相同

简单理解一下：

/*以下两个数据非同源，因为协议不同*/ https://www.abc123.com.cn/item/a.js /*以下两个数据非同源，因为域名不同*/ http://www.abc123.com/item/a.js /*以下两个数据非同源，因为主机名不同*/ http://item.abc123.com.cn/item/a.js /*以下两个数据非同源，因为协议不同*/ http://www.abc123.com.cn:8080/item/a.js /* 以下两个数据非同源，域名和 ip 视为不同源 * 这里应注意，ip和域名替换一样不是同源的 * 假设解析后的 ip 是 195.155.200.134 */ http://195.155.200.134/ /*以下两个数据同源*/ /* 这个是同源的*/ http://www.abc123.com.cn/item/b.js Ajax

Ajax在编写时一共4个步骤：

常见的发送方式有 GET 和 POST，除此之外还有 HEAD, DELETE, TRACE, PUT, CONNECT, OPTIONS和 PATCH等，这里只举例前两个 GET 和 POST。

例如根据姓名查询一个人的信息并写在div#output中

//GET 方法 function search(name, fun){ var xhr = new XMLHttpRequest(); var url = "search.php?name=" + window.encodeURIComponent(name) + "&t=" + Math.random(); xhr.open("GET", url); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = (xhr.responseText); //获取了 JSON 字符串 fun(data); } } } function show(data){ this.innerHTML ="姓名：" + data.name + " 性别：" + data.gender + " 年龄：" + data.age + " 地址：" + data.address + " 电话：" + data.tel; } var output = document.getElementById("output"); search("李华", show.bind(output)); //服务器端 search.php <?php $name = $_GET[name]; //模拟数据查询结果 echo '{"name":"' . $name .'","age":18,"gender":"男","tel":"13211112222","address":"北京市海淀区xxxxxxxx"}'; ?> //POST方法 function search(name, fun){ var xhr = new XMLHttpRequest(); var url = "search.php"; var para = "name=" + window.encodeURIComponent(name) + "&t=" + Math.random(); xhr.open("POST", url); //POST方式下，必须把 Content-Type 设置为application/x-www-form-urlencoded xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ console.log(xhr.responseText); var data = (xhr.responseText); //获取了 JSON 字符串 fun(data); } } xhr.send(para); } function show(data){ this.innerHTML ="姓名：" + data.name + " 性别：" + data.gender + " 年龄：" + data.age + " 地址：" + data.address + " 电话：" + data.tel; } var output = document.getElementById("output"); search("李华", show.bind(output)); //服务器端 search.php <?php $name = $_POST[name]; //模拟数据查询结果 echo '{"name":"' . $name .'","age":18,"gender":"男","tel":"13211112222","address":"北京市海淀区xxxxxxxx'; ?>

上述代码的 jQuery 写法：

//GET 方式 function search(name, fun){ var url = "search.php?name=" + window.encodeURIComponent(name) + "&t=" + Math.random(); $.get(url, fun); } function show(data){ data = (data); this.innerHTML ="姓名：" + data.name + " 性别：" + data.gender + " 年龄：" + data.age + " 地址：" + data.address + " 电话：" + data.tel; } var output = document.getElementById("output"); search("李华", show.bind(output)); //POST 方式 function search(name, fun){ var url = "search.php"; var obj = {}; obj.name = name; obj.t = Math.random(); $.post(url, obj, fun); } function show(data){ data = (data); this.innerHTML ="姓名：" + data.name + " 性别：" + data.gender + " 年龄：" + data.age + " 地址：" + data.address + " 电话：" + data.tel; } var output = document.getElementById("output"); search("李华", show.bind(output)); Ajax常见问题缓存问题