AJAX全稱(chēng)為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。
Ajax（Asynchronous JavaScript + XML）的定義
基于web標(biāo)準(zhǔn)（standards-based presentation）XHTML+CSS的表示；
使用 DOM（Document Object Model）進(jìn)行動(dòng)態(tài)顯示及交互；
使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作；
使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢(xún)、檢索；
使用 JavaScript 將所有的東西綁定在一起。
英文參見(jiàn)Ajax的提出者Jesse James Garrett的原文。
類(lèi)似于DHTML或LAMP，AJAX不是指一種單一的技術(shù)，而是有機(jī)地利用了一系列相關(guān)的技術(shù)。事實(shí)上，一些基于AJAX的“派生/合成”式（derivative/composite）的技術(shù)正在出現(xiàn)，如“AFLAX”。
AJAX的應(yīng)用使用支持以上技術(shù)的web瀏覽器作為運(yùn)行平臺(tái)。這些瀏覽器目前包括：
Mozilla、
Firefox、
Internet Explorer、
Opera、
Konqueror及
Safari。但是Opera不支持XSL格式對(duì)象，也不支持XSLT。
傳統(tǒng)的web應(yīng)用允許用戶(hù)填寫(xiě)表單(form)，當(dāng)提交表單時(shí)就向
web服務(wù)器發(fā)送一個(gè)請(qǐng)求。服務(wù)器接收并處理傳來(lái)的表單，然後返回一個(gè)新的
網(wǎng)頁(yè)。這個(gè)做法浪費(fèi)了許多帶寬，因?yàn)樵谇搬醿蓚€(gè)頁(yè)面中的大部分HTML代碼往往是相同的。由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請(qǐng)求，應(yīng)用的響應(yīng)時(shí)間就依賴(lài)于服務(wù)器的
響應(yīng)時(shí)間。這導(dǎo)致了用戶(hù)界面的響應(yīng)比本地應(yīng)用慢得多。
與此不同，AJAX應(yīng)用可以?xún)H向服務(wù)器發(fā)送并取回必需的數(shù)據(jù)，它使用SOAP或其它一些基于XML的web service接口，并在客戶(hù)端采用JavaScript處理來(lái)自服務(wù)器的響應(yīng)。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少，結(jié)果我們就能看到響應(yīng)更快的應(yīng)用。同時(shí)很多的處理工作可以在發(fā)出請(qǐng)求的客戶(hù)端機(jī)器上完成，所以Web服務(wù)器的處理時(shí)間也減少了。
Ajax應(yīng)用程序的優(yōu)勢(shì)在于：
1. 通過(guò)異步模式，提升了用戶(hù)體驗(yàn)
2. 優(yōu)化了
瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用
3. Ajax引擎在客戶(hù)端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，從而減少了大用戶(hù)量下的服務(wù)器負(fù)載。
Ajax的核心是JavaScript對(duì)象XmlHttpRequest。該對(duì)象在Internet Explorer 5中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶(hù)。
在創(chuàng)建Web站點(diǎn)時(shí)，在客戶(hù)端執(zhí)行屏幕更新為用戶(hù)提供了很大的靈活性。下面是使用Ajax可以完成的功能：
動(dòng)態(tài)更新購(gòu)物車(chē)的物品總數(shù)，無(wú)需用戶(hù)單擊Update并等待服務(wù)器重新發(fā)送整個(gè)頁(yè)面。
提升站點(diǎn)的性能，這是通過(guò)減少?gòu)姆?wù)器下載的數(shù)據(jù)量而實(shí)現(xiàn)的。例如，在某購(gòu)物車(chē)頁(yè)面，當(dāng)更新籃子中的一項(xiàng)物品的數(shù)量時(shí)，會(huì)重新載入整個(gè)頁(yè)面，這必須下載整個(gè)頁(yè)面的數(shù)據(jù)。如果使用Ajax計(jì)算新的總量，服務(wù)器只會(huì)返回新的總量值，因此所需的帶寬僅為原來(lái)的百分之一。 消除了每次用戶(hù)輸入時(shí)的頁(yè)面刷新。例如，在Ajax中，如果用戶(hù)在分頁(yè)列表上單擊Next，則服務(wù)器數(shù)據(jù)只刷新列表而不是整個(gè)頁(yè)面。
直接編輯表格數(shù)據(jù)，而不是要求用戶(hù)導(dǎo)航到新的頁(yè)面來(lái)編輯數(shù)據(jù)。對(duì)于Ajax，當(dāng)用戶(hù)單擊Edit時(shí)，可以將靜態(tài)表格刷新為內(nèi)容可編輯的表格。用戶(hù)單擊Done之后，就可以發(fā)出一個(gè)Ajax請(qǐng)求來(lái)更新服務(wù)器，并刷新表格，使其包含靜態(tài)、只讀的數(shù)據(jù)。
一切皆有可能！但愿它能夠激發(fā)您開(kāi)始開(kāi)發(fā)自己的基于Ajax的站點(diǎn)。然而，在開(kāi)始之前，讓我們介紹一個(gè)現(xiàn)有的Web站點(diǎn)，它遵循傳統(tǒng)的提交/等待/重新顯示的范例，我們還將討論Ajax如何提升用戶(hù)體驗(yàn)。
Ajax的工作原理相當(dāng)于在用戶(hù)和服務(wù)器之間加了—個(gè)中間層，使用戶(hù)操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶(hù)端，利于客戶(hù)端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達(dá)到節(jié)約ISP的空間及帶寬租用成本的目的。
我們以?xún)蓚€(gè)驗(yàn)證通行證帳號(hào)是否存在的例子來(lái)講述AJAX在實(shí)際中的應(yīng)用：
(1)用文本字符串的方式返回服務(wù)器的響應(yīng)來(lái)驗(yàn)證網(wǎng)易通行證帳號(hào)是否存在；
(2)以XMLDocument對(duì)象方式返回響應(yīng)來(lái)驗(yàn)證金山通行證帳號(hào)是否存在；
首先，我們需要用JavaScript來(lái)創(chuàng)建
XMLHttpRequest 類(lèi)向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求， XMLHttpRequest 類(lèi)首先由Internet Explorer以ActiveX對(duì)象引入，被稱(chēng)為XMLHTTP。 后來(lái)Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類(lèi)，不過(guò)它們創(chuàng)建XMLHttpRequest類(lèi)的方法不同。
對(duì)于Internet Explorer瀏覽器，創(chuàng)建XMLHttpRequest 方法如下：
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
由于在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致，為了更好的兼容不同版本的Internet Explorer瀏覽器，因此我們需要根據(jù)不同版本的Internet Explorer瀏覽器來(lái)創(chuàng)建XMLHttpRequest類(lèi)，上面代碼就是根據(jù)不同的Internet Explorer瀏覽器創(chuàng)建XMLHttpRequest類(lèi)的方法。
對(duì)于Mozilla﹑Netscape﹑Safari等瀏覽器，創(chuàng)建XMLHttpRequest 方法如下：xmlhttp_request = new XMLHttpRequest();
如果服務(wù)器的響應(yīng)沒(méi)有XML mime-type header，某些Mozilla瀏覽器可能無(wú)法正常工作。 為了解決這個(gè)問(wèn)題，如果服務(wù)器響應(yīng)的header不是text/xml，可以調(diào)用其它方法修改該header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在實(shí)際應(yīng)用中，為了兼容多種不同版本的瀏覽器，一般將創(chuàng)建XMLHttpRequest類(lèi)的方法寫(xiě)成如下形式：
try{
if( window.ActiveXObject ){
for( var i = 5; i; i-- ){
try{
if( i == 2 ){
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
else{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }
break;}
catch(e){
xmlhttp_request = false; } } }
else if( window.XMLHttpRequest )
{ xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{ xmlhttp_request.overrideMimeType('text/xml'); } } }
catch(e){ xmlhttp_request = false; }
在定義了如何處理響應(yīng)后，就要發(fā)送請(qǐng)求了。可以調(diào)用HTTP請(qǐng)求類(lèi)的open()和send()方法，如下所示：
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);
open()的第一個(gè)參數(shù)是HTTP請(qǐng)求方式—GET，POST或任何服務(wù)器所支持的您想調(diào)用的方式。 按照HTTP規(guī)范，該參數(shù)要大寫(xiě)；否則，某些瀏覽器(如Firefox)可能無(wú)法處理請(qǐng)求。
第二個(gè)參數(shù)是請(qǐng)求頁(yè)面的URL。
第三個(gè)參數(shù)設(shè)置請(qǐng)求是否為異步模式。如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行，而不等待服務(wù)器響應(yīng)。這就是"AJAX"中的"A"。
用JavaScript來(lái)創(chuàng)建XMLHttpRequest 類(lèi)向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求后，接下來(lái)要決定當(dāng)收到服務(wù)器的響應(yīng)后，需要做什么。這需要告訴HTTP請(qǐng)求對(duì)象用哪一個(gè)JavaScript函數(shù)處理這個(gè)響應(yīng)。可以將對(duì)象的onreadystatechange屬性設(shè)置為要使用的JavaScript的函數(shù)名，如下所示：
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript創(chuàng)建的函數(shù)名，注意不要寫(xiě)成FunctionName()，當(dāng)然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后，例如：
xmlhttp_request.onreadystatechange = function(){
// JavaScript代碼段
};
首先要檢查請(qǐng)求的狀態(tài)。只有當(dāng)一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了，函數(shù)才可以處理該響應(yīng)。XMLHttpRequest 提供了readyState屬性來(lái)對(duì)服務(wù)器響應(yīng)進(jìn)行判斷。
readyState的取值如下：
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (交互中)
4 (完成)
所以只有當(dāng)readyState=4時(shí)，一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了，函數(shù)才可以處理該響應(yīng)。具體代碼如下：
if (http_request.readyState == 4) { // 收到完整的服務(wù)器響應(yīng) }
else { // 沒(méi)有收到完整的服務(wù)器響應(yīng) }
當(dāng)readyState=4時(shí)，一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了，接著，函數(shù)會(huì)檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值。完整的狀態(tài)取值可參見(jiàn)W3C文檔。當(dāng)HTTP服務(wù)器響應(yīng)的值為200時(shí)，表示狀態(tài)正常。
在檢查完請(qǐng)求的狀態(tài)值和響應(yīng)的HTTP狀態(tài)值后，就可以處理從服務(wù)器得到的數(shù)據(jù)了。有兩種方式可以得到這些數(shù)據(jù)：
(1) 以文本字符串的方式返回服務(wù)器的響應(yīng)
(2) 以XMLDocument對(duì)象方式返回響應(yīng)
實(shí)例一： 用文本字符串的方式返回服務(wù)器的響應(yīng)來(lái)驗(yàn)證網(wǎng)易通行證帳號(hào)是否存在
首先，我們登陸網(wǎng)易通行證注冊(cè)頁(yè)面，可以看到檢測(cè)用戶(hù)名是否存在是將用戶(hù)名提交給checkssn.jsp頁(yè)面進(jìn)行判斷，格式為：
reg.163.com/register/checkssn.jsp?username=用戶(hù)名
根據(jù)上面講到的方法，我們可以利用AJAX技術(shù)對(duì)網(wǎng)易通行證用戶(hù)名進(jìn)行檢測(cè)：
第一步：新建一個(gè)基于Xhtml標(biāo)準(zhǔn)的網(wǎng)頁(yè)，在區(qū)域插入Javascript函數(shù)如下：
function getXMLRequester( )
{ var xmlhttp_request = false;
try
{ if( window.ActiveXObject )
{ for( var i = 5; i; i-- ){
try{
if( i == 2 )
{ xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" ); }
else
{ xmlhttp_request = new ActiveXObject
( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }
break;}
catch(e){ xmlhttp_request = false; } } }
else if( window.XMLHttpRequest )
{ xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{ xmlhttp_request.overrideMimeType('text/xml'); } } }
catch(e){ xmlhttp_request = false; }
return xmlhttp_request ; }
function IDRequest(n) { //定義收到服務(wù)器的響應(yīng)后需要執(zhí)行的JavaScript函數(shù)
url=n+document.getElementById('163id').value;//定義網(wǎng)址參數(shù)
xmlhttp_request=getXMLRequester();//調(diào)用創(chuàng)建XMLHttpRequest的函數(shù)
xmlhttp_request.onreadystatechange = doContents;//調(diào)用doContents函數(shù)
xmlhttp_request.open('GET', url, true);
xmlhttp_request.send(null); }
function doContents()
{ if (xmlhttp_request.readyState == 4) {// 收到完整的服務(wù)器響應(yīng)
if (xmlhttp_request.status == 200) {//HTTP服務(wù)器響應(yīng)的值OK
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
//將服務(wù)器返回的字符串寫(xiě)到頁(yè)面中ID為message的區(qū)域 }
else { alert(http_request.status); } } }
在區(qū)域建立一個(gè)文本框，id為163id，再建一個(gè)id為messsge的空白區(qū)域用來(lái)顯示返回字符串(也可以通過(guò)Javascript函數(shù)截取一部分字符串顯示)：
<input type=text id="163id">
<span id="message"></span>
這樣，一個(gè)基于AJAX技術(shù)的用戶(hù)名檢測(cè)頁(yè)面就做好了，不過(guò)這個(gè)頁(yè)面將返回服務(wù)器響應(yīng)生成頁(yè)面的所有字符串，當(dāng)然還可以對(duì)返回的字符串進(jìn)行一些操作，便于應(yīng)用到不同的需要當(dāng)中。
實(shí)例二： 以XMLDocument對(duì)象方式返回響應(yīng)來(lái)驗(yàn)證金山通行證帳號(hào)是否存在
在上面的例子中，當(dāng)服務(wù)器對(duì)HTTP請(qǐng)求的響應(yīng)被收到后，我們會(huì)調(diào)用請(qǐng)求對(duì)象的reponseText屬性。該屬性包含了服務(wù)器返回響應(yīng)文件的內(nèi)容。現(xiàn)在我們以XMLDocument對(duì)象方式返回響應(yīng)，此時(shí)將不再需要reponseText屬性而使用responseXML屬性。
首先登陸金山通行證注冊(cè)頁(yè)面，我們發(fā)現(xiàn)金山通行證用戶(hù)名的檢測(cè)方式為： pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶(hù)名,并且返回XML數(shù)據(jù):
isExistedUid -2
當(dāng)result值為-1時(shí)表示此用戶(hù)名已被注冊(cè)，當(dāng)result值為-2時(shí)表示此用戶(hù)名尚未注冊(cè)，因此通過(guò)對(duì)result值的判斷可以知道用戶(hù)名是否被注冊(cè)。
對(duì)上例代碼進(jìn)行修改：
首先找到
document.getElementById('message').innerHTML = xmlhttp_request.responseText;
改為:
var response = xmlhttp_request.responseXML.documentElement;
var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result節(jié)點(diǎn)數(shù)據(jù)
if(result ==-2){
document.getElementById('message').innerHTML = "用戶(hù)名"+document.getElementById('163id').value+"尚未注冊(cè)";}
else if(result ==-1){
document.getElementById('message').innerHTML = "對(duì)不起,用戶(hù)名"+document.getElementById('163id').value+"已經(jīng)注冊(cè)";}
通過(guò)以上兩個(gè)實(shí)例說(shuō)明了AJAX的客戶(hù)端基礎(chǔ)應(yīng)用，采用的是網(wǎng)易和金山現(xiàn)成的服務(wù)器端程序，當(dāng)然為了開(kāi)發(fā)合適自己頁(yè)面的程序，還需要對(duì)自己編寫(xiě)服務(wù)器端程序，這設(shè)計(jì)到程序語(yǔ)言及數(shù)據(jù)庫(kù)的操作，對(duì)于有一定程序基礎(chǔ)的讀者一定不是很難的事情。
補(bǔ)充：
1.Ajax：著名希臘史詩(shī)伊利亞特中英雄埃阿斯的名字。
2.Ajax：荷蘭著名足球俱樂(lè)部阿賈克斯，以培養(yǎng)青年球員而著稱(chēng)，并多次奪得歐洲冠軍杯。