AJAX 异步交互的底层原理

2019独角兽企业重金招聘Python工程师标准>>>

        AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

        AJAX 不是一门新的语言，而是一种前端交互的艺术。

        AJAX 的具体使用无需多言，知道它的人必然知道使用它有多么容易和简单。这里写一下它的底层原理（注：并不是 AJAX 的底层实现，这里说的是原理，并不是 AJAX 的源码解析）。

XMLHttpRequest 是 AJAX 的基础：

        所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

        XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

        这样创建 XMLHttpRequest 对象

//创建 XMLHttpRequest 对象
var xmlHttpReq = new XMLHttpRequest();
//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
var xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

        这样就相当于定义了一个类 AJAX 请求方法

var xmlHttpReq;
function loadXMLDoc(url,cfunc) { //定义一个发送请求的方法
    if (window.XMLHttpRequest) { //为IE7+, Firefox, Chrome, Opera, Safari浏览器创建XMLHttpRequest对象
        xmlHttpReq=new XMLHttpRequest();
    } else { //IE6, IE5浏览器的兼容（一般不需要兼容，这些浏览器大概早就已经被扔进历史的垃圾堆里了）
        xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlHttpReq.onreadystatechange=cfunc; //定义 onreadystatechange 事件发生时的执行方法
    //每当 readyState 改变时，就会触发 onreadystatechange 事件
    xmlHttpReq.open("GET",url,true); //定义get请求
    xmlHttpReq.send();//发送
}
function myFunction(){
    //调用发送请求的方法
    loadXMLDoc("/ajax/test1.txt",function() { //回掉方法
        if (xmlHttpReq.readyState==4 && xmlHttpReq.status==200){
            document.getElementById("myDiv").innerHTML=xmlHttpReq.responseText;
        }
    });
}

首先创建 XMLHttpRequest 对象： xmlHttpReq；

        使用 XMLHttpRequest 对象的 open() 方法定义请求类型，使用 XMLHttpRequest 对象的 send() 方法将请求发送到服务器；参数如下：

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。 string：仅用于 POST 请求

接下来需要接收服务器的响应并作进一步的操作：

        使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性可以获得来自服务器的响应。responseText 属性返回字符串形式的响应； responseXML 属性则是 xml 形式的。

        每当 readyState 改变时，就会触发 onreadystatechange 事件。

        readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

        在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

        当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function() {
    if (xmlHttpReq.readyState==4 && xmlHttpReq.status==200) {
        document.getElementById("myDiv").innerHTML=xmlHttpReq.responseText;
    }
}

最后：onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

        给 onreadystatechange 事件定义一个方法，则相当于 AJAX 中的回掉方法。

        理解了 AJAX 的工作原理，有兴趣的朋友就可以自己根据需要定义各种满足自己需求的工具了。这样，习惯使用 JQuery 插件的朋友，如果突然不再使用这个插件了，那么也不会为此发愁了。

参考资料：http://www.w3school.com.cn

转载于:https://my.oschina.net/watsonos/blog/903651