Ajax学习笔记--脚本化HTTP

Ajax(Asynchronous JavaScript + XML)，这项技术能够想服务器请求额外的数据而无需卸载页面，会带来更好的用户体验。Ajax的核心是XMLHttpRequest对象（简称XHR）。可以使用XHR对象获取数据，然后再通过DOM将新数据插入到页面。另外名字中虽然包含XML，但Ajax通信与数据格式无关。

 

1.创建一个XMLHttpRequest对象

XMLHttpRequest没有标准化，在IE中创建的过程和其他浏览器不同。

大多数浏览器(IE7+、)可以通过一个简单的构造函数调用来创建一个XMLHttpRequest对象：

var request = new XMLHttpRequest();

 在IE5（第一款引入XHR对象的浏览器），IE6中，XMLHttpRequest是一个ActiveX对象，必须把对象名传递给ActiveXObject()构造函数才能创建它：

var request = new ActiveXObject("Msxml2.XMLHTTP");

 不幸的是，在Microsoft XML HTTP库的不同发布版本中，该对象的名字也是不同的，根据在客户机上安装的库，有时候可能必须用下面代码替代：

var request = new ActiveXObject("Microsoft.XMLHTTP");

 

2.XHR的用法

 在使用XHR对象是，要调用的第一个方法是open（），它接受3个参数：要发送的请求的类型（’get‘,'post','head'等）、请求的URL和表示师傅哦一部发送请求的布尔值。此外，他也可以接受一个名字和密码作为可选的第4个和第5个参数。当从一个需要授权的服务器获取一个URL的时候，就要用到这两参数。

open()并不实际地向Web服务器发送请求。它只是保存自己的参数，等稍后发送请求的时候再用。

 

request.open("get","example.txt",false);
request.send(null);

 这里send的参数是要作为请求主体发送的数据，他是浏览器必须的，如果不传递数据则设为null。

在收到响应后，响应的数据会自动填充XHR对象的属性，相关属性简介：

• responseText:作为响应主体被返回的文本
• responseXML:如果响应的内容类型是“text/xml”或“application/xml”，这个属性中将保存包含着响应数据的XML DOM文档
• status:响应的HTTP状态
• statusText:HTTP状态说明

在收到响应后，第一步是检查status属性，以确定响应成功。一般可以将HTTP状态码200作为成功的标志。此外，状态码304表示请求的资源没有被修改。所以检测代码：

if(request.status>=200 && request.status<300 || request.status == 304){
  alert(request.responseText);
}else{
  alert("Request was unsuccessful": + request.status);
}

 像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求。此时，可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这属性可以取如下值：

• 0：未初始化。尚未调用open()方法。
• 1：启动。已经调用open()方法，但尚未调用send()方法。
• 2：发送。已经调用send()方法，但尚未接收到响应。
• 3：接收。已经接收到部分数据。
• 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用。

 只要readyState属性值由一个值变成另外一个值，都会出发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState值。