前言：
目前已有了很好的Ajax封装，例如：JQuery框架中的Ajax，那么为什么还要自己封装一下下呢？原因很简单，一是了解人家的封装过程，二是自己熟悉代码，三是更加深刻对Ajax核心对象的理解，以及使用Ajax异步更新的基本原理。体会和传统Web开发的异同
基础知识：
核心对象：
XMLHttpRequest对象：它是XML里DOM技术中的一个重要对象。它提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。
常用属性：
1、readyState：HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。
2、responseText：目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
3、responseXML：对请求的响应，解析为 XML 并作为DOM对象返回。
4、status：由服务器返回的http状态码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
事件句柄：
onreadystatechange，每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
常用的方法：
abort()：取消当前响应，关闭连接并且结束任何未决的网络活动。这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
open()：初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
send()：发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
一些常见值的含义
readystate的五个状态：
| 状态 | 名称 | 描述 |
|---|---|---|
| 0 | Uninitialized | 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 |
| 1 | Open | open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 |
| 2 | Sent | Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 |
| 3 | Receiving | 所有响应头部都已经接收到。响应体开始接收但未完成。 |
| 4 | Loaded | HTTP 响应已经完全接收。 |
status中：如 200 表示成功，而 404 表示 "Not Found" 错误
原理剖析：
简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。我们还是用两张对比图的形式来辅助咱们来理解吧。
传统的Web方式请求服务器数据图示：
Ajax方式的Web请求图示：
两者应用模式的对比图示：
自己用原生JS代码封装的简单Ajax：
<span style="font-family:KaiTi_GB2312;font-size:18px;">/* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ //创建xmlhttprequest对象 var MyXMLHttpRequest = function(){ var xmlHttpRequest; if(window.XMLHttpRequest){//非IE，w3c标准下 xmlHttpRequest = new XMLHttpRequest(); if(xmlHttpRequest.overrideMimeType){ xmlHttpRequest.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){//IE情况下 var activeXName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"] for(var i = 0; activeXName.length > i ; i++){ try{ xmlHttpRequest = new ActiveXObject(activeXName[i]); break; }catch(e){ } } } if(xmlHttpRequest == null || xmlHttpRequest ==undefined){ alert("xmlHttpRequest对象创建失败！"); }else{ this.xmlhttp = xmlHttpRequest; } } /** * 用户发送请求的方法 * @param {type} method : must be "POST" || "GET" * @param {type} url : "null"and "undefined" is not allow * @param {type} data : * @param {type} callback : * @param {type} failback : * @returns {undefined} * */ MyXMLHttpRequest.prototype.send = function(method,url,data,callback,failback){ if(this.xmlhttp != null && this.xmlhttp != undefined){ //处理请求的方法 method = method.toUpperCase(); if(method != "POST" && method != "GET"){ alert("请求的方法，只能是POST或者GET"); } //处理请求的URL地址 if(url == null || url == undefined){ alert("必须要有URL地址，否则找不到资源"); } //定义临时变量替代 this.xmlhttp var tempXMLHttp = this.xmlhttp; //注册回调方法 this.xmlhttp.onreadystatechange = function(){ if(tempXMLHttp.readyState == 4){ if(tempXMLHttp.status == 200){ var responseText = tempXMLHttp.responseText; var responseXML = tempXMLHttp.responseXML; //服务器数据正确返回时，其回调函数是否存在，若存在则用该回调方法处理服务器返回的数据 if(callback == null || callback == undefined){ alert("没有设置处理数据正确返回的方法"); alert("返回的数据：" + responseText); }else{ callback(responseText,responseXML); } }else{ //服务器数据返回失败时，其回调函数是否存在，若存在则用该回调方法处理服务器返回的错误数据 if(failback == null || failback == undefined){ alert("没有设置处理数据返回失败的方法"); alert("http的响应码：" + tempXMLHttp.status + "相应码的文本信息：" + tempXMLHttp.statusText); }else{ failback(tempXMLHttp.status,tempXMLHttp.statusText); } } } } this.xmlhttp.open(method,url,true) //当请求方法为POST的时候，设置请求头 if(method == "POST"){ this.xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } this.xmlhttp.send(data); }else{ alert("XMLHttpRequest对象创建失败！"); } } //在原型上注册一个abort函数来停止和服务器的交互 MyXMLHttpRequest.prototype.abort= function(){ this.xmlhttp.abort(); }</span>