原生js实现Ajax的原理。


Ajax(Asynchronous JavaScript and XML)表示异步的js与xml。

有别于传统web的同步开发方式。
原理:通过XMLHttpRequest对象向服务器发送异步请求,从服务器获得数据,然后使用js操作DOM更新数据。
该对象是ajax的核心机制,他是在IE5中首先引入的,是一种支持异步请求的技术。
通过ajax可以及时的向服务器提出请求和处理响应,而不阻塞用户,达到无刷新更新部分页面的效果。

XMLHttpRequest这个对象的属性有:
onreadystatechange 每次状态改变所触发事件的事件处理程序;
responseText 从服务器进程返回数据的字符串形式;
responseXML 从服务器进程返回的DOM兼容的文档数据对象;
status 从服务器返回的数字代码,常见的200(客户端请求成功,已就绪)和404(请求资源不存在)
statusText 伴随状态码的字符串信息 (eg:200 OK)

readyState 对象状态值
0(未初始化状态)对象已建立或已被abort()方法重置,尚未调用open方法。
1(初始化状态)open()方法已经调用,但是send()方法为调用。请求还没有被发送。
2(发送数据)send()方法法以调用,HTTP请求已发送到Web服务器。未接收到响应。
3(数据传送中)所有响应头部都已经接收到。响应体开始接受但未完成。
4(完成加载)HTTP响应已经完全接收。

ajax({
                            url: "./TestXHR.aspx",       //请求地址
                            type: "POST",                            //请求方式
                            data: { name: "super", age: 20 },    //请求参数
                            dataType: "json",
                            success: function (response, xml) {
                              // 此处放成功后执行的代码
                            },
                            error: function (status) {
                              // 此处放失败后执行的代码
                            }
                          });

开始封装

function ajax(options) {
                            options = options || {};
                            options.type = (options.type || "GET").toUpperCase();
                            options.dataType = options.dataType || "json";
                            var params = formatParams(options.data);
                            var xhr;
                         
                            //创建 - 第一步
                            if (window.XMLHttpRequest) {
                              xhr = new XMLHttpRequest();
                            } else if(window.ActiveObject) {         //IE6及以下
                              xhr = new ActiveXObject('Microsoft.XMLHTTP');
                            }
                         
                            //连接 和 发送 - 第二步
                            if (options.type == "GET") {
                              xhr.open("GET", options.url + "?" + params, true);
                              xhr.send(null);
                            } else if (options.type == "POST") {
                              xhr.open("POST", options.url, true);
                              //设置表单提交时的内容类型
                              xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                              xhr.send(params);
                            }

                             //接收 - 第三步
                            xhr.onreadystatechange = function () {
                              if (xhr.readyState == 4) {
                                var status = xhr.status;
                                if (status >= 200 && status < 300 || status == 304) {
                                  options.success && options.success(xhr.responseText, xhr.responseXML);
                                } else {
                                  options.error && options.error(status);
                                }
                              }
                            }
                          }

                          //格式化参数
                          function formatParams(data) {
                            var arr = [];
                            for (var name in data) {
                              arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
                            }
                            arr.push(("v=" + Math.random()).replace("."));
                            return arr.join("&");
                          }

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM