AJAX的工作原理

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML

  AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用AJAX）如果需要更新内容，必需重载整个网页面。

创建AJAX的过程

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

(1) 创建 XMLHttpRequest 对象

var xmlHttp = new XMLHttpRequest();                      // IE7及以上
var xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');    // IE5 和 IE6

(2) 打开连接

xmlHttp.open(method, url, async);

• method：请求的类型，GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

同步：指发出数据后，等接收到响应以后再发送下一个数据包的通讯方式。
异步：指发出数据后，不用等待接收到响应，接着发送下一个数据包的通讯方式。

(3) 向服务器发送请求

xmlHttp.send(string);

GET 请求:

xmlHttp.send();

POST 请求:

xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 向请求添加HTTP头
xmlHttp.send('fname=Bill&lname=Gates');

GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
 a. 无法使用缓存文件（更新服务器上的文件或数据库）；
 b. 向服务器发送大量数据（POST 没有数据量限制）；
 c. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

(4) 接收服务器响应

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
XMLHttpRequest 对象有三个重要的属性：

• Onreadystatechange
    存储函数（或函数名），每当readyState 属性改变时，就会调用该函数。

• readyState
    存有XMLHttpRequest 的状态信息，从 0 到 4 发生变化。
       0: 请求未初始化
       1: 服务器连接已建立
       2: 请求已接收
       3: 请求处理中
       4: 请求已完成，且响应已就绪

• Status（HTTP状态码）
       1字头：消息。这一类型的状态码，代表请求已被接受，需要继续处理。
       2字头：成功。这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。( 200:’OK’ )
       3字头：重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。( 304:’Not Modified’ )
       4字头：请求错误。这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
       5、6字头：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生。

每当 readyState 改变时，就会触发 onreadystatechange 事件。
在onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当readyState 等于 4 且 status 为 2字头或 304 时，表示响应已就绪：

  xmlHttp.onreadystatechange = function() {
      if (xmlHttp.readyState == 4 && xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlhttp.status == 304) {
          document.getElementById("myDiv").innerHTML = xmlHttp.responseText;    // responseText    获得字符串形式的响应数据
      }
  }

下面是封装的ajax函数：

  GET 方式：
  function ajax(url, success, error) {
      if (window.XMLHttpRequest) {
          var oAjax = new XMLHttpRequest();
      } else {
          var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
      }
      oAjax.open('GET', url, true);
      oAjax.send();
      oAjax.onreadystatechange = function() {
          if (oAjax.readyState == 4) {
              if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
                  success && success(oAjax.responseText);    // 成功的回调函数
              } else {
                  error && error(oAjax.status);              // 失败的回调函
              }
          }
      };
  }

  POST 方式：
  function ajax(url, success, error) {
      if (window.XMLHttpRequest) {
          var oAjax = new XMLHttpRequest();
      }else{
          var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
      }
      oAjax.open('POST', url, true);
      oAjax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      oAjax.send('fname=Bill&lname=Gates');
      oAjax.onreadystatechange = function() {
          if (oAjax.readyState == 4) {
              if (oAjax.status >=200 && oAjax.status < 300 || oAjax.status == 304) {
                  success&&success(oAjax.responseText);    // 成功的回调函数
              } else {
                  error&&error(oAjax.status);              // 失败的回调函
              }
          }
      };
  }