原生JavaScript中的AJAX请求
AJAX = Asynchronous JavaScript and XML（异步的JavaScript和XML）。
ajax 原生 js 的写法：创建 XmlHttpRequest 对象（IE6+及IE6），onreadystatechange 事件（响应的处理），向服务器发送给请求。
创建XmlHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+,Firefox,Chrome，Opera，Safari浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else
{
//IE6,IE5浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有XMLHttpRequest的状态信息。
注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
以下时XMLHttpRequest对象的三个重要属性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。 |
| readyState | 存有XMLHttpRequest的状态。从0到4发生变化。<br />- 0：请求未初始化<br />- 1：服务器连接已建立<br />- 2：请求已接收<br />- 3：请求处理中<br />- 4：请求已完成，且响应已就绪 |
| status | 200："OK"<br />404：未找到页面 |
服务器响应
如需获得来自服务器的响应，使用XMLHttpRequest对象的responseText 或 responseXML 属性。
responseText 获得字符串形式的响应数据。responseXML 获得XML形式的响应数据，还需要作为XML对象进行解析。
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
发送XMLHttpRequest请求
如需将请求发送到服务器，使用XMLHttpRequest对象的open()和send()方法；
xmlhttp.open(method, url, async); // 设置请求方法、地址、是否异步
setRequestHeader(header,value); // 设置请求头部
xmlhttp.send(); // 发送请求
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL以及是否异步处理请求。<br />- method：请求的类型，GET或POST<br />-url：文件在服务器上的位置<br />-async：true（异步）或false（同步） |
| send(string) | 将请求发送到服务器<br />-string：仅用于POST请求 |
GET还是POST？
与POST相比，GET更简单也更快，并且在大部分情况下都能使用。
然而，在以下情况中，请使用POST请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST没有数据量限制）
- 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
GET请求
一个简单的GET请求：
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
在上面的例子中，你可能得到的是缓存的结果。
为了避免这种情况，请向URL添加一个唯一的ID：
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),"true");
xmlhttp.send();
如果你希望通过GET方法发送信息，请向URL添加信息：
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
POST请求
一个简单的POST请求：
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像HTML表单那样POST数据，请使用 setRequestHeader() 来添加HTTP头。然后在 send() 方法中规定你希望发送的数据：
xmlhttp.open("POST","",true);
serRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&name=Ford");
异步-true或false
AJAX指的是异步JavaScript和XML（Asynchronous JavaScript and XML）。
XMLHttpRequest对象如果要用于AJAX的话，其open()方法async参数必须设置为true。
很多在服务器执行的任务都相当费时。AJAX出现之前，这可能会引起应用程序挂起或停止。而通过AJAX，JavaScript无需等待服务器的响应，而是：在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理。
async = true
当使用async = true时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttpsend();
async = false
如需使用async = false，请将open()方法中的第三个参数改为false：
不推荐使用 async = fasle ，但是对于一些小型的请求，也是可以的。
JavaScript会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注意：使用async = false 时，请不要编写onreadystatechange 函数，把处理响应的代码放到 send() 语句后面即可：
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
AJAX实例
创建请求对象，指定状态改变时的处理函数，发送请求。
var xmlhttp;
if ( window.XMLHttpRequest )
{
xmlhttp = new window.XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState = 4 && xmlhttp.status = 200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
