AJAX 入門：第一個範例

AJAX 入門：第一個範例

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

在之前的 JavaScript 入門中，我們已經介紹了 XHTML 和 CSS 以及 DOM 的用法以及應用範例，因此我們在第一個範例中，介紹 XMLHttpRequest 的用法以及它跟傳統網頁寫法的不同處。在這個範例中，我們試圖從遠端取得台中地區的行政區域檔，然後將其內容顯示在網頁上。

傳統非 AJAX 的網頁，大多遵循以下的步驟：先撰寫一個含有 form 標籤的網頁（如下所示），然後按下 submit 的按鈕之後，該動作會向伺服器端的程式提出請求，然後在該程式執行結束後將結果回傳到一個新的網頁；請注意，新網頁必須等待伺服器端的程式執行完成後才能顯示，而這一段時間原來的網頁也沒辦法做任何的事情，只能默默的等待，這就是所謂的同步式（synchronous）的。如果該伺服器端的程式因為執行的動作比較複雜或者網路反應比較慢，使用者就必須多等一下，這也造成網頁的及時性變差。

在進一步解釋如何撰寫 AJAX 程式之前，讓我們先來體會一下所謂 AJAX 網頁的非同步性。請按一下下面的按鈕：（喔，那比較漂亮的按鈕不是 AJAX 的效果，而是 CSS 的效果，請不要誤會）

取得台中行政區域

開發一個 AJAX 網頁大略可以分成下列幾個步驟：

首先，先在網頁上放置必要的 HTML 元件；例如，在這個範例中，我們的 HTML 元件如下：
```
<div
    style="background-image: url(button.gif); background-repeat: no-repeat; 
    font-size: 14px; width: 132px; height: 28px; padding: 5px 0 0 5px;"
    onclick="makeRequest('taichung.xml')">
        取得台中行政區域
</div>
<div id="taichung"></div>
```
其中，我們分成兩個 div 區塊：第一個 div 區塊，除了 style 的設定之外，我們還設定了 onclick 的事件處理方式；如果使用者 click 的話，makeRequest() 方法會被執行。第二個區塊，我們將其指名為 taichung，目前沒有內容，其目的是為了存放從伺服器所傳過來的資料。

在跟遠端伺服器要求檔案以前，我們需要產生 XMLHttpRequest 的物件。跟所有的 JavaScript 問題一樣，在產生 XMLHttpRequest 的物件，Mozilla 和 Internet Explorer 也有不同的語法，因此處理 AJAX 的 JavaScript 需要判斷你所使用的 browser 是哪一種。

    if (window.XMLHttpRequest) { // Mozilla, Safari,...
      http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        // 新版的 IE
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          // 舊版的 IE
          http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }

有了 XMLHttpRequest 的物件之後，就是向遠端要求檔案，在這個範例中，我們要取得的檔案名稱是 taichung.xml。
```
http_request.open('GET', 'taichung.xml', true);
http_request.send(null);
```
1. open() 的第一個參數是 HTTP 的方法，看你的需要，以及 web server 支援的情形，你可以使用 GET、POST、或者 HEAD。建議使用大寫以符合 HTTP 的標準。
2. open() 的第二個參數是你希望取得的資源的 URL。由於安全的機制，你只能從同一個 web server 上取得資源。
3. open() 的第三個參數是代表這個呼叫是不是非同步（即 AJAX 的第一個 A）。因此，在大部分的情形下都是設為 true 代表在跟遠端取得資源的同時，browser 可以繼續執行 Javascript 的內容。這個時候其實有兩件事情同時在進行，一個是從遠端取得資料，另一個是繼續執行 JavaScript 的內容，或者使用者可以繼續處理網頁上的資料，這也就是非同步的定義。
4. 如果使用 GET 的方式，send() 的參數為 null。如果使用 POST 的方式，我們除了要設定 MIME 的類型（如下）之外，
```
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
```
  我們還需要傳遞 HTML form 內的資料，例如，
```
http_request.send('name=value&anothername=othervalue&so=on');
```
既然是非同步的進行方式，在 open() 以及 send() 之前，我們必須先設定一些事件處理的函數來處理如"已經取得資料"的事件。定義事件處理函數的格式如下：
```
http_request.onreadystatechange = function(){
    // do the thing
};
```
一般來說，事件處理函數首先要檢查的是目前 web server 對於我們之前送出去的 http_request 的處理狀態為何。處理狀態的屬性名稱為 readyState，它所有可能的值為
- 0 (尚未初始化; 還沒呼叫 open())
- 1 (載入中; http_request 已經設定好了，但是還沒呼叫 send())
- 2 (載入完成; http_request 已經送給 server 了，server 已經開始處理了，你可以取得 content header 了。)
- 3 (可以互動的; http_request 已經部份完成了，所以有可能取得部份處理完的資料)
- 4 (完成的; compelte)
在大部分的情形下，我們只對已經完成的狀態有興趣，所以我們的程式碼的格式如下：
```
if (http_request.readyState == 4) {
    // everything is good, the response is received
} else {
    // still not ready
}
```
web server 的處理結束之後，會回傳一個處理結果，例如，我們的要求完成了，但是處理結果卻是"找不到檔案"。因此，我們的程式還需要檢查處理結果，處理結果是放在 status 這個屬性內，因此檢查處理結果的程式碼如下：
```
if (http_request.status == 200) {
    // 可以依照我們的需求來處理 xml 的資料了
} else {
    // 404 代表檔案不存在，500 代表處理錯誤（Internal Server Error）
    // 自行決定要如何處理錯誤的情形
}
```
最後，就是接收來自 web server 的資料，http_request 提供兩種方式來存取資料：
- http_request.responseText 也就是 web server 回傳的資料是以一串的文字，你需要利用字串的處理函數。
- http_request.responseXML 也就是 web server 回傳的資料是一份 XMLDocuemnt 的物件，你可以利用 JavaScript 的 DOM APIs 來存取這份 XML 物件。

這個範例的完整原始碼：

<script type="text/javascript" language="javascript">
  // 修改自 AJAX: Getting Started - MDC
  function makeRequest(url) {
    var http_request = false;

    if (window.XMLHttpRequest) { // Mozilla, Safari,...
      http_request = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        http_request = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          http_request = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {}
      }
    }

    if (!http_request) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    // 定義事件處理函數為 alterContents()
    http_request.onreadystatechange = function() { 
                                      alertContents(http_request); };
    http_request.open('GET', url, true);
    http_request.send(null);
  }

  function alertContents(http_request) {
    if (http_request.readyState == 4) {
      if (http_request.status == 200) {
        var xmldoc = http_request.responseXML;
        var nodes = xmldoc.getElementsByTagName('area');
        var mesg = "";
        for(var i=0; i<nodes.length; i++) {
          mesg += nodes[i].firstChild.nodeValue + "\n";
        }
        //alert(mesg);
        document.getElementById("taichung").innerHTML = mesg;
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
</script>

你們可以試著將 document.getElementById("taichung").innerHTML = mesg; 換成 alert(mesg);，然後試試看結果有什麼變化。
參考資料：尤其是 DOM 以及 XMLHttpRequest 的使用方法。
- Gecko DOM Reference Gecko 是 Mozilla、Firefox、Opera 等瀏覽器的引擎，你需要這個文件來檢查有哪些 DOM 的 APIs 可以使用。
- The XMLHttpRequest Object.

Last Updated: Monday, 11-May-2009 15:44:42 CST
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu