AJAX

什么是AJAX？

AJAX是异步Javascript和XML（Asynchronous Javascript And XML）。简单点说，就是使用XMLHttpRequest对象与服务器通信。

它可以使用JSON，XML,HTML和文本等多种格式发送和接受。AJAX最吸引人的就是它的‘异步特性’，也就是说他可以在不刷新页面的

情况下与服务器通信，交换数据，更换页面。

主要做的事：

1、在不重新加载的页面情况下发送请求给服务器；

2、接受并使用从服务器发来的数据；

第一步：XMLHttpRequest对象发送http请求，

// Old compatibility code, no longer needed.
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

发送一个请求后，会收到响应。在这一阶段，你要告诉XMLHttp请求对象是由哪一个JavaScript函数处理响应，在设置了对象的

onreadystatechange属性后给他命名，当请求状态改变时间函数

httpRequest.onreadystatechange = nameOfTheFunction;

要注意的是，函数名后没有参数，因为你把一个引用赋值给了函数，而不是真正的调用了它。此外，如果不使用函数名的方式，你还

可以用JavaScript的匿名函数响应处理的动作。就像下面这样：

httpRequest.onreadystatechange = function(){
    // Process the server response here.
};

接下来，声明当你接到响应后的要做什么，你要发送一个实际的请求吗，通过调用HTTP请求对象的open()和send()方法，像

下面这样：

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

1.open()的第一个参数是HTTP请求方法，有GET,POST,HEAD以及服务器支持的其他方法。保证这些方法一定要是大写字母，否则

其他一些浏览器（比如FireFox）可能无法处理这个请求；

2.第二个参数是要发送的URL。由于安全原因，默认不能调用第三方URL域名。确保你在页面中使用的是正确的域名，否则在调用open()方法是会有“权限被拒绝”错误提示。一个容易犯的错误是你企图通过domain.tld访问网站，而不是www.domain.tld。

3.第三个参数是可选，用于设置请求是否是异步的。如果设为true（默认设置），javascript执行会持续，并且在服务器还没有响应的情况下与页面进行交互。

send()方法的参数可以是任何你想发送给服务器的内容，如果是POST请求的话。发送表单数据时应该用服务器可以解析的格式，想查询语句：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

或者其他格式, 类似 multipart/form-data，JSON，XML等。

如果你使用 POST 数据，那就需要设置请求的MIME类型。比如，在调用 send() 方法获取表单数据前要有下面这个：

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

第二步 处理器服务器响应

在发送请求时，你提供的Javascript函数名负责处理响应

httpRequest.onreadystatechange = nameOfTheFunction;

这个函数应该做什么？首先，函数要检查请求的状态。如果状态的值是XMLHttpRequest.DONE（对应的值是4），意味着服务器

响应收到了并且是没有问题的，然后就可以继续执行。

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

全部readyState状态值都在 XMLHTTPRequest.readyState，如下也是：

• 0 (未初始化) or (请求还未初始化)
• 1 (正在加载) or (已建立服务器链接)
• 2 (加载成功) or (请求已接受)
• 3 (交互) or (正在处理请求)
• 4 (完成) or (请求已完成并且响应已准备好)
  
  接下来，

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

在检查完请求状态和HTTP响应码后，你就可以用服务器返回的数据做任何你做的了，你有两个方法去访问这些数据：
httpRequest.responseText-服务器以文本字符的形式返回

httpRequest.responseXML-以XMLDocument对象方式返回，之后就可以使用Javascript来处理。

注意上面这一步只在你发起异步请求时有效（既 open() 的第三个参数未特别指定或设为 true）。如果你你发起的是同步请求则不必使用函数，但是非常不推荐这样子做，它的用户体验很糟糕。

例子：

<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);

  function makeRequest() {
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', 'test.html');
    httpRequest.send();
  }

  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>