Ajax用法簡單教程

要說Ajax就不得不說，異步傳輸和同步傳輸了。

異步是值：發送方發出數據后，不等接收方發回響應，接著發送下一個數據包的通訊方式。

同步是指：發送方發出數據后，等待接收方發回響應以后才發下一個數據包的通訊方式。

也可以理解為：

異步傳輸：你傳吧，我去做我的事了，傳輸完了告訴我一聲。

同步傳輸：你現在傳輸，我要看著你傳輸完成，才去做別的事。

Ajax被認為是(Asynchronous JavaScript and Xml)的縮寫。

現在，允許瀏覽器與服務器通信而無須刷新當前頁面的技術成為Ajax。

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer5首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。

Ajax采用異步交互過程。Ajax在用戶與服務器之間引入一個中間媒介，從而取消了網絡互聯過程中的處理-等待-處理-等待缺點。

用戶的瀏覽器在執行任務時即加載了Ajax引擎。Ajax引擎使用JavaScript語言編寫，通常藏在一個隱藏的框架中。它負責編譯用戶界面與服務器之間的交互。

Ajax引擎允許用戶與應用軟件之間的交互過程異步進行，獨立于用戶與網路服務器間的交流?，F在，可以用JavaScript調用Ajax引擎來代替產生一個HTTP的用戶動作，內存中的數據編輯，頁面導航，數據校驗這些不需要重新載入整個頁面的需求可以交給Ajax來執行。

使用Ajax，可以為Jsp，開發人員，終端用戶帶來可見的便捷。

Ajax并不是一項新技術，其實是多種技術的綜合，包含JavaScript，XHtml和CSS，Dom，Xml和XmlHttpRequest技術。

服務器端語言：服務器需要具備向瀏覽器發送特定信息的能力。Ajax與服務器端語言無關。

Xml(可擴展標記語言)是一種描述數據的格式。AJAX 程序需要某種格式化的格式來在服務器和客戶端之間傳遞信息，XML 是其中的一種選擇。

XHTML（eXtended Hypertext Markup Language,使用擴展超媒體標記語言）和 CSS（Cascading Style Sheet,級聯樣式單）標準化呈現。

DOM（Document Object Model,文檔對象模型）實現動態顯示和交互。

使用XMLHTTP組件XMLHttpRequest對象進行異步數據讀取。

使用JavaScript綁定和處理所有數據。

Ajax并不是完美的技術，也存在缺陷：

AJAX大量使用了Javascript和AJAX引擎，而這個取決于瀏覽器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla雖然也支持AJAX，但是提供XMLHttpRequest的方式不一樣。所以，使用AJAX的程序必須測試針對各個瀏覽器的兼容性。

AJAX更新頁面內容的時候并沒有刷新整個頁面，因此，網頁的后退功能是失效的；有的用戶還經常搞不清楚現在的數據是舊的還是已經更新過的。這個就需要在明顯位置提醒用戶“數據已更新”。

對流媒體的支持沒有FLASH、Java Applet好。

XMLHttpRequest是XMLHTTP組件的對象，通過這個對象，AJAX可以像桌面應用程序一樣只同服務器進行數據層面的交換，而不用每次都刷新界面，也不用每次將數據處理的工作都交給服務器來做；這樣既減輕了服務器負擔又加快了響應速度、縮短了用戶等待的時間。

XMLHttpRequest最早是在IE5中以ActiveX組件的形式實現的。非W3C標準。

創建XMLHttpRequest對象(由于非標準所以實現方法不統一)：

Internet Explorer把XMLHttpRequest實現為一個ActiveX對象。

其他瀏覽器（Firefox、Safari、Opera…）把它實現為一個本地的JavaScript對象。

XMLHttpRequest在不同瀏覽器上的實現是兼容的，所以可以用同樣的方式訪問XMLHttpRequest實例的屬性和方法，而不論這個實例創建的方法是什么。

初始化代碼如下：

function createXmlHttpRequest(){
 var xmlHttp;
 try{ //Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }catch (e){
 try{ //Internet Explorer
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }catch (e){
 try{
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }catch (e){} 
 }
 }
 return xmlHttp;
 }

abort()：停止當前請求。

getAllResponseHeader()：把HTTP請求的所有響應首部作為key/value對返回。

getResponseHeader("headerLabel")：返回指定首部的串值。

open("method","url")：建立對服務器的調用，method參數可以是GET，POST。url參數可以是相對url或絕對url。這個方法還包含3個可選參數。

send(content)：向服務器發送請求。

setRequestHeader("label","value")：把指定首部設置為所提供的值。在設置任何首部之前必須先調用open()方法。

onreadystatechange：狀態改變的事件觸發器。

readyState：對象狀態：

0=未初始化

1=讀取中

2=已讀取

3=交互中

