ajax封装

一、参数设计：

options

请求方式：

type : "GET|POST",

请求路径：

url : "路径",

返回类型：

dataType : "text|json",

发送数据：

data : null,

404状态的回调函数：

status

如：

status : {

404 : function(){

}

成功的回调函数：

success : function(){

}

错误的回调函数：

error : function(){

}

完成的回调函数：

complete : function(){

}

回调函数的this指向：

context : 回调函数里面this指向的绑定;

设置默认参数：

 1  var _default = {
 2                 type : "GET",
 3                 url : "",
 4                 data : null,
 5                 dataType : "text",
 6                 status : null,
 7                 success : function(){},
 8                 complete : function(){},
 9                 error : function(){}
10             }

如果用户传入了其他数据会对默认参数进行覆盖

封装代码：

 1 function ajax( options ){
 2             // 默认参数;
 3             var _default = {
 4                 type : "GET",
 5                 url : "",
 6                 data : null,
 7                 dataType : "text",
 8                 status : null,
 9                 success : function(){},
10                 complete : function(){},
11                 error : function(){}
12             }
13             options = assign( _default , options );
14             options.type = options.type.toLowerCase();
15             // 如果存在context;
16             if( isObject(options.context) ){
17                 var callback_list = ["success","complete","error"];
18                 callback_list.forEach( function( item ){
19                     options[item] = options[item].bind( options.context );
20                 })
21             }
22             
23             // 1. 创建shr ;
24             var xhr = null;
25             if(typeof XMLHttpRequest === "function"){
26                 xhr = new XMLHttpRequest();
27             }else{
28                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
29             }
30             // 1. 如果请求方式为get，那么我们把数据拼接到url上;
31             if(options.type === "get"){
32                 options.url =  toUrlData( options.data , options.url , options.type)
33             }
34             // 2. 如果请求方式为post，那么我们把数据拼接到data上;
35             if(options.type === "post"){
36                 options.data =  toUrlData( options.data , options.url , options.type)
37             }
38             // 2. 根据数据进行方法的调用;
39             xhr.open( options.type , options.url , true ) ;
40             options.type === "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";
41             // 3. 调用send方法;
42             xhr.send( options.type=== "get" ? null : options.data );
43             // 4. 调用回调函数;
44             xhr.onreadystatechange = function(){
45                 // xhr程序运行结束;
46                 if( xhr.readyState === 4 ){
47                     options.complete();
48                     if( /^2d{2}$/.test(xhr.status) ){
49                         // 5.传递数据
50                         // 如果需要转换成json那么我们就返回json,如果不需要原样返回;
51                         // 如果JSON.parse报错了那么我们要调用错误函数;
52                         try{
53                             var res = options.dataType === "json" ? JSON.parse(xhr.responseText) : xhr.responseText; 
54                             options.success(res);
55                         }catch(e){
56                             options.error(e,xhr.status);
57                         }
58                     }else{
59                         options.error("error",xhr.status);
60                     }
61                     // 策略模式调用 : 
62                     if( isObject(options.status) ){
63                         typeof options.status[xhr.status] === "function" ? options.status[xhr.status]() : "";
64                     }
65                 }
66             }
67         }

封装内部使用的方法：

合并对象：

function assign(){
            var target = arguments[0];
            for(var i = 1 ; i < arguments.length ; i ++){
                for(var attr in arguments[i]){
                    target[attr] = arguments[i][attr];
                }
            }
            return target;
        }

URL按请求方式处理：

function toUrlData( obj , url , method){
            if( isObject(obj) ){
                var str = "";
                for(var attr in obj){
                    str += "&" + attr + "=" + obj[attr]
                }
                str = str.slice(1);
                method = method || "";
                if( method.toUpperCase() === "POST"){
                    return str;
                }
                url += "?" + str;
                return url;
            }
            return url;
        }

判断类型：

function isObject( data ){
            return (typeof data === "object" && data !== null && data.constructor && data.constructor === Object)
        }