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>
