Jquery揭秘系列：ajax原生js实现

2021-08-17 16:55:53

讲到ajax这个东西，我们要知道两个对象XMLHTTPRequest和ActiveXObject ，提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了，兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西，所以是为了兼容IE版本，我们用的只是它的xmlHTTP功能。

为了功能的明确和清晰，我们把这个ajax代码分为5个部分：

对象的创建
onreadystatechange句柄处理
参数拼接
Get功能实现
Post功能实现

1.对象的创建 :

首先创建用作 XMLHttpRequest 对象的 XMLHttp 变量。把它的值设置为 null。

按照 web 标准创建对象 (Mozilla, Opera 以及 Safari)：XMLHttp=new XMLHttpRequest()

按照微软的方式创建对象，在 Internet Explorer 6 及更高的版本可用：XMLHttp=new ActiveXObject("Msxml2.XMLHTTP")

如果捕获错误，则尝试更老的方法 (Internet Explorer 5.5) ：XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")

     var xhrFactory = function () {
                this.init.apply(this, arguments);
            }
            xhrFactory.prototype = {
                init: function () {
                    this.xhr = this.create();
                },
                create: function () {
                    var xhr = null;
                    try {
                        if (window.XMLHttpRequest) {
                            xhr = new XMLHttpRequest();
                        }
                        else if (window.ActiveXObject) {
                            xhr = new ActiveXObject("Msxml2.Xmlhttp");
                        }
                    }
                    catch (err) {
                        xhr = new ActiveXObject("Microsoft.Xmlhttp");
                    }
                    return xhr;
                }
}

2.onreadystatechange句柄:

    readystate: function (timeout,callback) {
                    this.xhr.onreadystatechange = function () {
                        if (this.readyState == 4 && this.status == 200) {
                            callback(eval("(" + this.responseText + ")"));
                        }
                        else {
                            setTimeout(function () {
                                this.xhr.abort();
                            }, !timeout ? 15000 : timeout);
                        }
                      
                    }
                }

这里面要说一下readyState和status属性。

readyState : 1.创建MLHTTP对象 2.打开与服务器的连接 3 .发送指令 4 等待处理请求结果。

status: 200.请求成功 400.请求错误。。。还有很多值，这里就不一个个说了。

timeout参数是请求过期时间 callback参数，回调对返回数据做了处理，转换成对象。

3.参数拼接

   para: function (data) {
                    var datastr = "";
                    if (data && Object.prototype.toString.call(data) == "[object Object]") {
                        for (var i in data) {
                            for (var i = 0; i < length; i++) {
                                datastr += i + "=" + data[i] + "&";
                            }
                        }
                    }
                    return datastr;
                }

这里是将传入的对象参数拼接成字符窜，用于ajax请求时发送参数。

4.Get功能实现：

   get: function (url, data, callback, async, timeout) {
                    this.readystate(timeout, callback);
                    var newurl = url;
                    var datastr = this.para(data);
                    newurl = url + "?" + datastr;
                    this.xhr.open("get", newurl, !async ? true : async);
                    this.xhr.send(null);
                }

get 请求，发送的参数是直接在url上拼接的,而不是在send里面发送，而post方式参数则是在send里面发送。

5.Post功能实现

    post: function (url, data, callback, async, timeout) {
                    this.readystate(timeout, callback);
                    var newurl = url;
                    var datastr = this.para(data);
                    this.xhr.open("post", newurl, !async ? true : async);
                    this.xhr.setRequestHeader("content-type", "x-www-form-urlencoded");
                    this.xhr.send(!datastr ? null : datastr);
                }

post这里面多了一段代码：this.xhr.setRequestHeader("content-type", "x-www-form-urlencoded");

这段代码其实是说明将整个发送内容作为一个整体进行编码，get则是单个参数进行编码拼接，这也是post和get的区别。

调用方式如下：

           var  xhr = new xhrFactory();
           xhr.post("test.ashx", null, function (data) {
                alert(data);
            });

Jquery揭秘系列：ajax原生js实现,布布扣,bubuko.com

Jquery揭秘系列：ajax原生js实现

码农公寓

相关文章