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