AJAX不是JavaScript的規(guī)范，它只是一個(gè)哥們“發(fā)明”的縮寫：Asynchronous JavaScript and XML，意思就是用JavaScript執(zhí)行異步網(wǎng)絡(luò)請(qǐng)求。

如果仔細(xì)觀察一個(gè)Form的提交，你就會(huì)發(fā)現(xiàn)，一旦用戶點(diǎn)擊“Submit”按鈕，表單開始提交，瀏覽器就會(huì)刷新頁(yè)面，然后在新頁(yè)面里告訴你操作是成功了還是失敗了。如果不幸由于網(wǎng)絡(luò)太慢或者其他原因，就會(huì)得到一個(gè)404頁(yè)面。

這就是Web的運(yùn)作原理：一次HTTP請(qǐng)求對(duì)應(yīng)一個(gè)頁(yè)面。

如果要讓用戶留在當(dāng)前頁(yè)面中，同時(shí)發(fā)出新的HTTP請(qǐng)求，就必須用JavaScript發(fā)送這個(gè)新請(qǐng)求，接收到數(shù)據(jù)后，再用JavaScript更新頁(yè)面，這樣一來(lái)，用戶就感覺(jué)自己仍然停留在當(dāng)前頁(yè)面，但是數(shù)據(jù)卻可以不斷地更新。

最早大規(guī)模使用AJAX的就是Gmail，Gmail的頁(yè)面在首次加載后，剩下的所有數(shù)據(jù)都依賴于AJAX來(lái)更新。

用JavaScript寫一個(gè)完整的AJAX代碼并不復(fù)雜，但是需要注意：AJAX請(qǐng)求是異步執(zhí)行的，也就是說(shuō)，要通過(guò)回調(diào)函數(shù)獲得響應(yīng)。
在現(xiàn)代瀏覽器上寫AJAX主要依靠XMLHttpRequest對(duì)象：

function success(text) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = text;
}

function fail(code) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest對(duì)象

request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時(shí)，函數(shù)被回調(diào)
 if (request.readyState === 4) { // 成功完成
  // 判斷響應(yīng)結(jié)果:
  if (request.status === 200) {
   // 成功，通過(guò)responseText拿到響應(yīng)的文本:
   return success(request.responseText);
  } else {
   // 失敗，根據(jù)響應(yīng)碼判斷失敗原因:
   return fail(request.status);
  }
 } else {
  // HTTP請(qǐng)求還在繼續(xù)...
 }
}

// 發(fā)送請(qǐng)求:
request.open('GET', '/api/categories');
request.send();
alert('請(qǐng)求已發(fā)送，請(qǐng)等待響應(yīng)...');

對(duì)于低版本的IE，需要換一個(gè)ActiveXObject對(duì)象：

function success(text) {
 var textarea = document.getElementById('test-ie-response-text');
 textarea.value = text;
}

function fail(code) {
 var textarea = document.getElementById('test-ie-response-text');
 textarea.value = 'Error code: ' + code;
}

var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP對(duì)象

request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時(shí)，函數(shù)被回調(diào)
 if (request.readyState === 4) { // 成功完成
  // 判斷響應(yīng)結(jié)果:
  if (request.status === 200) {
   // 成功，通過(guò)responseText拿到響應(yīng)的文本:
   return success(request.responseText);
  } else {
   // 失敗，根據(jù)響應(yīng)碼判斷失敗原因:
   return fail(request.status);
  }
 } else {
  // HTTP請(qǐng)求還在繼續(xù)...
 }
}

// 發(fā)送請(qǐng)求:
request.open('GET', '/api/categories');
request.send();
alert('請(qǐng)求已發(fā)送，請(qǐng)等待響應(yīng)...');

如果你想把標(biāo)準(zhǔn)寫法和IE寫法混在一起，可以這么寫：

var request;
if (window.XMLHttpRequest) {
 request = new XMLHttpRequest();
} else {
 request = new ActiveXObject('Microsoft.XMLHTTP');
}

