Ajax

同步交互和异步交互

所谓同步交互就是指当客户端向服务端和数据库发送数据之后，若要发送下一个请求需要等待服务端和数据库的响应结果。这就好比数据结构中的队列，一个执行完毕在执行下一个。也类似一些面向过程语言的代码执行顺序。

而异步交互就是指客户端向服务端发送数据之后，无需等待服务端和数据库的响应结果，就可以发送下一个请求。

如下图说明了同步交互和异步交互的区别：

异步交互与同步交互的劣势：

• 破坏了浏览器的前进和后退机制
• 后面逻辑依靠前面逻辑时，可能会出现问题
• Ajax 对搜索引擎支持较弱
• 容易引起 web 安全问题

Ajax 是什么

Ajax 全称 “Asynchronous JavaScript and XML” 被译为：异步 JavaScript 和 XML。

虽然 Ajax 中的 x 代表 XML，但是现在 JSON 的诸多优势 JSON 的使用比 XML 更加普遍。

JSON 和 XML 都用于在 Ajax 模型中封装数据

Ajax 涉及的技术

Ajax 并不是一个新技术，而是多个技术的整合：

• HTML
• CSS
• JavaScript
• DOM
• XML
• XMLHttpRequest 对象

XMLHttpRequest 是 Ajax 的核心。

XMLHttpRequest 对象提供了在客户端和服务端传输数据的功能，XMLHttpRequest 对象提供了通过 URL 方式来获取数据，只更新网页的一部分数据。

实现 Ajax 的步骤

• 创建 Ajax 核心对象（XMLHttpRequest）
• 通过 Ajax 核心对象的 open() 方法建立与服务端的链接
• 构建请求的数据内容，通过核心对象的 send() 方法发送给服务端
• 通过核心对象提供的 onreadystatechange 事件，监听服务端的通信状态
• 接受处理服务端响应的结果
• 将结果更新到页面

创建 XMLHttpRequest 对象

由于创建 Ajax 对象的方式在浏览器之间存在不同的情况所以需要编写一个自定义 js 文件来实现浏览器兼容。
主要兼容的是 IE 浏览器。

在其他非 IE 的主流浏览器中创建 Ajax 对象的方法为：new XMLHttpRequest()，
而在 IE 中又分为两种情况：

• IE7 版本：new ActiveXObject("Msxml2.XMLHTTP")
• IE6 及以下版本：new ActiveXObject("Microsoft.XMLHTTP")

Tools.js 文件如下：

Object.defineProperty(window, "createXMLHttpRequest", {
   
  value: function () {
   
    var httpRequest;
    // 如果是非IE浏览器
    if (window.XMLHttpRequest) {
   
      httpRequest = new XMLHttpRequest();
    }
    // 如果是 IE 浏览器
    else if (window.ActiveXObject) {
   
      try {
   
        // IE 7+
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
   
        try {
   
          // IE 6-
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
   }
      }
    }
    return httpRequest;
  },
});

在 HTML 页面中引入之前创建的 Tools.js 文件，然后调用 createXMLHttpRequest 方法进行创建即可。
如下代码：

var ajax = createXMLHttpRequest();
console.log(ajax);

得到的结果为：

XMLHttpRequest(onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload,...)

返回的结果为一个 XMLHttpRequest 对象。

实现 Ajax 异步交互

接下来模拟发请求和获取响应数据的过程，还是依照上面的过程

以下下 XHR 均代表 XMLHttpRequest

• 创建 XHR 对象
• 调用 XHR 对象的 open() 方法
• 调用 XHR 对象的 send() 方法
• 调用 onreadystatechange 监听服务端通信状态
• 使用 readyState 属性判断服务端响应状态

open() 方法

open() 方法语法结构：

open(method, url[, async, user, password])

参数说明：

• method：请求方法，get、post、put、delete 等
• url：发送请求的 url
• async：是否异步交互
• user：用户名用于认证用途
• password：用户密码

send() 方法

在调用 send() 方法时，