Web – Ajax入門一講

技術交流,DH講解.

今天講得東西都是些很簡單的,老鳥直接飛過吧.
AJAX請求靠的是XMLHttpRequest對象來實現.現在的問題就是IE和W3C標準不一樣,所以我們在JS裡面建立XMLHttpRequest的時候需要判斷瀏覽器,當然簡單的方法是這樣的:

var request = false;try {  request = new XMLHttpRequest();} catch (trymicrosoft) {  try {    request = new ActiveXObject("Msxml2.XMLHTTP");  } catch (othermicrosoft) {    try {      request = new ActiveXObject("Microsoft.XMLHTTP");    } catch (failed) {      request = false;    }  }}if (!request)  alert("Error initializing XMLHttpRequest!");

當然IE中XMLHTTP的版本不止我上面寫的這2個,貌似有5個,大家可以寫出一個數組,然後迴圈建立ActiveX.
XMLHttpRequest對象建立好了我們就來使用它提供的方法,具體有多少方法和屬性,可以詳見MSDN以及其他一些網站.

XMLHttpRequest 對象的 open() 方法來完成。該方法有五個參數：

• request-type：發送請求的類型。典型的值是 GET 或 POST，但也可以發送 HEAD 請求。
• url：要串連的 URL。
• asynch：如果希望使用非同步串連則為 true，否則為 false。該參數是可選的，預設為 true。
• username：如果需要身分識別驗證，則可以在此指定使用者名稱。該選擇性參數沒有預設值。
• password：如果需要身分識別驗證，則可以在此指定口令。該選擇性參數沒有預設值。

通常使用其中的前三個參數。事實上，即使需要非同步串連，也應該指定第三個參數為 “true”。這是預設值，但堅持明確指定請求是非同步還是同步的更容易理解。
下面來個例子,同步GET請求163的首頁原始碼:

     var url = "http://www.163.com";     request.open("GET", url, false);     request.send(null);

說了同步,肯定有朋友想知道非同步怎麼實現?好的來個例子:

     var url = "http://www.163.com";     request.open("GET", url, true);     request.onreadystatechange = updatePage;     request.send(null);   }   function updatePage() {     alert("Server is done!");   }

如果朋友你去實驗了下,你會發現這個對話方塊彈出來了很多次,為什麼麼?那是因為我們還有一個地方沒有說:

HTTP 就緒狀態表示請求的狀態或情形。它用於確定該請求是否已經開始、是否得到了響應或者請求/響應模型是否已經完成。它還可以協助確定讀取伺服器提供的響應文本或資料是否安全。在 Ajax 應用程式中需要瞭解五種就緒狀態：

• 0：請求沒有發出（在調用 open() 之前）。
• 1：請求已經建立但還沒有發出（調用 send() 之前）。
• 2：請求已經發出正在處理之中（這裡通常可以從響應得到內容標題部）。
• 3：請求已經處理，響應中通常有部分資料可用，但是伺服器還沒有完成響應。
• 4：響應已完成，可以訪問伺服器響應並使用它。

所以我們應該在updatePage函數中判斷一下請求狀態是不是4吧.

   function updatePage() {     if (request.readyState == 4)       alert("Server is done!");   }

這裡還要說一個HTTP狀態代碼,比如說網頁找到了就是200,網頁錯誤就是404等等,我們這裡是不是也要看看是不是真的開啟了網頁的首頁吧,所以再改:

   function updatePage() {     if (request.readyState == 4)       if (request.status == 200)         alert(request.responseText);       else if (request.status == 404)         alert("Request URL does not exist");       else         alert("Error: status code is " + request.status);   }

這樣如果開啟成功,就會彈出網頁首頁的HTML代碼.
最後我得說一下請求的方式除了GET還有POST,HEAD,PUT等,具體有什麼區別,朋友你可以自己查資料看看,這樣有利於你的學習.
下面是從MSDN摳出來的XMLHttpRequest的屬性和方法:

onreadystatechange
Sets or retrieves the event handler for asynchronous requests.

readyState
Retrieves the current state of the request operation.

responseBody
Retrieves the response body as an array of unsigned bytes.

responseText
Retrieves the response body as a string.

responseXML
Retrieves the response body as an XML Document Object Model (DOM) object.

status
Retrieves the HTTP status code of the request.

statusText
Retrieves the friendly HTTP status of the request.

abort
Cancels the current HTTP request.

getAllResponseHeaders
Returns the complete list of response headers.

getResponseHeader
Returns the specified response header.

open
Assigns method, destination URL, and other optional attributes of a pending request.

send
Sends an HTTP request to the server and receives a response.

setRequestHeader
Adds custom HTTP headers to the request.

 

希望給新手們一點兒協助,因為我也是新手,好的 我是DH.