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