Ajax
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax相关的知识，希望对你有一定的参考价值。
Ajax 技术的核心是XMLHttpRequest 对象（简称XHR）
XHR 为向服务器发送请求和解析服务器响应提供了流畅的
接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。
也就是说，可以使用XHR 对象取得新数据，然后再通过DOM 将新数据插入到页面中。
虽然名
字中包含XML 的成分，但Ajax 通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数
据，但不一定是XML 数据。
21.1 XMLHttpRequest 对象
var xhr = createXHR();
由于其他浏览器中对XHR 的实现与IE 最早的实现是兼容的，因此就可以在所有浏览器中都以相同
方式使用上面创建的xhr 对象。
21.1.1 XHR的用法
在使用 XHR 对象时，要调用的第一个方法是open()，它接受3 个参数：要发送的请求的类型
（"get"、"post"等）、请求的URL 和表示是否异步发送请求的布尔值。
xhr.open("get", "example.php", false);
要发送特定的请求，必须像下面这样调用send()方法：
xhr.open("get", "example.txt", false);
xhr.send(null);
由于这次请求是同步的，javascript 代码会等到服务器响应之后再继续执行。在收到响应后，响应
的数据会自动填充XHR 对象的属性，相关的属性简介如下。
1： responseText：作为响应主体被返回的文本。
2： responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保
存包含着响应数据的XML DOM 文档。
3： status：响应的HTTP 状态。
4： statusText：HTTP 状态的说明。
发送异步请求
可以检测XHR 对象的readyState 属性，该属性表示请求
/响应过程的当前活动阶段。这个属性可取的值如下。
? 0：未初始化。尚未调用open()方法。
? 1：启动。已经调用open()方法，但尚未调用send()方法。
? 2：发送。已经调用send()方法，但尚未接收到响应。
? 3：接收。已经接收到部分响应数据。
? 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
readyState 属性的值由一个值变成另一个值，都会触发一次readystatechange 事件。可
以利用这个事件来检测每次状态变化后readyState 的值
通常我们只是关注值为4的阶段。
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get", "example.txt", true);
xhr.send(null);
另外，在接收到响应之前还可以调用abort()方法来取消异步请求，如下所示：
xhr.abort();
调用这个方法后，XHR 对象会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。在
终止请求之后，还应该对XHR 对象进行解引用操作。由于内存原因，不建议重用XHR 对象。
21.1.3 GET请求
GET 是最常见的请求类型，最常用于向服务器查询某些信息。
常见的问题：查询字符串的格式有问题。查询字符串中每个参数的名
称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL 的末尾。
xhr.open("get", "example.php?name1=value1&name2=value2", true);
下面这个函数可以辅助向现有URL 的末尾添加查询字符串参数：
function addURLParam(url, name, value) {
url += (url.indexOf("?") == -1 ? "?" : "&");
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
下面是使用这个函数来构建请求URL 的示例。
var url = "example.php";
//添加参数
url = addURLParam(url, "name", "Nicholas");
url = addURLParam(url, "book", "Professional JavaScript");
//初始化请求
xhr.open("get", url, false);
在这里使用 addURLParam()函数可以确保查询字符串的格式良好，并可靠地用于XHR 对象。
21.1.4 POST请求
通常用于向服务器发送应该被保存的数据
xhr.open("post", "example.php", true);
发送 POST 请求的第二步就是向send()方法中传入某些数据
21.2 XMLHttpRequest 2 级
21.2.1 FormData
现代 Web 应用中频繁使用的一项功能就是表单数据的序列化，XMLHttpRequest 2 级为此定义了
FormData 类型。FormData 为序列化表单以及创建与表单格式相同的数据（用于通过XHR 传输）提供
了便利。下面的代码创建了一个FormData 对象，并向其中添加了一些数据。
var data = new FormData();
data.append("name", "Nicholas");
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("post","postexample.php", true);
var form = document.getElementById("user-info");
xhr.send(new FormData(form));
使用FormData 的方便之处体现在不必明确地在XHR 对象上设置请求头部。XHR 对象能够识别传
入的数据类型是FormData 的实例，并配置适当的头部信息。
21.2.2 超时设定
XHR 对象添加了一个timeout 属性，表示请求在等待响应多少毫秒之后就终止。在给
timeout 设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout 事
件，进而会调用ontimeout 事件处理程序。
var xhr = createXHR();
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
try {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
} catch (ex){
//假设由ontimeout 事件处理程序处理
}
}
};
xhr.open("get", "timeout.php", true);
xhr.timeout = 1000; //将超时设置为1 秒钟（仅适用于IE8+）
xhr.ontimeout = function(){
alert("Request did not return in a second.");
};
xhr.send(null);
21.2.3 overrideMimeType()方法
用于重写XHR 响应的MIME 类型。
通过调用overrideMimeType()方法，可以保
证把响应当作XML 而非纯文本来处理。
var xhr = createXHR();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);
21.3 进度事件
1： loadstart：在接收到响应数据的第一个字节时触发。
2： progress：在接收响应期间持续不断地触发。
3： error：在请求发生错误时触发。
4： abort：在因为调用abort()方法而终止连接时触发。
5： load：在接收到完整的响应数据时触发。
6： loadend：在通信完成或者触发error、abort 或load 事件后触发。
21.3.1 load事件
var xhr = createXHR();
xhr.onload = function(){
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
} else {
alert("Request was unsuccessful: " + xhr.status);
}
};
xhr.open("get", "altevents.php", true);
xhr.send(null);
跨源资源共享
IE对CORS的支持
CORS（Cross-Origin Resource Sharing，跨源资源共享）是W3C的一个工作草案
IE8中引入了XDR（XDomainRequest）类型，与XHR类似，但能实现安全可靠的跨域通信。与XHR不同：
1、cookie不会随请求发送，也不会随请求返回
2、只能设置头部信息中的Content-Type
3、不能访问响应头部信息
4、只支持GET和POST请求
使用方法，也是创建一个XDomainRequest实例，调用open，调用send，open方法只接受两个参数，请求类型，URL。所有请求都是异步。
其他浏览器对CORS的支持
限制：
1、不能使用setRequestHeader
2、不能发送和接收cookie
3、调用getAllResponseHeaders会返回空字符串
以下还有一些省略的地方，我会尽快补上
以上是关于Ajax的主要内容，如果未能解决你的问题，请参考以下文章