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.

何謂 AJAX？

其實，這個概念並不是很新，只是這樣的技巧被大量的應用於 Google 的網頁之後，如 Gmail、Google Maps、和 Google Suggest 等，才被重視，而第一個提出 AJAX 這個名詞的就是 。利用類似技巧的公司還有 Writely、Kiko 等。這樣的概念，開始的人們對於網頁是否會取代 desktop applications 進行討論，而又進一步的延伸出 的討論。

AJAX 也不是一項單獨的技術，它是由一堆現有的技術所組成，它的組成技術有：

1. XHTML（或者 HTML）加上 CSS 來作為資料的呈現。
2. 利用 DOM 以及 Javascript 來進行存取資料（大多為 XML）的處理。
3. 利用 XMLHttpRequest 物件與遠端的 web server 進行非同步的資料交換。

第一個範例

• 首先，在跟遠端伺服器要求檔案以前，我們需要產生 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 物件。

• 這個範例的完整原始碼：

  
         取得臺中的行政區域 
  
  

• Gecko DOM Reference Gecko 是 Mozilla、Firefox、Opera 等瀏覽器的引擎，你需要這個檔案來檢查有哪些 DOM 的 APIs 可以使用。
• .

使用 AJAX 的時機

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;

public class Hello extends HttpServlet {
  public void doGet(HttpServletRequest req, HttpServletResponse res)
         throws ServletException, IOException
  {
    res.setContentType("text/plain;charset=Big5");
    PrintWriter output = res.getWriter();

    String msg = req.getParameter("name");
    
    msg = new String(msg.getBytes("ISO-8859-1"), "UTF-8");
    

    StringBuffer buf = new StringBuffer();
    buf.append("Hello " + msg);
    buf.append(" , 歡迎使用 AJAX");
    output.println(buf.toString());
    output.close();
  }
}