原生js的ajax的封装

初学ajax,分装的ajax方法

/*
             参数json所需要的属性:
                * type :string 可缺省(默认 "GET"),代表请求的方式
                * url :string 不可缺省,代表请求的地址
                * aysn :boolean 可缺省(默认 true),代表是否异步
                * data :json 可缺省,代表需要传递的数据
                * success : function 可缺省,代表成功的回调函数,该函数第一个形参代表后台返回的数据
                * error :function 可缺省,代表失败的回调函数,该函数的第一个形参代表请求的HTTP状态码
             */
            function ajax( json ){
                var type = json.type || "GET",
                    url = json.url,
                    aysn = json.aysn !== false,
                    data = json.data,
                    success = json.success,
                    error = json.error;
                //将json格式的data处理成string格式
                data = data && (function () {
                    var dataStr = "";
                    for (var key in data) dataStr += key + "=" + data[key] + "&";
                    return dataStr;
                })();
                //让get请求的url后面跟上数据
                if ( /get/i.test(type) ){
                    url += "?" + (data||"") + "_="+new Date().getTime();//解决缓存;
                    data = undefined;
                }
                //ajax主体
                var xhr = new XMLHttpRequest();
                xhr.open( type , url , aysn );
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.send( data );
                xhr.onreadystatechange = function () {
                    if ( this.readyState === 4 ){
                        var status = this.status;
                        if ( status >= 200 && status < 300 ){
                            success && success( this.responseText );
                        }else{
                            error && error( status );
                        }
                    }
                };
            }

你可能感兴趣的:(原生js的ajax的封装)