Ajax入門介紹詳解
Ajax
一、 Ajax 簡介
AJAX 即“Asynchronous JavaScript and XML ”（ 非同步 JavaScript 和XML) ，AJAX 並非縮寫詞 ， 而是由Jesse James Gaiiett 創造的名詞， 是指一種建立互動式 網頁 應用的網頁開發技術。
1. 同步互動和非同步互動的理解
舉個例子：普通 B/S 模式 ( 同步 ) AJAX 技術 ( 非同步 )
同步 ：提交請求 -> 等待伺服器處理 -> 處理完畢返回這個期間客戶端瀏覽器不能幹任何事
同步是指：傳送方發出資料後，等接收方發回響應以後才發下一資料包的通訊方式。
非同步 : 請求通過事件觸發 -> 伺服器處理（這時瀏覽器仍然可以作其他 事情） -> 處理完畢
非同步是指：傳送方發出資料後，不等接收方發回響應，接著傳送下個數 據包的通訊方式
2.Ajax: 一種不用重新整理整個頁面便可與伺服器通訊的辦法
二、 Ajax 的工作原理
1. Ajax 的核心是 JavaScript 物件 XmlHttpRequest
2. AJAX 採用非同步互動過程
AJAX 在使用者與伺服器之間引入一箇中間媒介，從而消除了網路互動過程中的處理 — 等待 — 處理 — 等待缺點。
使用者的瀏覽器在執行任務時即裝載了 AJAX 引擎。 AJAX 引擎用 JavaScript 語言編寫，通常藏在一個隱藏的框架中。它負責編譯使用者介面及與伺服器之間的互動。
AJAX 引擎允許使用者與應用軟體之間的互動過程非同步進行，獨立於使用者與網路伺服器間的交流。現在，可以用 Javascript 呼叫 AJAX 引擎來代替產生一個 HTTP 的使用者動作，記憶體中的資料編輯、頁面導航、資料校驗這些不需要重新載入整個頁面的需求可以交給 AJAX 來執行
3.XMLHttpRequest 物件
建立 XMLHttpRequest 物件（由於非標準所以實現方法不統一）
(1)Internet Explorer 把 XMLHttpRequest 實現為一個 ActiveX 物件
(2) 其他瀏器 （Firefox 、 Safari 、 Opera …） 把它實現為一個本地 JavaScript 物件。
(3)XMLHttpRequest 在不同瀏覽器上的實現是相容的，所以可以用同樣 的方式訪問 XMLHttpRequest 例項的屬性和方法，而不論這個例項創 建的方法是什麼。
例項：
function getXhr (){
var xhr ;
try {//firefox,opera 瀏覽器
xhr = newXMLHttpRequest();
} catch(err){
try {//IE 瀏覽器5.0
xhr = newActiveXObject( "Microsoft.XMLHTTP" );
} catch(er){
alert( "您的瀏覽器版本太低了......" );
}
}
return xhr;
}
4.XMLHttpRequest 物件方法
|
方法 |
描述 |
|
abort() |
停止當前請求 |
|
getAllResponseHeaders() |
把 http 請求的所有響應首部作為鍵 / 值對返回 |
|
getResponseHeader("headerLabel") |
返回指定首部的串值 |
|
open(method,url,async) |
規定請求的型別、 URL 以及是否非同步處理請求。 method ： 請求的型別； GET 或 POST url ： 檔案在伺服器上的位置 async ：true （ 非同步）或 false （ 同步） |
|
send(content) |
向伺服器傳送請求 |
|
setRequestHeader("label", "value") |
把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫 open() |
5.XMLHttpRequest 物件屬性
|
屬性 |
描述 |
|
onreadystatechange |
儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。 |
|
readyState |
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 · 0: 請求未初始化 · 1: 伺服器連線已建立 · 2: 請求已接收 · 3: 請求處理中 · 4: 請求已完成，且響應已就緒 |
|
status |
200: "OK" 404: 未找到頁面 |
|
responseText |
獲得字串形式的響應資料。 |
|
responseXML |
獲得 XML 形式的響應資料。 |
7. 傳送請求方法與屬性的介紹
利用 XMLHttpRequest 例項與伺服器進行通訊包含以下 3 個關鍵部分
onreadystatechange 事件處理函式、 open 方法和 send 方法
(1) .onreadystatechange
該事件處理函式由伺服器觸發，而不是使用者
在 Ajax 執行過程中，伺服器會通知客戶端當前的通訊狀態。這 依靠更新 XMLHttpRequest 物件的 readyState 來實現 , 改變 readyState 屬性是伺服器對客戶端連線操作的一種方式。
每次 readyState 屬性的改變都會觸發 readystatechange 事件
(2) .open(method, url, asynch)
method ：請求型別，類似 “ GET” 或” POST ” 的字串。若只想從伺服器檢索一個檔案，而不需要傳送任何資料，使用GET( 可以在 GET 請求裡通過附加在 URL上的查詢字串來發送資料，不過資料大小限制為 2000 個字元 )。若需要向伺服器傳送資料，用 POST。
url ：路徑字串，指向你所請求的伺服器上的那個檔案。可以是絕對路徑或相對路徑。
asynch ： 表示請求是否要非同步傳輸，預設值為 true( 非同步 ) 。指定 true ，在讀取後面的指令碼之前，不需要等待伺服器的相應。指定 false ，當指令碼處理過程經過這點時，會停下來，一直等到 Ajax 請求執行完畢再繼續執行。
在某些情況下，有些瀏覽器會把多個 XMLHttpRequest請求的結果快取在同一個 URL 。如果對每個請求的響應不同，這就會帶來不好的結果。把當前時間戳追加到 URL 的最後，就能確保 URL 的惟一性，從而避免瀏覽器快取結果。
(3).send(data)
open 方法定義了 Ajax 請求的一些細節。 send 方法可為已經待命的請求傳送指令
data ：將要傳遞給伺服器的字串。
若選用的是 GET 請求 ，則不會發送任何資料 ， 給 send 方法傳遞null 即可 ：request.send(null)
當向 send() 方法提供引數時，要確保 open() 中指定的方法是 POST ，如果沒有資料作為請求體的一部分發送，則使用 null.
(4).setRequestHeader(header,value)
引數 header ： 首部的名字
引數 value ： 首部的值
如果用 POST 請求向伺服器傳送資料 ， 需要將 “Content-type ” 的首部設定為 “application/x-www-form-urlencoded ” 它會告知伺服器正在傳送資料 ， 並且資料已經符合 URL 編碼了。
該方法必須在 open() 之後才能呼叫
(5) 傳送請求get 與post 的區別總結
傳送請求 : 如果是get 請求send( 引數) 引數：必須是null 或者xhr.send();
get 請求就不必要設定 xhr.setRequestHeader(header,value)
備註：如果xhr.send( 引數); 引數不為空情況下, 會自動轉換成post 請求方式 您可以通過request.getMethod(); 方法獲取請求的方式
傳送請求 : 如果是post 請求send( 引數) 引數：引數可以是null 或 者xhr.send()|send( 帶有引數的)post 請求在傳遞值的情況下必須 設定 xhr.setRequestHeader(header,value)
Get 與post 例項
Get
function getAjax(){
// 獲取xhr 物件
varxhr = getXhr();
// 規定請求型別
xhr.open( "get", "main.jsp?username=123", true);
xhr.send();
xhr.onreadystatechange = function(){
//判讀是否處理完畢
if(xhr.readyState==4){
// 判讀伺服器是否處理成功！
if(xhr.status==200){
alert(xhr.responseText);
}
}
}
}
post
function post Ajax(){
// 獲取xhr 物件
varxhr = getXhr();
// 規定請求型別
xhr.open( "post" , "main.jsp" , true );
xhr.setRequestHeader( "Content-Type" ,
"application/x-www-form-urlencoded")
xhr.send( "username=345&pass=123");
xhr.onreadystatechange = function(){
//判讀是否處理完畢
if(xhr.readyState==4){
// 判讀伺服器是否處理成功！
if(xhr.status==200){
alert(xhr.responseText);
}
}
}
}
8. 接收方法和屬性
用 XMLHttpRequest 的方法可向伺服器傳送請求。在 Ajax 處理過程 中，XMLHttpRequest 的屬性有readyState 、status 、responseText 和 responseXML 可被伺服器更改
(1)readyState
readyState 屬性表示 Ajax 請求的當前狀態。它的值用數字代表。
0 代表未初始化。 還沒有呼叫 open 方法
1 代表正在載入。 open 方法已被呼叫，但 send 方法還沒有
被呼叫
2 代表已載入完畢。send 已被呼叫。請求已經開始
3 代表互動中。伺服器正在傳送響應
4 代表完成。響應傳送完畢
每次 readyState 值的改變，都會觸發readystatechange 事件。如
果把 onreadystatechange事件處理函式賦給一個函式，那麼每次
readyState 值的改變都會引發該函式的執行。
readyState 值的變化會因瀏覽器的不同而有所差異。但是，當請求
結束的時候，每個瀏覽器都會把 readyState的值統一設為 4
(2) .status
伺服器傳送的每一個響應也都帶有首部資訊。三位數的狀態碼是伺服器發
送的響應中最重要的首部資訊，並且屬於超文字傳輸協議中的一部分。
常用狀態碼及其含義：
404 沒找到頁面 (not found)
403 禁止訪問 (forbidden)
500 內部伺服器出錯 (internal service error)
200 一切正常 (ok)
304 沒有被修改 (not modified)( 伺服器返回 304 狀態 ， 表示原始檔沒有被修改 )
在 XMLHttpRequest 物件中 ， 伺服器傳送的狀態碼都儲存在 status 屬
性裡。通過把這個值和 200 或 304比較，可以確保伺服器是否已傳送了一
個成功的響應
(3) .responseText
XMLHttpRequest 的 responseText 屬性包含了從伺服器傳送的資料。它
是一個 HTML,XML 或普通文字，這取決於伺服器傳送的內容。
當 readyState 屬性值變成 4 時, responseText 屬性才可用，表明
Ajax 請求已經結束。
(4) .responseXML
如果伺服器返回的是 XML， 那麼資料將儲存在 responseXML屬性中。
只用伺服器傳送了帶有正確首部資訊的資料時,responseXML 屬性才
是可用的。 MIME 型別必須為text/xml
以上內容歸 redarmy_chen 原創 , 版權歸 redarmy_chen 所有不得隨意轉載 如有問題請傳送郵件到 redarmy_chen@qq .com