AJAX

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，否则，抛出一个错误。