通過(guò)檢測(cè)window對(duì)象是否有XMLHttpRequest屬性來(lái)確定瀏覽器是否支持標(biāo)準(zhǔn)的XMLHttpRequest。注意，不要根據(jù)瀏覽器的navigator.userAgent來(lái)檢測(cè)瀏覽器是否支持某個(gè)JavaScript特性，一是因?yàn)檫@個(gè)字符串本身可以偽造，二是通過(guò)IE版本判斷JavaScript特性將非常復(fù)雜。

當(dāng)創(chuàng)建了XMLHttpRequest對(duì)象后，要先設(shè)置onreadystatechange的回調(diào)函數(shù)。在回調(diào)函數(shù)中，通常我們只需通過(guò)readyState === 4判斷請(qǐng)求是否完成，如果已完成，再根據(jù)status === 200判斷是否是一個(gè)成功的響應(yīng)。
XMLHttpRequest對(duì)象的open()方法有3個(gè)參數(shù)，第一個(gè)參數(shù)指定是GET還是POST，第二個(gè)參數(shù)指定URL地址，第三個(gè)參數(shù)指定是否使用異步，默認(rèn)是true，所以不用寫。

注意，千萬(wàn)不要把第三個(gè)參數(shù)指定為false，否則瀏覽器將停止響應(yīng)，直到AJAX請(qǐng)求完成。如果這個(gè)請(qǐng)求耗時(shí)10秒，那么10秒內(nèi)你會(huì)發(fā)現(xiàn)瀏覽器處于“假死”狀態(tài)。

最后調(diào)用send()方法才真正發(fā)送請(qǐng)求。GET請(qǐng)求不需要參數(shù)，POST請(qǐng)求需要把body部分以字符串或者FormData對(duì)象傳進(jìn)去。

安全限制

上面代碼的URL使用的是相對(duì)路徑。如果你把它改為'http://www.sina.com.cn/'，再運(yùn)行，肯定報(bào)錯(cuò)。在Chrome的控制臺(tái)里，還可以看到錯(cuò)誤信息。

這是因?yàn)闉g覽器的同源策略導(dǎo)致的。默認(rèn)情況下，JavaScript在發(fā)送AJAX請(qǐng)求時(shí)，URL的域名必須和當(dāng)前頁(yè)面完全一致。

完全一致的意思是，域名要相同（www.example.com和example.com不同），協(xié)議要相同（http和https不同），端口號(hào)要相同（默認(rèn)是:80端口，它和:8080就不同）。有的瀏覽器口子松一點(diǎn)，允許端口不同，大多數(shù)瀏覽器都會(huì)嚴(yán)格遵守這個(gè)限制。

那是不是用JavaScript無(wú)法請(qǐng)求外域（就是其他網(wǎng)站）的URL了呢？方法還是有的，大概有這么幾種：

一是通過(guò)Flash插件發(fā)送HTTP請(qǐng)求，這種方式可以繞過(guò)瀏覽器的安全限制，但必須安裝Flash，并且跟Flash交互。不過(guò)Flash用起來(lái)麻煩，而且現(xiàn)在用得也越來(lái)越少了。

二是通過(guò)在同源域名下架設(shè)一個(gè)代理服務(wù)器來(lái)轉(zhuǎn)發(fā)，JavaScript負(fù)責(zé)把請(qǐng)求發(fā)送到代理服務(wù)器：
'/proxy?url=http://www.sina.com.cn'
代理服務(wù)器再把結(jié)果返回，這樣就遵守了瀏覽器的同源策略。這種方式麻煩之處在于需要服務(wù)器端額外做開發(fā)。

第三種方式稱為JSONP，它有個(gè)限制，只能用GET請(qǐng)求，并且要求返回JavaScript。這種方式跨域?qū)嶋H上是利用了瀏覽器允許跨域引用JavaScript資源：

<html>
<head>
 <script src="http://example.com/abc.js"></script>
 ...
</head>
<body>
...
</body>
</html>

JSONP通常以函數(shù)調(diào)用的形式返回，例如，返回JavaScript內(nèi)容如下：
foo('data');
這樣一來(lái)，我們?nèi)绻陧?yè)面中先準(zhǔn)備好foo()函數(shù)，然后給頁(yè)面動(dòng)態(tài)加一個(gè)<script>節(jié)點(diǎn)，相當(dāng)于動(dòng)態(tài)讀取外域的JavaScript資源，最后就等著接收回調(diào)了。

