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