JavaScript：Ajax详解

  AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

一、XMLHttpRequest对象

function createXHR(){   if(typeof XMLHttpRequest!="undefined"){//IE7+、Firefox、Opera、chrome和Safari       return new XMLHttpRequest();   }else if(typeof ActiveXObjct!="undefined"){//IE6，IE7      if(typeof arguments.callee.activeXString!="string"){          //MSXML库中有三个不同版本的XHR对象。          var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],          i,len;          for(i=0,len=versions.length;i<len;i++){             try{                   new ActiveXObject(versions[i]);                   arguments.callee.activeXString=versions[i];                   break;             }catch(ex){             }          }      }      return new ActiveXObject(arguments.callee.activeXString);  }else{      throw new Errro("NO XHR object avaliable");  }}var xhr=createXHR();

1、XHR用法

  在使用XHR对象时，需要调用的第一个方法是open(method,url,async)，规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST，url：文件在服务器上的位置，async：true（异步）或 false（同步）。

       xhr.open("GET","test1.txt",false);

  调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。要发送特定的请求，必须调用send(string)方法，将请求发送到服务器。string：仅用于 POST 请求，GET请求为null。

       xhr.open("GET","test1.txt",false);       xhr.send(null);

（1）、同步请求

 由于这次请求是同步的，JavaScript代码会等到服务器响应之后再继续执行。在收到响应后，响应的数据会自动填充XHR对象的属性，相关属性简介如下：

  responseText：作为响应的主体被返回。

  responseXML：如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着数据的XML DOM文档。

  status：响应的HTTP状态。

  statusText：HTTP状态说明。

var xhr=createXHR();xhr.open("get","example.txt",false);xhr.send(null);if((xhr.status>=200&&xhr.status<300)|| xhr.status==304){    alert(xhr.responseText);}else{    alert("Request was unsuccessful:"+xhr.status);}

（2）、异步请求

  异步请求可以让JavaScript继续执行而不必等待响应。此时，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段，属性值如下：

    0: 请求未初始化，尚未调用open()方法。

    1: 启动，已经调用open()方法，尚未调用send()方法。

    2: 发送，已经调用send()方法，但尚未接收到响应。

    3: 接收，已经接收到部分响应数据。

    4: 完成，已经接收到全部响应数据，且响应已就绪

  只要readyState属性的值有一个值变成另一个值，都会触发一次readystatechange事件。可以通过这个事件来检测每次状态变化后readyState的值。必须要在open()调用之前指定onreadystatechange事件处理程序才能确保浏览器的兼容性。

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();

2、AJAX状态码说明

1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到，但返回信息为空
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——请求的资源并没有被修改，可以直接使用浏览器中缓存的版本
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求，如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖，请求资源不可访问
407——类似401，用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态，请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用，有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

3、HTTP头部信息

  使用setRequestHeader()方法可以设置自定义的请求头部信息，这个方法接收两个参数：头部字段的名称和头部字段的值。必须在open()和send()方法之间调用。

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.setRequestHeader("MyHeader","MyValue");xhr.send(null);

  调用getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串。

var myHeader=xhr.getResponseHeader("MyHeader");var allHeaders=xhr.getAllResponseHeaders();

4、GET请求

  GET是常见的请求类型，最常用于向服务器查询某些信息，必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送个服务器。使用GET请求经常会发生一个错误，就是查询字符串的格式有问题。查询字符串中的每个参数的名和值都必须使用encodeURLComponent()进行编码，然后才能放到URL的末尾。

function addURLParam(url,name,value){url+=(url.indexOf("?")==-1?"?":"&");url+=encodeURLComponent(name)+"="+encodeURLComponent(value);return url;}var url="example.jsp";url=addURLParam(url,"name","Nicholas");url=addURLParam(url,"book","javascript");xhr.open("get",url,true);

5、POST请求

  如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xhr.open("POST","ajax_test.jsp",true);xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.send("fname=Bill&lname=Gates");

6、GET和POST的区别

 

 GET

POST

点击返回/刷新按钮

没有影响

数据会重新发送（浏览器将会提示用户“数据被从新提交”）

添加书签

可以

不可以

缓存

可以

不可以

编码类型(Encoding type)

application/x-www-form-urlencoded

application/x-www-form-urlencoded or multipart/

form-data. 请为二进制数据使用multipart编码

历史记录

有

没有

长度限制

有

没有

数据类型限制

只允许ASCII字符类型

没有限制。允许二进制数据

安全性

查询字符串会显示在地址栏的URL中，不安全，

请不要使用GET请求提交敏感数据

因为数据不会显示在地址栏中，也不会缓存下来或保

存在浏览记录中，所以看POST求情比GET请求安全，

但也不是最安全的方式。如需要传送敏感数据，请

使用加密方式传输

可见性

查询字符串显示在地址栏的URL中，可见

查询字符串不会显示在地址栏中，不可见

 

二、XMLHttpRequest 2级

1、FormData

  FormData为序列化表单以及创建于表单格式相同的数据提供了方便，例如

  var data=new FormData();

  data.append(“name”,“zzzmmm”);//添加数据

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);var form=document.getElementById("form");xhr.send(new FormData(foem));

  使用FormData的方便之处体现在不必明确地在XHR对象上设置请求头部，XHR对象能够识别传入的数据类型是FormData的实例，并且配置适当的头部信息。

2、超时设定

  IE8位XHR对象添加了一个timeout属性，表示请求在等待响应多少毫秒之后就终止，在给timeout设置一个数值后，如果规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序。

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.timeout=1000;//将超时设置为1分钟，仅适用于IE8xhr.ontimeout=function(){alert("Request did not return in a second.");}xhr.send(null);

3、overrideMimeType()方法

用于重写XHR响应的MIME类型。

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.overrideMimeType("text/xml");xhr.send(null);

4、进度事件

有6个进度事件：

  loadstart：在接收到响应数据的第一个字节时触发

  progress：在接收响应期间持续不断的触发

  error：在请求发生错误是触发

  abort：在因为调用abort()方法而终止连接时触发

  load：在接收到完整的响应数据是触发

  loadend：在通信完成或者触发erro、abort或load事件后触发

（1）、load事件

用load事件替代readystatechange事件：

var xhr=createXHR();xhr.onload=function(){//Firefox、Opera、chrome和Safari    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);

（2）、progress事件

  包含着三个额外属性：

  lengthComputable：是一个表示进度信息是否可用的布尔值

  position：表示已经接收的字节数。

  totalSize：表示根据Content—Length响应头部确定的预期字节数。

var xhr=createXHR();xhr.onload=function(){//Firefox、Opera、chrome和Safari    if((xhr.status>=200&&xhr.status<300)|| xhr.status==304){       alert(xhr.responseText);    }else{       alert("Request was unsuccessful:"+xhr.status);    }}xhr.onprogress=function(event){   var divStatus=document.getElementById("status");   if(event.lengthComputable){      divStatus.innerHTML="Received"+event.position+"of"+event.totalSize+"bytes";   }}xhr.open("get","example.txt",true);xhr.send(null);