4=完成

responseText：服務器進程返回數據的文本版本。

responseXML：服務器進程返回數據的 兼容DOM的Xml文檔對象。

status：服務器返回的狀態碼，如404=“文件未找到”，200=“成功”。

statusText：服務器返回的狀態文本信息。

openreadystatechange事件處理函數。

該事件處理函數由服務器觸發，而不是用戶。

在Ajax執行過程中，服務器會通知客戶端當前的通信狀態。這依靠更新 XMLHttpRequest 對象的 readyState 來實現。改變 readyState 屬性是服務器對客戶端連接操作的一種方式。

每次 readyState 屬性的改變都會觸發 readystatechange事件，這個是核心。

open(method, url, asynch)方法。

XMLHttpRequest 對象的 open 方法允許程序員用一個Ajax調用向服務器發送請求。

method：請求類型，類似 “GET”或”POST”的字符串。若只想從服務器檢索一個文件，而不需要發送任何數據，使用GET(可以在GET請求里通過附加在URL上的查詢字符串來發送數據，不過數據大小限制為2000個字符)。若需要向服務器發送數據，用POST。

在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果緩存在同一個URL。如果對每個請求的響應不同，這就會帶來不好的結果。把當前時間戳追加到URL的最后，就能確保URL的惟一性，從而避免瀏覽器緩存結果。

var url = "GetAndPostExample?timeStamp=" + new Date().getTime();

url：路徑字符串，指向你所請求的服務器上的那個文件?？梢允墙^對路徑或相對路徑。

asynch：表示請求是否要異步傳輸，默認值為true(異步)。指定true，在讀取后面的腳本之前，不需要等待服務器的相應。指定false，當腳本處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行。

send(data)方法。

open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求發送指令。

data：將要傳遞給服務器的字符串。

若選用的是 GET 請求，則不會發送任何數據， 給 send 方法傳遞 null 即可：request.send(null);

當向send()方法提供參數時，要確保open()中指定的方法是POST，如果沒有數據作為請求體的一部分發送，則使用null.

完整的 Ajax 的 GET 請求示例：

//創建Ajax引擎
var xmlHttpReq = createXmlHttpRequest(); 
 xmlHttpReq.onreadystatechange=function(){ 
 if(xmlHttpReq.readyState==4){ 
 if(xmlHttpReq.status==200){ 
 document.getElementById("info").innerHTML=xmlHttpReq.responseText; 
 } 
 } 
 } 

xmlHttpReq.open("post","/webLogic/test_test.do",true);

setRequestHeader(header,value)：

當瀏覽器向服務器請求頁面時，它會伴隨這個請求發送一組首部信息。這些首部信息是一系列描述請求的元數據(metadata)。首部信息用來聲明一個請求是 GET 還是 POST。

Ajax 請求中，發送首部信息的工作可以由 setRequestHeader完成。

參數header： 首部的名字; 參數value：首部的值。

如果用 POST 請求向服務器發送數據，需要將 “Content-type” 的首部設置為 “application/x-www-form-urlencoded”.它會告知服務器正在發送數據，并且數據已經符合URL編碼了。

該方法必須在open()之后才能調用.

完整的 Ajax 的 POST 請求示例：

var xmlHttpReq = createXmlHttpRequest();
	xmlHttpReq.onreadystatechange=function(){
	if(xmlHttpReq.readyState==4){
	if(xmlHttpReq.status==200){
	document.getElementById("info").innerHTML=xmlHttpReq.responseText;
	}
	}
	}
	
	xmlHttpReq.open("post","/webLogic/test_test.do",true);
	xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xmlHttpReq.send("username="+"德瑪"+"&pwd="+"123");

用 XMLHttpRequest 的方法可向服務器發送請求。在 Ajax 處理過程中，XMLHttpRequest 的如下屬性可被服務器更改：

如果服務器返回的是 XML， 那么數據將儲存在 responseXML 屬性中。

只用服務器發送了帶有正確首部信息的數據時， responseXML 屬性才是可用的。 MIME 類型必須為 text/xml。

XMLHttpRequest 的 responseText 屬性包含了從服務器發送的數據。它是一個HTML,XML或普通文本，這取決于服務器發送的內容。

當 readyState 屬性值變成 4 時, responseText 屬性才可用，表明 Ajax 請求已經結束。

if(xmlHttpReq.readyState==4){
	if(xmlHttpReq.status==200){
	document.getElementById("info").innerHTML=xmlHttpReq.responseText;
	}
	}

服務器發送的每一個響應也都帶有首部信息。三位數的狀態碼是服務器發送的響應中最重要的首部信息，并且屬于超文本傳輸協議中的一部分。

常用狀態碼及其含義：

