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的支持

Firefox3.5+，Safari4+，Chrome，ios版Safari，Android平台中的WebKit都通过XHR对象实现了对CORS的原生支持。

限制：

1、不能使用setRequestHeader

2、不能发送和接收cookie

3、调用getAllResponseHeaders会返回空字符串

 

以下还有一些省略的地方，我会尽快补上