AJAX
AJAX（Asynchronous JavaScript ans XML）异步的Javascript和XML。
AJAX最大的优点是在不重复加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
工作原理
创建XMLHttpRequest对象
所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
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请求：
使用setRequestHeader()来添加HTTP头。然后在send()方法中添加发送的数据。
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
open()函数的第三个参数传true时，为异步请求，否则为同步请求。一般传true。
服务器响应
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据 |
| responseXML | 获得XML形式的响应数据 |
responseText属性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML
如果来自服务器的响应时XML，而且需要作为XML对象进行解析，请使用responseXML属性：
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
onreadystatechange事件
每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 每当readyState属性变化时，就会调用此函数 |
| readyState | 存有XMLHttpRequest的状态。 - 0：请求未初始化 - 1:服务器连接已建立 - 2:请求已接受 - 3: 请求处理中 - 4:请求已完成，且响应已就绪 |
| status | 200:"OK" 404:未找到页面 |
在onreadystatechange事件中，我们规定当服务器响应成功返回所执行的任务。
当readyState等于4且状态为200时，表示响应已就绪。
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
异源请求
默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。即域名、协议、端口号要相同。
请求外域，可以通过下面方法：
-
是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。
-
通过同源服务器转发，由后台服务器对外部URL请求，后台再将请求的结果返回前端。
-
JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源。JSONP通常以函数调用的形式返回，这样一来，我们如果在页面中先准备好
foo()函数，相当于动态读取外域的JavaScript资源，最后就等着接收回调了。
CORS
HTML5使用了新的跨源策略：CORS（Cross-Origin Resource Sharing）。
Origin表示本域，也就是浏览器当前页面的域。当JavaScript向外域（如sina.com）发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。
可见，跨域能否成功，取决于对方服务器是否愿意给你设置一个正确的Access-Control-Allow-Origin，决定权始终在对方手中。
上面这种跨域请求，称之为“简单请求”。简单请求包括GET、HEAD和POST（POST的Content-Type类型 仅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出现任何自定义头（例如，X-Custom: 12345），通常能满足90%的需求。
对于PUT、DELETE以及其他类型如application/json的POST请求，在发送AJAX请求之前，浏览器会先发送一个OPTIONS请求（称为preflighted请求）到这个URL上，询问目标服务器是否接受：
OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST
服务器必须响应并明确指出允许的Method：
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400
浏览器确认服务器响应的Access-Control-Allow-Methods头确实包含将要发送的AJAX请求的Method，才会继续发送AJAX，否则，抛出一个错误。