小白入门 - 关于Ajax的介绍

Ajax 是什么

Ajax 是 Asynchronous JavaScript XML 的缩写，被译为异步 JavaScript 和 XML 。Ajax 本身并不是一个新技术，而是一个在2005年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的“新”方法。

当使用 Ajax 模型，HTML 页面能够快速地将数据逐步更新显示在用户界面上，不需要重载（刷新)整个页面。这使得 HTML 页面能成更快速地对用户的操作进行反馈。

尽管 Ajax 中的 “ X ” 代表 XML，但由于 JSON 的许多优势，目前 JSON 的使用比 XML 更加普遍。

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

Ajax 的核心对象

实现 Ajax 异步交互的核心就是 XMLHttpRequest 对象，该对象为客户端提供了在客户端和服务器之间传输数据的功能。

XMLHttpRequest 对象提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。

XMLHttpRequest 对象最初由微软设计，随后被 Mozilla 、Apple 和 Google 采纳。如今，该对象已经被 W3C 组织标准化。通过该对象，可以很容易地得到一个 URL 上的资源数据。尽管名字里有XML，但 XMLHttpRequest 对象可以得到所有类型的数据资源，并不局限于 XML 格式的数据。

实现 Ajax 的执行步骤

1. 创建 Ajax 的核心对象 XMLHttpRequest 对象
2. 通过 XMLHttpRequest 对象的 open() 方法与服务器端建立连接
3. 构建请求所需的数据内容，并通过 XMLHttpRequest 对象的 send() 方法发送给服务器端
4. 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端的通信状态
5. 接收并处理服务器端向客户端响应的数据结果
6. 将处理结果更新到 HTML 页面中

创建 Ajax 的核心对象

(function () {
  function createXMLHttpRequest() {
    var httpRequest;
    if (window.XMLHttpRequest) {// 适用于Chrome，Firefox，Safari ...
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // 适用于IE
      try {
        httpRequest = new ActiveXObject('MSxml2.XMLHTTP');// IE 7+
      } catch (e) {
        try {
          httpRequest = new ActiveXObject('Microsoft.XMLHTTP');// IE 6-
         } catch (e) { }
      }
   }
   return httpRequest;
 }
  window.createXMLHttpRequest = createXMLHttpRequest;
})();