AJAX = 異步 JavaScript 及 XML（Asynchronous JavaScript and XML）
AJAX 不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的 Web 應(yīng)用程序的技術(shù)。
通過(guò) AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。通過(guò)這個(gè)對(duì)象，您的 JavaScript 可在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)。
AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求），這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息，而不是整個(gè)頁(yè)面。
AJAX 可使因特網(wǎng)應(yīng)用程序更小、更快，更友好。
AJAX 是一種獨(dú)立于 Web 服務(wù)器軟件的瀏覽器技術(shù)。
AJAX 基于 Web 標(biāo)準(zhǔn)
AJAX 基于下列 Web 標(biāo)準(zhǔn)：
JavaScript
XML
HTML
CSS
在 AJAX 中使用的 Web 標(biāo)準(zhǔn)已被良好定義，并被所有的主流瀏覽器支持。AJAX 應(yīng)用程序獨(dú)立于瀏覽器和平臺(tái)。
AJAX 事關(guān)更優(yōu)秀的應(yīng)用程序
Web 應(yīng)用程序較桌面應(yīng)用程序有諸多優(yōu)勢(shì)；它們能夠涉及廣大的用戶(hù)，它們更易安裝及維護(hù)，也更易開(kāi)發(fā)。
不過(guò)，因特網(wǎng)應(yīng)用程序并不像傳統(tǒng)的桌面應(yīng)用程序那樣完善且友好。
通過(guò) AJAX，因特網(wǎng)應(yīng)用程序可以變得更完善，更友好。
今天您就可以使用 AJAX
沒(méi)有什么新東西可學(xué)。
AJAX 基于已有的標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)已被大多數(shù)開(kāi)發(fā)者使用多年。
AJAX 使用 Http 請(qǐng)求
在傳統(tǒng)的 JavaScript 編程中，假如您希望從服務(wù)器上的文件或數(shù)據(jù)庫(kù)中得到任何的信息，或者向服務(wù)器發(fā)送信息的話，就必須利用一個(gè) HTML 表單向服務(wù)器 GET 或 POST 數(shù)據(jù)。而用戶(hù)則需要單擊“提交”按鈕來(lái)發(fā)送/獲取信息，等待服務(wù)器的響應(yīng)，然后一張新的頁(yè)面會(huì)加載結(jié)果。
由于每當(dāng)用戶(hù)提交輸入后服務(wù)器都會(huì)返回一張新的頁(yè)面，傳統(tǒng)的 web 應(yīng)用程序變得運(yùn)行緩慢，且越來(lái)越不友好。
通過(guò)利用 AJAX，您的 JavaScript 會(huì)通過(guò) JavaScript 的 XMLHttpRequest 對(duì)象，直接與服務(wù)器來(lái)通信。
通過(guò)使用 HTTP 請(qǐng)求，web 頁(yè)可向服務(wù)器進(jìn)行請(qǐng)求，并得到來(lái)自服務(wù)器的響應(yīng)，而不加載頁(yè)面。用戶(hù)可以停留在同一個(gè)頁(yè)面，他或她不會(huì)注意到腳本在后臺(tái)請(qǐng)求過(guò)頁(yè)面，或向服務(wù)器發(fā)送過(guò)數(shù)據(jù)。
XMLHttpRequest 對(duì)象
通過(guò)使用 XMLHttpRequest 對(duì)象，web 開(kāi)發(fā)者可以做到在頁(yè)面已加載后從服務(wù)器更新頁(yè)面！
在 2005 年 AJAX 被 Google 推廣開(kāi)來(lái)（Google Suggest）。
Google 建議使用 XMLHttpRequest 對(duì)象來(lái)創(chuàng)建一種動(dòng)態(tài)性極強(qiáng)的 web 界面：當(dāng)您開(kāi)始在 Google 的搜索框中輸入查詢(xún)時(shí)，JavaScript 會(huì)向某個(gè)服務(wù)器發(fā)出這些字詞，然后服務(wù)器會(huì)返回一系列的搜索建議。
XMLHttpRequest 對(duì)象得到下列瀏覽器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。
您的第一個(gè) AJAX 應(yīng)用程序
為了讓您理解 AJAX 的工作原理，我們將創(chuàng)建一個(gè)小型的 AJAX 應(yīng)用程序。
首先，我們需要一個(gè)帶有兩個(gè)文本框的 HTML 表單：用戶(hù)名和時(shí)間。用戶(hù)名文本框由用戶(hù)填寫(xiě)，而時(shí)間文本框使用 AJAX 進(jìn)行填寫(xiě)。
此 HTML 文件名為 "testAjax.htm"（請(qǐng)注意這個(gè) HTML 表單沒(méi)有提交按鈕！）：
AJAX - 瀏覽器支持
AJAX 的要點(diǎn)是 XMLHttpRequest 對(duì)象。
不同的瀏覽器創(chuàng)建 XMLHttpRequest 對(duì)象的方法是有差異的。
IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內(nèi)建對(duì)象。
如需針對(duì)不同的瀏覽器來(lái)創(chuàng)建此對(duì)象，我們要使用一條 “try and catch” 語(yǔ)句。
讓我們用這段創(chuàng)建 XMLHttpRequest 對(duì)象的 JavaScript 來(lái)更新一下我們的 "testAjax.htm" 文件：
<html>
<body>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
? try {
?? // Firefox, Opera 8.0+, Safari
??? xmlHttp=new XMLHttpRequest();
} catch (e) {
? // Internet Explorer
?? try {
????? xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e){
try{
???????? xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
???????? }catch (e) {
???????? alert("您的瀏覽器不支持AJAX！");
???????? return false;
???????? }
????? }
??? }
}
</script>
<form name="myForm">
用戶(hù): <input type="text" name="username" />
時(shí)間: <input type="text" name="time" />
</form></body>
</html>
例子解釋?zhuān)?
首先聲明一個(gè)保存 XMLHttpRequest 對(duì)象的 xmlHttp 變量。
然后使用 XMLHttp=new XMLHttpRequest() 來(lái)創(chuàng)建此對(duì)象。這條語(yǔ)句針對(duì) Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對(duì) Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，則嘗試針對(duì) Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
假如這三種方法都不起作用，那么這個(gè)用戶(hù)所使用的瀏覽器已經(jīng)太過(guò)時(shí)了，他或她會(huì)看到一個(gè)聲明此瀏覽器不支持 AJAX 的提示。
注釋?zhuān)荷厦孢@些瀏覽器定制的代碼很長(zhǎng)，也很復(fù)雜。不過(guò)，每當(dāng)您希望創(chuàng)建 XMLHttpRequest 對(duì)象時(shí)，這些代碼就能派上用場(chǎng)，因此您可以在任何需要使用的時(shí)間拷貝粘貼這些代碼。上面這些代碼兼容所有的主流瀏覽器：Internet Explorer、Opera、Firefox 以及 Safari。
下一節(jié)為您展示如何使用 XMLHttpRequest 對(duì)象與服務(wù)器進(jìn)行通信。
AJAX - 更多有關(guān) XMLHttpRequest 對(duì)象的知識(shí)
在向服務(wù)器發(fā)送數(shù)據(jù)之前，我們有必要解釋一下 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性。
onreadystatechange 屬性
onreadystatechange 屬性存有處理服務(wù)器響應(yīng)的函數(shù)。下面的代碼定義一個(gè)空的函數(shù)，可同時(shí)對(duì) onreadystatechange 屬性進(jìn)行設(shè)置：
xmlHttp.onreadystatechange=function() {
// 我們需要在這里寫(xiě)一些代碼
}
readyState 屬性
readyState 屬性存有服務(wù)器響應(yīng)的狀態(tài)信息。每當(dāng) readyState 改變時(shí)，onreadystatechange 函數(shù)就會(huì)被執(zhí)行。
這是 readyState 屬性可能的值：
我們要向這個(gè) onreadystatechange 函數(shù)添加一條 If 語(yǔ)句，來(lái)測(cè)試我們的響應(yīng)是否已完成（意味著可獲得數(shù)據(jù)）：
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
// 從服務(wù)器的response獲得數(shù)據(jù)
}
}
responseText 屬性
可以通過(guò) responseText 屬性來(lái)取回由服務(wù)器返回的數(shù)據(jù)。
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
var text=xmlHttp.responseText;
}
}
AJAX - 向服務(wù)器發(fā)送一個(gè)請(qǐng)求
要想把請(qǐng)求發(fā)送到服務(wù)器，我們就需要使用 open() 方法和 send() 方法。
open() 方法需要三個(gè)參數(shù)。第一個(gè)參數(shù)定義發(fā)送請(qǐng)求所使用的方法（GET 還是 POST）。第二個(gè)參數(shù)規(guī)定服務(wù)器端腳本的 URL。第三個(gè)參數(shù)規(guī)定應(yīng)當(dāng)對(duì)請(qǐng)求進(jìn)行異步地處理。
send() 方法可將請(qǐng)求送往服務(wù)器。
xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);
AJAX 不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的 Web 應(yīng)用程序的技術(shù)。
通過(guò) AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。通過(guò)這個(gè)對(duì)象，您的 JavaScript 可在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)。
AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求），這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息，而不是整個(gè)頁(yè)面。
AJAX 可使因特網(wǎng)應(yīng)用程序更小、更快，更友好。
AJAX 是一種獨(dú)立于 Web 服務(wù)器軟件的瀏覽器技術(shù)。
AJAX 基于 Web 標(biāo)準(zhǔn)
AJAX 基于下列 Web 標(biāo)準(zhǔn)：
JavaScript
XML
HTML
CSS
在 AJAX 中使用的 Web 標(biāo)準(zhǔn)已被良好定義，并被所有的主流瀏覽器支持。AJAX 應(yīng)用程序獨(dú)立于瀏覽器和平臺(tái)。
AJAX 事關(guān)更優(yōu)秀的應(yīng)用程序
Web 應(yīng)用程序較桌面應(yīng)用程序有諸多優(yōu)勢(shì)；它們能夠涉及廣大的用戶(hù)，它們更易安裝及維護(hù)，也更易開(kāi)發(fā)。
不過(guò)，因特網(wǎng)應(yīng)用程序并不像傳統(tǒng)的桌面應(yīng)用程序那樣完善且友好。
通過(guò) AJAX，因特網(wǎng)應(yīng)用程序可以變得更完善，更友好。
今天您就可以使用 AJAX
沒(méi)有什么新東西可學(xué)。
AJAX 基于已有的標(biāo)準(zhǔn)。這些標(biāo)準(zhǔn)已被大多數(shù)開(kāi)發(fā)者使用多年。
AJAX 使用 Http 請(qǐng)求
在傳統(tǒng)的 JavaScript 編程中，假如您希望從服務(wù)器上的文件或數(shù)據(jù)庫(kù)中得到任何的信息，或者向服務(wù)器發(fā)送信息的話，就必須利用一個(gè) HTML 表單向服務(wù)器 GET 或 POST 數(shù)據(jù)。而用戶(hù)則需要單擊“提交”按鈕來(lái)發(fā)送/獲取信息，等待服務(wù)器的響應(yīng)，然后一張新的頁(yè)面會(huì)加載結(jié)果。
由于每當(dāng)用戶(hù)提交輸入后服務(wù)器都會(huì)返回一張新的頁(yè)面，傳統(tǒng)的 web 應(yīng)用程序變得運(yùn)行緩慢，且越來(lái)越不友好。
通過(guò)利用 AJAX，您的 JavaScript 會(huì)通過(guò) JavaScript 的 XMLHttpRequest 對(duì)象，直接與服務(wù)器來(lái)通信。
通過(guò)使用 HTTP 請(qǐng)求，web 頁(yè)可向服務(wù)器進(jìn)行請(qǐng)求，并得到來(lái)自服務(wù)器的響應(yīng)，而不加載頁(yè)面。用戶(hù)可以停留在同一個(gè)頁(yè)面，他或她不會(huì)注意到腳本在后臺(tái)請(qǐng)求過(guò)頁(yè)面，或向服務(wù)器發(fā)送過(guò)數(shù)據(jù)。
XMLHttpRequest 對(duì)象
通過(guò)使用 XMLHttpRequest 對(duì)象，web 開(kāi)發(fā)者可以做到在頁(yè)面已加載后從服務(wù)器更新頁(yè)面！
在 2005 年 AJAX 被 Google 推廣開(kāi)來(lái)（Google Suggest）。
Google 建議使用 XMLHttpRequest 對(duì)象來(lái)創(chuàng)建一種動(dòng)態(tài)性極強(qiáng)的 web 界面：當(dāng)您開(kāi)始在 Google 的搜索框中輸入查詢(xún)時(shí)，JavaScript 會(huì)向某個(gè)服務(wù)器發(fā)出這些字詞，然后服務(wù)器會(huì)返回一系列的搜索建議。
XMLHttpRequest 對(duì)象得到下列瀏覽器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。
您的第一個(gè) AJAX 應(yīng)用程序
為了讓您理解 AJAX 的工作原理，我們將創(chuàng)建一個(gè)小型的 AJAX 應(yīng)用程序。
首先，我們需要一個(gè)帶有兩個(gè)文本框的 HTML 表單：用戶(hù)名和時(shí)間。用戶(hù)名文本框由用戶(hù)填寫(xiě)，而時(shí)間文本框使用 AJAX 進(jìn)行填寫(xiě)。
此 HTML 文件名為 "testAjax.htm"（請(qǐng)注意這個(gè) HTML 表單沒(méi)有提交按鈕！）：
AJAX - 瀏覽器支持
AJAX 的要點(diǎn)是 XMLHttpRequest 對(duì)象。
不同的瀏覽器創(chuàng)建 XMLHttpRequest 對(duì)象的方法是有差異的。
IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內(nèi)建對(duì)象。
如需針對(duì)不同的瀏覽器來(lái)創(chuàng)建此對(duì)象，我們要使用一條 “try and catch” 語(yǔ)句。
讓我們用這段創(chuàng)建 XMLHttpRequest 對(duì)象的 JavaScript 來(lái)更新一下我們的 "testAjax.htm" 文件：
<html>
<body>
<script type="text/javascript">
function ajaxFunction() {
var xmlHttp;
? try {
?? // Firefox, Opera 8.0+, Safari
??? xmlHttp=new XMLHttpRequest();
} catch (e) {
? // Internet Explorer
?? try {
????? xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e){
try{
???????? xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
???????? }catch (e) {
???????? alert("您的瀏覽器不支持AJAX！");
???????? return false;
???????? }
????? }
??? }
}
</script>
<form name="myForm">
用戶(hù): <input type="text" name="username" />
時(shí)間: <input type="text" name="time" />
</form></body>
</html>
例子解釋?zhuān)?
首先聲明一個(gè)保存 XMLHttpRequest 對(duì)象的 xmlHttp 變量。
然后使用 XMLHttp=new XMLHttpRequest() 來(lái)創(chuàng)建此對(duì)象。這條語(yǔ)句針對(duì) Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對(duì) Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，則嘗試針對(duì) Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
假如這三種方法都不起作用，那么這個(gè)用戶(hù)所使用的瀏覽器已經(jīng)太過(guò)時(shí)了，他或她會(huì)看到一個(gè)聲明此瀏覽器不支持 AJAX 的提示。
注釋?zhuān)荷厦孢@些瀏覽器定制的代碼很長(zhǎng)，也很復(fù)雜。不過(guò)，每當(dāng)您希望創(chuàng)建 XMLHttpRequest 對(duì)象時(shí)，這些代碼就能派上用場(chǎng)，因此您可以在任何需要使用的時(shí)間拷貝粘貼這些代碼。上面這些代碼兼容所有的主流瀏覽器：Internet Explorer、Opera、Firefox 以及 Safari。
下一節(jié)為您展示如何使用 XMLHttpRequest 對(duì)象與服務(wù)器進(jìn)行通信。
AJAX - 更多有關(guān) XMLHttpRequest 對(duì)象的知識(shí)
在向服務(wù)器發(fā)送數(shù)據(jù)之前，我們有必要解釋一下 XMLHttpRequest 對(duì)象的三個(gè)重要的屬性。
onreadystatechange 屬性
onreadystatechange 屬性存有處理服務(wù)器響應(yīng)的函數(shù)。下面的代碼定義一個(gè)空的函數(shù)，可同時(shí)對(duì) onreadystatechange 屬性進(jìn)行設(shè)置：
xmlHttp.onreadystatechange=function() {
// 我們需要在這里寫(xiě)一些代碼
}
readyState 屬性
readyState 屬性存有服務(wù)器響應(yīng)的狀態(tài)信息。每當(dāng) readyState 改變時(shí)，onreadystatechange 函數(shù)就會(huì)被執(zhí)行。
這是 readyState 屬性可能的值：
我們要向這個(gè) onreadystatechange 函數(shù)添加一條 If 語(yǔ)句，來(lái)測(cè)試我們的響應(yīng)是否已完成（意味著可獲得數(shù)據(jù)）：
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
// 從服務(wù)器的response獲得數(shù)據(jù)
}
}
responseText 屬性
可以通過(guò) responseText 屬性來(lái)取回由服務(wù)器返回的數(shù)據(jù)。
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
var text=xmlHttp.responseText;
}
}
AJAX - 向服務(wù)器發(fā)送一個(gè)請(qǐng)求
要想把請(qǐng)求發(fā)送到服務(wù)器，我們就需要使用 open() 方法和 send() 方法。
open() 方法需要三個(gè)參數(shù)。第一個(gè)參數(shù)定義發(fā)送請(qǐng)求所使用的方法（GET 還是 POST）。第二個(gè)參數(shù)規(guī)定服務(wù)器端腳本的 URL。第三個(gè)參數(shù)規(guī)定應(yīng)當(dāng)對(duì)請(qǐng)求進(jìn)行異步地處理。
send() 方法可將請(qǐng)求送往服務(wù)器。
xmlHttp.open("GET","time.asp",true); xmlHttp.send(null);
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
