2012年10月1日 星期一

第一個範例:取得台中行政區域 (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

沒有留言:

張貼留言