js中对Ajax使用解析与重构

Ajax使用思路

Ajax使用思路：
1、创建XMLHttpRequest对象
2、open(“method”,”URL”,asyncFlag)方法创建新的请求。
3、send(content)方法发送请求数据（get方法不需要指定content参数，post方法需要指定参数）
4、onreadystatechange属性设置状态改变时的处理函数（请求成功，返回成功等）
5、处理函数中指定返回成功或返回的处理函数
6、responseXML或resopnseText属性获取服务器返回的参数。

Ajax中常用属性

1、 onreadystatechange： 是指定状态改变时所触发的事件处理器的属性
在AJAX中，每个状态改变时都会触发这个事件处理器，通常会调用一个javascript函数

2、readyState:是XMLRequest对象提供的请求状态属性。该属性提供了5个属性值：
值—>意义
0—>未初始化
1—>正在加载
2—>已加载
3—>交互中
4—>完成
该属性常用于判断请求状态，当请求状态等于4，也就是为完成时，在判断请求是否成功，若成功，将开始处理返回结果。

3、status：表示返回服务器的HTTP状态码属性。返回值为长整型的数值。常用于当请求状态为完成时，判断当前的服务状态是否为成功。
常用的状态码：
100—->继续发送请求
200—->请求已成功
202—->请求被接受但未成功
400—->错误的请求
404—->文件未找到
408—->请求超时
500—->内部服务器错误
501—->服务器不支持当前请求所需要的某个功能

4、responseText:是XMLRequest对象提供的获取服务器响应的属性，表示为字符串。
5、responseXML：是XMLRequest对象提供的获取服务器响应的属性，表示为XML。这个对象可以被解析为一个DOM对象。

Ajax中常用函数

1、 open(“method”,”URL”,asyncFlag);创建新请求的方法
参数说明：
method：指定请求的类型，一般为GET或POST
URL：指定请求的地址。
asyncFlag：为可选参数，用于指定请求方式，异步请求为:true 同步请求为：false; 默认为true;

2、send(content);向服务器发送请求的方法；若为异步请求，则该方法立即返回。否则将等到接受到响应为止。
参数content用于指定发送的数据，可以时DOM对象、输入流或字符串。如果没有参数需要传递可以为null；

3、setRequestHeader(“header”,”value”); 该方法用于为请求的HTTP头设置值。
如：setRequestHeader(“Content-Type”,”application/x-www-form=urlencoded”);

4、abort();停止或放弃当前异步请求的方法。

5、getResponseHeader(“Content-Type”) 该方法用于返回响应的HTTP头部信息的方法
getResponseHeaders() 该方法用于以字符串的形式返回完整的HTTP头信息。包括：Server、Date、Content-Type和Content-Length

AJax重构代码

在用到Ajax的页面直接调用net.AjaxRequest函数并传入相应的参数即可
url：服务器的地址
onload：为请求成功并且服务器返回状态为200(即：成功)时执行的回调处理函数
onerror：服务器返回状态为不为200时，执行的错误处理函数
method：表示请求方式post/get
params：要向服务器传递的参数

// JavaScript Document
var net = new Object();
//编写构造函数
net.AjaxRequest = function (url,onload,onerror,method,params){

    this.req = null;
    this.onload = onload;
    this.onerror = (onerror)?onerror : this.defaultError;
    this.loadDate(url,method,params);
}

//编写用于初始化XMLHttpRequest对象并制定处理函数,最后返回HTTP发送的请求
net.AjaxRequest.prototype.loadDate =function(url,method,params){
    //重构回调函数
    net.AjaxRequest.onReadyState = function (){
        var req = this.req;
        var ready = req.readyState;
        if(ready==4){
            if(req.status == 200){
                this.onload.call(this); 
            }else{
//              alert("状态的");
                this.onerror.call(this);    
            }
        }
    }

    if(!method){
        method = "GET";
    }
    //创建XMLHttpRequest对象req
    if(window.XMLHttpRequest){
        this.req = new XMLHttpRequest();    
    }else if(window.ActiveXObject){
        try{
            this.req = new ActiveXObject("Microsoft.XMLHTTP");  
        }catch(e){
            try{
                this.req = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                console.log("不支持Ajax");
            }
        }
    }

    /*

     */


    if(this.req){
        try{
            var loader = this;

            /*
                  注意:在指定所触发的事件处理器时，所调用的函数不能添加小括号及指定参数名。不过这里可以使用匿名函数。
                  如下面的代码：
             */

            this.req.onreadystatechange = function(){
                net.AjaxRequest.onReadyState.call(loader);   
            }

            this.req.open(method,url,true);

            if(method == "POST"){
                this.req.setRequestHeader("Content-Type","application/x-www-form=urlencoded");
                this.req.setRequestHeader("x-requested-with","ajax");
            }
            console.log(params.toString());
            this.req.send(params);
        }catch(err){
            this.onerror.call(this);
        }
    }

    //重构默认的错误处理函数
    net.AjaxRequest.prototype.defaultError = function(){
        if(console) {
            console.log("错误数据----请求状态："+this.req.readyState + "--返回状态--"+this.req.status);  
        }else{
            alert("错误数据----请求状态："+this.req.readyState + "--返回状态--"+this.req.status);        
        }
    }


}