Ajax实战总结——用原生JavaScript代码封装自己的Ajax核心对象

前言：

   目前已有了很好的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>

小结：

 一切高大上的看似很难的技术，如果一层层分治的话，那也就都变得很简单了。正所谓大道至简！