【速成之路】网页编程必会的Ajax——XMLHttpRequest对象

🎉个人主页：这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
      【速成之路】SQLserver

---

🔓本期专栏：【速成之路】Ajax

  Ajax的原理是 通过 XmlHttpRequest 对象向服务器发出异步请求，从服务器获得所需要的数据，然后用 JavaScript 来操作DOM而更新页面。这其中最关键的一步就是 从服务器获得请求数据。

  XMLHttpRequest 对象是一个具有应用程序接口的 JavaScript 对象，能够使用HTTP协议连接服务器，这是微软公司为了满足开发者的需要而设的。
  通过 XMLHttpRequest 对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，这样既减轻了服务器负担，又加快了响应速度，缩短了用户的等待时间。

🎆初始化XMLHttpRequest对象

  所有现代浏览器(例如IE、Firefox、Chrome、Safari和Opera)都有内置的 XMLHttpRequest 对象。

  创建 XMLHttpRequest 对象的语法如下所示：

xmlhttp=new  XMLHttpRequest ();

  旧版本的Internet Explorer中，Ajax使用ActiveX对象进行创建，语法格式如下所示：

xmlhttp=new  ActiveXObject ("Microsoft.XMLHTTP");

  为了提高程序的兼容性，可以创建一个跨浏览器的 XMLHttpRequest 对象。创建一个跨浏览器的 XMLHttpRequest 对象只需要判断一下不同浏览器，如果浏览器提供了 XMLHttpRequest 类，则直接创建一个实例，否则实例化一个ActiveX对象。具体代码如下：

if(window.XMLHttpRequest ){
//IE7+、Firefox、Chrome、Opera、Safari浏览器执行代码
xmlhttp=new  XMLHttpRequest ();
}
else
{
//IE6、IE5浏览器执行代码
xmlhttp=new  ActiveXObject ("Microsoft.XMLHTTP");
}

🎆XMLHttpRequest对象的常用属性和事件

1.readyState属性

  当一个 XMLHttpRequest 对象被创立后，readyState属性表示当前对象处于什么状态，可以通过对该属性的访问来判断此次请求的状态，然后做出相应的操作。具体的属性值表示的含义如下：

• 属性值为0：未初始化状态。此时已经创建了一个 XMLHttpRequest 对象，但是还没有初始化。
• 属性值为1：准备发送状态。此时已经调用了 XMLHttpRequest 对象的open()方法，并且 XMLHttpRequest 对象已经准备好将一个请求发送到服务器。
• 属性值为2：已发送状态。此时已经通过send方法把一个请求发送到服务器，等待响应。
• 属性值为3：正在接收状态。此时已经接收到HTTP响应的头部信息，但是消息体部分还没有完全接收到。
• 属性值为4：完成响应状态。此时已经完成了 HttpResponse 响应的接收。

2.response Text属性

  responseText 属性包含客户端接收到的HTTP响应的文本内容。

• readyState 属性为0、1或2时， responseText 属性包含一个空字符串。
• readyState 属性值为3时，响应中包含客户端还没完成的响应信息。
• readyState 属性值为4时， responseText 属性包含完整的响应信息。

3.responseXML属性

  只有当 readyState 属性为4时，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或者 application/xml）时，该属性才会有值并且被解析成一个XML文档，否则该属性为null；如果该回传的XML文档结构未完成响应回传，该属性也会为null。
responseXML 属性用来描述被XMLHttpRequest 解析后的XML文档的属性。

4.status属性

  status属性描述了HTTP状态的代码。注意，仅当 readyState 属性值为3(正在接收中)或者4(已加载)时，才能对此属性进行访问。如果在 readyState 属性值小于3时试图去读取status属性值，将会引发一个异常。

5.statusText属性

  statusText 属性描述了HTTP状态的代码文本，并且仅当ready State属性为3或者4才可用。当 readyState 属性为其他值时试图存取 statusText 属性，将会引发一个异常。

6.onreadystatechange事件

  当ready State属性发生改变时， XMLHttpRequest 对象调用 onreadystate change事件。在处理该响应之前，事件处理器应该首先检查 readyState 的值和HTTP状态。当请求完成加载( readyState 值为4)并且响应已经完成(HTTP状态为“OK”)时，就可以调用一个 JavaScript 函数来处理该响应内容。下面是进行 onreadystate change事件调用的处理语句。

xmlhttp.onreadystatechange =function(){
//判断和服务器端的交互是否完成，判断服务器端是否正确返回了数据
   if(xmlhttp.readyState ==4){   //ready State=4表示交互完成
     if(xmlhttp.status==200){   //status=200表示正确返回了数据
        var message=xmlhttp.responseText ;// responseText 是从服务器返回的数据
        //此处是对从服务器端返回数据的处理语句
        }
     }
 }

🎆XMLHttpRequest对象的常用方法

1.open（）方法

  open()方法用于设置异步请求目标的URL、请求方法以及其他参数信息，其语法如下所示：

open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

  open()方法的参数说明见下表所示。

open（）方法的参数

参数	说明
method	用于指定请求类型，一般为GET或POST
URL	用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串
asyncFlag	可选参数，用于指定请求方式，异步请求为true(默认值)，同步请求为false
userName	可选参数，用于指定请求用户名，没有时可省略
password	可选参数，用于指定请求密码，没有时可省略

  例如，设置请求的服务器端程序名为 ajaxServer.jsp，请求方法为GET，请求方式为异步，语句代码如下所示：

xmlhttp.open("GET","ajaxServer.jsp", true);

2.send（）方法

  调用send()方法后，就可以按照open()方法设定的参数发送请求。当open()方法中async属性设置为true时，send()方法调用后立即返回，否则将会中断，直到请求返回。需要注意的是，send()方法必须在 readyState 属性为1时才能调用；在调用send()方法以后到接收响应信息之间的时间内， readyState 属性值将被设成2；一旦接收到响应信息， readyState 属性将被设为3；当响应接收完成时， readyState 属性值才会被设定为4。如果send(data)方法中data参数的类型为DOMString，数据将被编码成UTF-8；如果是Document类型，将使用由data.xmlEncoding 指定的编码来串行化该数据。

3.abort（）方法

  该方法可以暂停一个 HttpRequest 的发送或者 HttpResponse 的接收，并且将 XMLHttpRequest 对象设置为初始化状态。

4.setRequestHeader（）方法

  在调用send()方法之前，应该先使用 setRequestHeader ()方法设置请求的Content-Type头部信息。当 readyState 属性为l时，在调用open()方法后再调用这个方法，否则将得到一个异常。 setRequestHeader (header, value)方法包含两个参数，第一个参数是header键名称，第二个参数是键值。

5.getResponseHeader方法

  该方法用于检索响应的头部值。仅当readyState属性是3或4（既响应头部可用以后）时才可以调用该方法，否则返回一个空字符串。此外，还可以通过getAllResponseHeader（）方法获取所有的HttpResponse的头部信息。