第一個範例：取得台中行政區域 (Part I)

第一個範例：取得台中行政區域 (Part I)

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

請勿轉貼

看其他教材

---

讓我們說明如何使用 jQuery 來執行 AJAX 呼叫。為了簡化，我們利用之前 範例來說明 jQuery 的 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; cursor: pointer;"
      onclick="makeRequest('taichung.xml')">
          取得台中行政區域
  </div>
  <div id="taichung"></div>
  



• 再來就是定義 makeRequest() 方法，在該方法中我們利用 jQuery 提供的方法 呼叫遠端服務或者檔案，首先介紹最複雜的 .ajax() 方法：

  01    function makeRequest(str) {
  02      $.ajax({
  03        url: str,
  04        type: "GET",
  05        dataType: "xml",
  06        success: function(xml) {
  07          var msg = "";
  08          $(xml).find("areas").find("area").each(function() {
  09            msg += $(this).text() + "<br/>\n";
  10          });
  11          $("#taichung").html(msg);
  12        }
  13      });
  14    }
  

  .ajax() 方法內的參數順序不重要，而且參數的格式是參數名稱:參數值。 本例中，第 03 行的名稱是 url，而其值是由按鈕所傳過來的檔案名稱，也就是說 Ajax 呼叫遠端服務的網址；第 04 行代表 Ajax 呼叫的方式是採用 HTTP 的 GET 的方式；第 05 行代表遠端服務執行完的結果是 XML 格式；第 06 行代表成功 執行遠端呼叫後，系統會去執行的 function，而且回傳的物件名稱為 xml（這還是 一個沒有名稱的 callback 函數）；第 08-11 行基本上就是把 Ajax 呼叫後從遠端 傳回來的 XML 文件（也就是 xml）進行處理；由於該份 XML 文件的根元素是 areas 且其內含四個 area 標籤，因此我們首先利用 $(xml).find("areas").find("area) 找出這四個 area 節點，然後利用 each () 對每一個節點進行處理（也就是利用 $(this).text() 取出 area 標籤的內容）並將結果串成一個字串 msg。第 11 行 把 msg 設定成 ID 為 taichung 節點的內容，即 document.getElementById("taichung").innerHTML = msg;。


• 雖然 .ajax() 的使用很麻煩，但是它卻能提供最好的錯誤判斷處理機制。 例如，我們可以在第 05 和 06 行之間加入下列的判斷式：

        error:  function(jqXHR, exception) {
              if (jqXHR.status === 0) {
                  alert('無法連線.\n 請檢查你的網路.');
              } else if (jqXHR.status == 404) {
                  alert('網址不存在，請確認網址的正確性. [404]');
              } else if (jqXHR.status == 500) {
                  alert('內部伺服器錯誤 [500].');
              } else if (exception === 'parsererror') {
                  alert('要求的 JSON 剖析失敗.');
              } else if (exception === 'timeout') {
                  alert('連結逾時錯誤.');
              } else if (exception === 'abort') {
                  alert('Ajax 呼叫被取消.');
              } else {
                  alert('未知錯誤.\n' + jqXHR.responseText);
              }
        },
  

  這一段程式碼會在 Ajax 呼叫出現錯誤時執行，也就是第一行的 error 所代表， 並執行 function(jqXHR, exception)；出現錯誤時，傳入的 jqXHR 和 exception 都可以用來判斷錯誤的情形。有興趣的讀者可以自行閱讀，或者直接使用即可。(由於跨域了，所以下列按鈕無法直接執行，建議依照本文練習或者執行 Demo 網頁）


• 最後完成的結果如下： （或者點擊 Demo 網頁）
  
  取得台中行政區域

---

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu