Wabow Information Inc. Blog
分類: 技術分享 作者: daniel
23 四月 2009
這應該是大家最熟悉的頁面吧?沒錯,就是瀏覽器「無法顯示網頁」的顯示頁面;而 404 則是網頁伺服器 HTTP 回應狀態的 3 位數字代碼:HTTP 狀態碼。現在的瀏覽器幾乎都直接將錯誤訊息內建,所以發生 404 錯誤的時候甚至已經不在顯示「404」這個數字在畫面上了;所以左圖是古早的瀏覽器 404 錯誤畫面。關於 HTTP 狀態碼,其他依照 RFC 2616 所定義規範的還有許多代碼,這部分偉大的維基百科已經幫我們巨細靡遺的整理好了,我就不再贅述佔版面啦!雖然是 Jace 的指定作業(因為他說 HTTP 狀態碼應該是常識...),不過如果只寫醬好像有點偷懶(汗);就我最早開始知道的 HTTP 狀態碼 200 延伸,介紹一下基礎的 AJAX 技術吧!
AJAX 是 Asynchronous JavaScript and XML 的縮寫,也就是 非同步 JavaScript 和 XML 的一種運用。早期在使用 AJAX 的時候,並沒有像現在這麼多便利的函式庫(如:jQuery)可以使用,所以當初必須借助 XMLHttpRequestObject 的幫助,與 Server 端進行非同步的呼叫。流程如下:
1. 產生 XMLHttpRequest 物件實體
2. 以該物件對 Server 端的資源進行非同步呼叫
3. 定義一個回傳函式,當 Server 端的 Response 到達實自動執行
4. 在該回傳函式進行處理 Response
5. 可重複步驟 2.
透過 JavaScript 的非同步呼叫,我們就能在背景處理 Server 端才能處理的需求,並將回應的資訊經由 DOM 回寫至 HTML 中。以下是我以前使用 AJAX 所使用的方法:
首先建立 XMLHttpRequestObject
// holds an instance of XMLHttpRequest var xmlHttp = createXmlHttpRequestObject(); // creates an XMLHttpRequest instance function createXmlHttpRequestObject() { // will store the reference to the XMLHttpRequest object var xmlHttp; // this should work for all browsers except IE6 and older try { // try to create XMLHttpRequest object xmlHttp = new XMLHttpRequest(); } catch(e) { // assume IE6 or older var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"); // try every prog id until one works for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++) { try { // try to create XMLHttpRequest object xmlHttp = new ActiveXObject(XmlHttpVersions[i]); } catch (e) {} } } // return the created object or display an error message if (!xmlHttp) alert("Error creating the XMLHttpRequest object."); else return xmlHttp; }
接著利用 XMLHttpRequestObject 對 Server 端進行非同步的呼叫
// called to read a file from the server function GetData(divID,RType,KeyData) { // only continue if xmlHttp isn't void <div> if (xmlHttp) { // try to connect to the server try { // initiate reading the async.txt file from the server // 在這邊指定呼叫 GetData.php,並使用 GET 的方式處理 Server 端的資料 var strURL = 'GetData.php?RType=' + RType + '&KeyData=' + KeyData; strURL += "&parm=" + new Date().getTime(); xmlHttp.open("GET", strURL, true); xmlHttp.onreadystatechange = function() { // obtain a reference to the <div> element on the page // 取得指定 id 的 div 物件 myDiv = document.getElementById(divID); if (xmlHttp.readyState == 4) { // 利用 HTTP 狀態碼,判斷 Server 端回傳資料的狀態 if (xmlHttp.status == 200) { try { // read the message from the server response = xmlHttp.responseText; // display the message // 將回傳的資料,寫入 div 物件中 myDiv.innerHTML = response; } catch(e) { // display error message alert("Error reading the response: " + e.toString()); } } else { // display status message alert("There was a problem retrieving the data:n" + xmlHttp.statusText); } } } xmlHttp.send(null); } // display the error in case of failure catch (e) { alert("Can't connect to server:n" + e.toString()); } } }
這裡的 AJAX 就利用了 HTTP 狀態碼回應的數值,判斷 Server 端的回應是否成功。所以我最早知道 HTTP 狀態碼這個東西,是在 AJAX 的實作過程中;嗯...整個順序好像不太對啊!(噗)看著以前的程式碼,突然深深覺得 jQuery 真是好東西啊~以前要寫的落落長的 XMLHttpRequestObject,現在只要利用 jQuery Ajax,簡單的丟一些參數進去,就能輕鬆達到目的;時代的確是在快速進步的...(掬一把老淚)
這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。
1 Response to 從 HTTP 狀態碼延伸介紹 AJAX 技術
suzy
四月 23rd, 2009 at 12:03 下午
那張圖我看了