以163的股票查詢URL為例，對(duì)于URL：http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice，你將得到如下返回：
refreshPrice({"0000001":{"code": "0000001", ... });

因此我們需要首先在頁(yè)面中準(zhǔn)備好回調(diào)函數(shù)：

function refreshPrice(data) {
 var p = document.getElementById('test-jsonp');
 p.innerHTML = '當(dāng)前價(jià)格：' +
  data['0000001'].name +': ' + 
  data['0000001'].price + '；' +
  data['1399001'].name + ': ' +
  data['1399001'].price;
}

最后用getPrice()函數(shù)觸發(fā)：

function getPrice() {
 var
  js = document.createElement('script'),
  head = document.getElementsByTagName('head')[0];
 js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
 head.appendChild(js);
}

就完成了跨域加載數(shù)據(jù)。

CORS

如果瀏覽器支持HTML5，那么就可以一勞永逸地使用新的跨域策略：CORS了。

CORS全稱Cross-Origin Resource Sharing，是HTML5規(guī)范定義的如何跨域訪問(wèn)資源。

了解CORS前，我們先搞明白概念：

Origin表示本域，也就是瀏覽器當(dāng)前頁(yè)面的域。當(dāng)JavaScript向外域（如sina.com）發(fā)起請(qǐng)求后，瀏覽器收到響應(yīng)后，首先檢查Access-Control-Allow-Origin是否包含本域，如果是，則此次跨域請(qǐng)求成功，如果不是，則請(qǐng)求失敗，JavaScript將無(wú)法獲取到響應(yīng)的任何數(shù)據(jù)。

用一個(gè)圖來(lái)表示就是：

假設(shè)本域是my.com，外域是sina.com，只要響應(yīng)頭Access-Control-Allow-Origin為http://my.com，或者是*，本次請(qǐng)求就可以成功。

可見(jiàn)，跨域能否成功，取決于對(duì)方服務(wù)器是否愿意給你設(shè)置一個(gè)正確的Access-Control-Allow-Origin，決定權(quán)始終在對(duì)方手中。

上面這種跨域請(qǐng)求，稱之為“簡(jiǎn)單請(qǐng)求”。簡(jiǎn)單請(qǐng)求包括GET、HEAD和POST（POST的Content-Type類型 僅限application/x-www-form-urlencoded、multipart/form-data和text/plain），并且不能出現(xiàn)任何自定義頭（例如，X-Custom: 12345），通常能滿足90%的需求。

無(wú)論你是否需要用JavaScript通過(guò)CORS跨域請(qǐng)求資源，你都要了解CORS的原理。最新的瀏覽器全面支持HTML5。在引用外域資源時(shí)，除了JavaScript和CSS外，都要驗(yàn)證CORS。例如，當(dāng)你引用了某個(gè)第三方CDN上的字體文件時(shí)：

/* CSS */
@font-face {
 font-family: 'FontAwesome';
 src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}

如果該CDN服務(wù)商未正確設(shè)置Access-Control-Allow-Origin，那么瀏覽器無(wú)法加載字體資源。
對(duì)于PUT、DELETE以及其他類型如application/json的POST請(qǐng)求，在發(fā)送AJAX請(qǐng)求之前，瀏覽器會(huì)先發(fā)送一個(gè)OPTIONS請(qǐng)求（稱為preflighted請(qǐng)求）到這個(gè)URL上，詢問(wèn)目標(biāo)服務(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

瀏覽器確認(rèn)服務(wù)器響應(yīng)的Access-Control-Allow-Methods頭確實(shí)包含將要發(fā)送的AJAX請(qǐng)求的Method，才會(huì)繼續(xù)發(fā)送AJAX，否則，拋出一個(gè)錯(cuò)誤。

由于以POST、PUT方式傳送JSON格式的數(shù)據(jù)在REST中很常見(jiàn)，所以要跨域正確處理POST和PUT請(qǐng)求，服務(wù)器端必須正確響應(yīng)OPTIONS請(qǐng)求。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。