js-JavaScript高级程序设计学习笔记17

第21章  AJAX

AJAX技术的核心是XMLHttpRequest对象。可以使用XHR对象取得新数据，然后通过DOM将新数据插入到页面中。无需刷新页面即可从服务器获得数据。

1、XHR对象。

如果只想支持IE7+，那么可以直接使用XHR构造函数。

如果支持IE6：

function createXHR(){
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
          return new XMLHttpRequest();
     }
    else
      {// code for IE6, IE5
          return new ActiveXObject("Microsoft.XMLHTTP");
      }
      else
      {
          throw new Error("No XHR object available.");
      }
}

1、XHR的用法

使用XHR对象，要调用的第一个方法是open（）

xhr.open("get","example.php",false);

调用这个方法不会真正发送请求，只是启动一个请求以备发送。

要发送特定的请求，必须调用send（）方法

xhr.open("get","example.php",false);
xhr.send(null);

这次请求是同步的，JS代码会等到服务器响应之后再继续执行。接收到响应后，响应的数据会自动填充XHR对象的属性。

①responseText：作为响应主体被返回的文本；

②responseXML：如果相应的内容类型是text/xml或application/xml，这个属性将保存包含着相应数据的XML DOM文档；非XML数据，值为null。

③status：相应的HTTP状态。

④statusText：HTTP状态说明。

在接收到响应后，第一步是检查status属性，以确响应已经成功返回。

以上为发送同步请求，异步请求能让JS继续执行而不必等待响应。此时可以检测XHR对象的readyState属性，表示请求/相应过程的当前活动阶段。

①0：未初始化。尚未调用open（）方法；

②1：启动。已open（），未send（）；

③2：发送。已send（），未收到响应；

④3：接收。已收到部分响应数据；

⑤：完成。可以使用了。

readyState改变时都会触发一次readystatechange事件。必须在调用open（）之前指定onreadystatechange事件处理程序才能保证跨浏览器兼容性。

2、HTTP头部信息

使用setRequestHeader（）方法可以设置自定义请求头部信息，必须在open（）后和send（）前调用。

getResponseHeader（）和getAllResponseHeaders（）可获取头部信息。

3、GET请求。

GET是最常见的请求类型，常用于向服务器查询某些信息。查询字符串必须经过encodeURIComponent（）进行正确的编码。

4、POST请求。

通常向服务器发送应该被保存的数据。

第一步open（）初始化，第二部向send（）传入某些数据。模仿表单提交P577.

POST请求比GET请求消耗资源。

2、XHR 2级

1、FormData。序列化表单。

xhr.open("post","postexample.php",true);
var form=document.getElementById("user-info");
xhr.send(new FormData(form));

2、超时设定

timeout属性。请求在多少毫秒后终止并触发timeout事件。（IE8+）

3、overrideMimeType（）方法

重写响应的MIME类型。在send（）前调用。

3、进度事件。

Progress Events规范，六个进度事件

①loadstart②progress③error④abort⑤load⑥loadend。每个请求都是从出发loadstart开始，接下来是一个或多个progress，然后出发error/abort/load中的一个，然后出发loadend结束。

progress事件，可用来做进度指示器。onprogress事件处理程序接收一个event对象，target属性是XHR对象，额外三个属性：lengthComputable——进度信息是否可用、position——已接收字节数、totalSize——根据响应头部确定的预期字节数。必须在open（）之前添加onprogress事件处理程序。