个人主页：这个昵称我想了20分钟
✨往期专栏: 【速成之路】jQuery
【速成之路】SQLserver
XMLHttpRequest对象本期专栏：【速成之路】Ajax
- 初始化XMLHttpRequest对象
- XMLHttpRequest对象的常用属性和事件
- 1.readyState属性
- 2.response Text属性
- 3.responseXML属性
- 4.status属性
- 5.statusText属性
- 6.onreadystatechange事件
- XMLHttpRequest对象的常用方法
- 1.open（）方法
- 2.send（）方法
- 3.abort（）方法
- 4.setRequestHeader（）方法
- 5.getResponseHeader方法
Ajax的原理是 通过 XmlHttpRequest 对象向服务器发出异步请求，从服务器获得所需要的数据，然后用 JavaScript 来操作DOM而更新页面。这其中最关键的一步就是 从服务器获得请求数据。
XMLHttpRequest 对象是一个具有应用程序接口的 JavaScript 对象，能够使用HTTP协议连接服务器，这是微软公司为了满足开发者的需要而设的。
通过 XMLHttpRequest 对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，这样既减轻了服务器负担，又加快了响应速度，缩短了用户的等待时间。
所有现代浏览器(例如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 响应的接收。
responseText 属性包含客户端接收到的HTTP响应的文本内容。
- readyState 属性为0、1或2时， responseText 属性包含一个空字符串。
- readyState 属性值为3时，响应中包含客户端还没完成的响应信息。
- readyState 属性值为4时， responseText 属性包含完整的响应信息。
只有当 readyState 属性为4时，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或者 application/xml）时，该属性才会有值并且被解析成一个XML文档，否则该属性为null；如果该回传的XML文档结构未完成响应回传，该属性也会为null。
responseXML 属性用来描述被XMLHttpRequest 解析后的XML文档的属性。
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()方法的参数说明见下表所示。
| 参数 | 说明 |
|---|---|
| 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的头部信息。
