JS高程关于ajax的学习笔记

1.ajax介绍

ajax技术可以实现浏览器向服务器请求数据时不需要重新加载页面，就可以从服务器中获取需要的数据。

ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR对象为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说，可以使用 XHR 对象取得新数据，然后再通过 DOM 将新数据插入到页面中。另外，虽然名字中包含 XML 的成分，但 Ajax 通信与数据格式无关；这种技术就是无须刷新页面即可从服务器取得数据，但不一定是 XML 数据。

2. XMLHttpRequest对象

既然XMLHttpRequest是一个对象，那么就向其他的对象需要通过new关键字来构造一个对象实例 ：

var xhr = new XMLHttpRequest();

IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的 XHR 对象

如果你必须还要支持 IE 的早期版本，那么则可以在这个 createXHR()函数中加入对原生 XHR对象的支持：

function createXHR(){

   if (typeof XMLHttpRequest != "undefined"){

  	 return new XMLHttpRequest();

  } else if (typeof ActiveXObject != "undefined"){

  	if (typeof arguments.callee.activeXString != "string"){

  		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 Error("No XHR object available.");

  }

}

这个函数中新增的代码首先检测原生 XHR 对象是否存在，如果存在则返回它的新实例。如果原生对象不存在，则检测 ActiveX 对象。如果这两种对象都不存在，就抛出一个错误。然后，就可以使用下面的代码在所有浏览器中创建 XHR 对象了。

var xhr = createXHR();

由于其他浏览器中对 XHR 的实现与 IE 最早的实现是兼容的，因此就可以在所有浏览器中都以相同方式使用上面创建的 xhr 对象。

3.XHR对象的用法

使用XHR时首先需要调用的方法是open(),调用 open()方法并不会真正发送请求，而只是启动一个请求以备发送。open()方法接收三个参数，要发送的请求的类型

（"get"、"post"等）、请求的 URL 和表示是否异步发送请求的布尔值。如：

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

要发送特定的请求，必须像下面这样调用 send()方法：

xhr.open("get", "example.txt", true);

xhr.send(null);

send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入 null，因为这个参数对有些浏览器来说是必需的。调用 send()之后，请求就会被分派到服务器。

浏览器在收到服务器的响应后，响应的数据会自动填充 XHR 对象的属性，相关的属性简介如下。

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

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

 status：响应的 HTTP 状态。

 statusText：HTTP 状态的说明。

在接收到响应后，第一步是检查 status 属性，以确定响应已经成功返回。一般来说，可以将 HTTP状态代码为 200 作为成功的标志。此时，responseText 属性的内容已经就绪，而且在内容类型正确的情况下，responseXML 也应该能够访问了。此外，状态代码为 304 表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。为确保接收到适当的响应，应该像下

面这样检查上述这两种状态代码：（适合用于同步请求）

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

}

像前面这样发送同步请求当然没有问题，但多数情况下，我们还是要发送异步请求，才能让JavaScript 继续执行而不必等待响应。此时，可以检测 XHR 对象的 readyState 属性，该属性表示请求

响应过程的当前活动阶段。这个属性可取的值如下。

 0：未初始化。尚未调用 open()方法。

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

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

 3：接收。已经接收到部分响应数据。

 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。

只要 readyState 属性的值由一个值变成另一个值，都会触发一次 readystatechange 事件。可以利用这个事件来检测每次状态变化后 readyState 的值。通常，我们只对 readyState 值为 4 的阶段感兴趣，因为这时所有数据都已经就绪。不过，必须在调用 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);