從 HTTP 狀態碼延伸介紹 AJAX 技術

分類: 技術分享 作者: daniel

23 4 月 2009

404-image這應該是大家最熟悉的頁面吧?沒錯,就是瀏覽器「無法顯示網頁」的顯示頁面;而 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,簡單的丟一些參數進去,就能輕鬆達到目的;時代的確是在快速進步的...(掬一把老淚)

參考資料:趙令文自由學校BFS:XMLHttpRequest 物件

1 Response to 從 HTTP 狀態碼延伸介紹 AJAX 技術

Avatar

suzy

4 月 23rd, 2009 at 12:03 下午

那張圖我看了

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。