在 XMLHttpRequest 對象中，服務器發送的狀態碼都保存在 status 屬性里。通過把這個值和 200 或 304 比較，可以確保服務器是否已發送了一個成功的響應

404 沒找到頁面(not found)

403 禁止訪問(forbidden)

500 內部服務器出錯(internal service error)

200 一切正常(ok)

304 沒有被修改(not modified)(服務器返回304狀態，表示源文件沒有被修改 )

readyState 屬性表示Ajax請求的當前狀態。它的值用數字代表。

每次 readyState 值的改變，都會觸發 readystatechange 事件。如果把 onreadystatechange 事件處理函數賦給一個函數，那么每次 readyState 值的改變都會引發該函數的執行。

readyState 值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把 readyState 的值統一設為 4

0 代表未初始化。 還沒有調用 open 方法

1 代表正在加載。 open 方法已被調用，但 send 方法還沒有被調用

2 代表已加載完畢。send 已被調用。請求已經開始

3 代表交互中。服務器正在發送響應

4 代表完成。響應發送完畢

readyState

status

responseText

responseXML

AJAX實質上也是遵循Request/Server模式，所以這個框架基本的流程是：

responseText：將傳回的信息當字符串使用；

responseXML：將傳回的信息當XML文檔使用，可以用DOM處理。

function processResponse(){
 if(XMLHttpReq.readyState==4){ //判斷對象狀態 4代表完成
 if(XMLHttpReq.status==200){ //信息已經成功返回，開始處理信息
 document.getElementById("chatArea").value=XMLHttpReq.responseText;
 }
 }
 }

響應需要做什么：

處理響應處理函數都應該做什么。
　　首先，它要檢查XMLHttpRequest對象的readyState值，判斷請求目前的狀態。參照前文的屬性表可以知道，readyState值為4的時候，代表服務器已經傳回所有的信息，可以開始處理信息并更新頁面內容了。如下：
if (http_request.readyState == 4) {
// 信息已經返回，可以開始處理
} else {
// 信息還沒有返回，等待
}
　　服務器返回信息后，還需要判斷返回的HTTP狀態碼，確定返回的頁面沒有錯誤。所有的狀態碼都可以在W3C的官方網站上查到。其中，200代表頁面正常。
if (http_request.status == 200) {
// 頁面正常，可以開始處理信息
} else {
// 頁面有問題
}

向服務器發出HTTP請求了。這一步調用XMLHttpRequest對象的open和send方法。 http_request.open('GET', 'http://www.example.org/some.file', true);
http_request.send(null)

按照順序，open調用完畢之后要調用send方法。send的參數如果是以Post方式發出的話，可以是任何想傳給服務器的內容。

注意:如果要傳文件或者Post內容給服務器，必須先調用setRequestHeader方法，修改MIME類別。如下：

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
這時資料則以查詢字符串的形式列出，作為send的參數，例如：
name=value&anothername=othervalue&so=on

//發送請求
function sendRequest(){
//獲取文本框的值
var chatMsg=input.value;
var url="chatServlet.do?charMsg="+chatMsg;
//建立對服務器的調用
XMLHttpReq.open("POST",url,true);
//設置MiME類別,如果用 POST 請求向服務器發送數據，
//需要將"Content-type" 的首部設置為 "application/x-www-form-urlencoded".
//它會告知服務器正在發送數據，并且數據已經符合URL編碼了。
XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//狀態改變的事件觸發器,客戶端的狀態改變會觸發readystatechange事件,
//onreadystatechange會調用相應的事件處理函數
XMLHttpReq.onreadystatechange=processResponse;
//發送數據
XMLHttpReq.send(null);
}

對象初始化

function createXmlHttpRequest(){
 var xmlHttp;
 try{ //Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }catch (e){
 try{ //Internet Explorer
 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
 }catch (e){
 try{
 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
 }catch (e){} 
 }
 }
 return xmlHttp;
 }

發送請求

服務器接收

服務器響應

客戶端接收，返回兩種格式：

修改客戶端頁面內容。

只不過這個過程是異步的。

完整的如下：

var xmlHttpReq = createXmlHttpRequest();
	xmlHttpReq.onreadystatechange=function(){
	//為4表示請求和響應結束
	if(xmlHttpReq.readyState==4){
	//200表示響應成功
	if(xmlHttpReq.status==200){
	//在div上添加action返回的值
	document.getElementById("info").innerHTML=xmlHttpReq.responseText;
	}
	}
	}
	//這是get方式發送數據，中文記得在接受時進行編碼
	xmlHttpReq.open("post","/webLogic/test_test.do?username=aaa",true);
	//post請求時一定要加這個請求頭
//	xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//	xmlHttpReq.send("username="+"德瑪"+"&pwd="+"123");//這是post請求的發送數據方法
	//get方式send(null)，寫了也沒用
	xmlHttpReq.send(null);