概述
AJAX全稱是 Asynchronous JavaScript and XML，即異步JavaScript和xml，用于在Web頁面中實現(xiàn)異步數(shù)據(jù)交互，實現(xiàn)頁面局部刷新。
AJAX實現(xiàn)
在現(xiàn)代瀏覽器上寫AJAX主要依靠XMLHttpRequest對象
var request = new XMLHttpRequest(); // 新建XMLHttpRequest對象
request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時，函數(shù)被回調(diào)
if (request.readyState === 4) { // 成功完成
// 判斷響應(yīng)結(jié)果:
if (request.status === 200) {
// 成功，通過responseText拿到響應(yīng)的文本:
return success(request.responseText);
} else {
// 失敗，根據(jù)響應(yīng)碼判斷失敗原因:
return fail(request.status);
}
} else {
// HTTP請求還在繼續(xù)...
}
}
request.open('GET', '/xxx'); // 設(shè)置請求
request.send(); // 發(fā)送請求:
當創(chuàng)建了XMLHttpRequest對象后，要先設(shè)置onreadystatechange的回調(diào)函數(shù)。在回調(diào)函數(shù)中，通常我們只需通過readyState === 4判斷請求是否完成，如果已完成，再根據(jù)status === 200判斷是否是一個成功的響應(yīng)。
XMLHttpRequest對象的open方法有3個參數(shù)，第一個參數(shù)指定是GET還是POST，第二個參數(shù)指定URL地址，第三個參數(shù)指定是否使用異步，默認是true，所以可不寫。
最后調(diào)用send()方法才真正發(fā)送請求。GET請求不需要參數(shù)，POST請求需要把body部分以字符串或者FormData對象傳進去。
安全限制
上面代碼的URL使用的是相對路徑，如果你把它改為http://www.sina.com.cn/，再運行，肯定報錯。在Chrome的控制臺里，還可以看到錯誤信息。
這是因為瀏覽器的同源策略導(dǎo)致的。默認情況下，JavaScript在發(fā)送AJAX請求時，URL的域名必須和當前頁面完全一致。
完全一致的意思是，域名要相同（www.example.com和example.com不同），協(xié)議要相同（http和https不同），端口號要相同（默認是:80端口，它和:8080就不同）。
但是在某些時候我們會需要請求其它域名下的資源，為了突破瀏覽器同源策略的限制，就需要跨域。
跨域
JSONP
JSONP簡單來說就是利用script標簽發(fā)請求，所以這種跨域方式有限制，只能用GET請求，并且要求返回JavaScript。這種方式跨域?qū)嶋H上是利用了瀏覽器允許跨域引用JavaScript資源的特性。
<html>
<head>
<script src="http://example.com/abc.js?callback=foo"></script>
...
</head>
<body>
...
</body>
</html>
約定俗稱的我們在查詢參數(shù)中設(shè)定客戶端已經(jīng)準備好的callback函數(shù)(它可以是script標簽設(shè)定好的也可以是動態(tài)添加的)，服務(wù)端只需將數(shù)據(jù)提供給callback函數(shù)調(diào)用，并將這段JavaScript返回
foo(' 服務(wù)端在這里設(shè)置好返回的JSON數(shù)據(jù) ');
現(xiàn)在客戶端就拿到返回的數(shù)據(jù)了，這就完成了一次愉快的JSONP跨域
CORS
CORS全稱 Cross-Origin Resource Sharing，是HTML5規(guī)范定義的如何跨域訪問資源。
了解CORS前，我們先搞明白概念：
Origin表示本域，也就是瀏覽器當前頁面的域。當JavaScript向外域（如sina.com）發(fā)起請求后，瀏覽器收到響應(yīng)后，首先檢查Access-Control-Allow-Origin是否包含本域，如果是，則此次跨域請求成功，如果不是，則請求失敗，JavaScript將無法獲取到響應(yīng)的任何數(shù)據(jù)。
用一個圖來表示就是：
假設(shè)本域是my.com，外域是sina.com，只要響應(yīng)頭Access-Control-Allow-Origin為http://my.com，或者是*，本次請求就可以成功。
可見，跨域能否成功，取決于對方服務(wù)器是否愿意給你設(shè)置一個正確的Access-Control-Allow-Origin，決定權(quán)始終在對方手中。
上面這種跨域請求，稱之為“簡單請求”。簡單請求包括GET、HEAD和POST（POST的Content-Type類型 僅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出現(xiàn)任何自定義頭（例如，X-Custom: 12345），通常能滿足90%的需求。
無論你是否需要用JavaScript通過CORS跨域請求資源，你都要了解CORS的原理。最新的瀏覽器全面支持HTML5。在引用外域資源時，除了JavaScript和CSS外，都要驗證CORS。例如，當你引用了某個第三方CDN上的字體文件時：
/* CSS */
@font-face {
font-family: 'FontAwesome';
src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}
如果該CDN服務(wù)商未正確設(shè)置Access-Control-Allow-Origin，那么瀏覽器無法加載字體資源。
對于PUT、DELETE以及其他類型如application/json的POST請求，在發(fā)送AJAX請求之前，瀏覽器會先發(fā)送一個OPTIONS請求（稱為preflighted請求）到這個URL上，詢問目標服務(wù)器是否接受：
OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST
服務(wù)器必須響應(yīng)并明確指出允許的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
瀏覽器確認服務(wù)器響應(yīng)的Access-Control-Allow-Methods頭確實包含將要發(fā)送的AJAX請求的Method，才會繼續(xù)發(fā)送AJAX，否則，拋出一個錯誤。
由于以POST、PUT方式傳送JSON格式的數(shù)據(jù)在REST中很常見，所以要跨域正確處理POST和PUT請求，服務(wù)器端必須正確響應(yīng)OPTIONS請求。
