美文网首页
原生js的ajax的封装

原生js的ajax的封装

作者: 东东丶酱 | 来源:发表于2017-10-29 13:13 被阅读0次

    初学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的封装

          本文链接:https://www.haomeiwen.com/subject/dcnlpxtx.html