还不会用ajax？教你封装一个方便又好用的ajax

还不会用ajax？教你封装一个方便又好用的ajax

1.准备工作 编写方法

判断是否为对象

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

根据请求方式修改date/url

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

合并对象

  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;
    }

2.准备工作完成，开始封装ajax

   function ajax(options){
    
    
   //首先定义一个默认的对象存储默认的请求信息
        var _default = {
    
    
        //请求方式
            type:"GET",
            //请求路径
            url:"",
            //请求数据 此处除了text 外可以json对象
            datatype:"text",
            //请求的数据
            data:null,
            //成功则执行
            success:function(){
    
    },
            //失败则执行
            error:function(){
    
    },
            //完成则执行
            complete:function(){
    
    },
            //是否改变回调函数的this指向
            context:null
        }
        //首先利用刚才封装的合并对象方法 把的实参覆盖原来定义的默认对象
        options = assign(_default,options);
        //把请求方式统一小写/大写 方便后面判断
        options.type = options.type.toLowerCase();
		//判断是否存在改变指针的对象 存在则利用bind改变指针指向
        if(isObject(options.context)){
    
    
            var calllist = ["success","error","complete"];
            calllist.forEach(function(item){
    
    
                options[item] = options[item].bind(options.context);
            })
        }
		//获取xhr 此处用到了兼容性写法
        var xhr = null;
        if(typeof XMLHttpRequest === "function"){
    
    
            xhr = new XMLHttpRequest();
        }else{
    
    
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        //判定请求方式 因为get请求的url中附带数据 post请求的date中携带数据 所以根据需求修改对应的数据
        if(options.type === "get"){
    
    
            options.url = toUrlData(options.data,options.url,options.type)
        }
        if(options.type === "post"){
    
    
            options.data = toUrlData(options.data,options.url,options.type)
        }
        //开放连接
        xhr.open(options.type,options.url,true);
        // 如果为post要修改请求头
        options.type === "post" ? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded") : "";
        //传送数据 get的话传送null即可
        xhr.send(options.type === "post"?options.data:null);
        xhr.onreadystatechange = function(){
    
    
            if(xhr.readyState === 4){
    
    
            //当readyState为4执行连接完成方法
                options.complete();
                //当status为200-299执行连接成功方法
                if( /^2\d{
    
    2}/.test(xhr.status) ){
    
    
                    try{
    
    
                    //当用户请求的对象为json时 有可能会转化错误 此处用抛异常 解决该问题
                        var res = options.datatype === "json"?JSON.parse(xhr.responseText):xhr.responseText;
                        options.success(res);
                    }catch(e){
    
    
                        options.error(e);
                    }
                }else{
    
    
                //否则执行连接失败方法
                    options.error(xhr.status);
                }
            }
        }
    }

3.总结

1.声明默认对象 用新的实参改变对象内容

2.获取xhr

3.根据请求方式改变url 和 data

4.开放连接

5.post的话修改请求头

6.发送数据

7.判定连接状态 执行对应方法 一个ajax就完成啦