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：

/* 
 * 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();
}

小结：

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