第一個範例:取得台中行政區域 (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() 的使用很麻煩,但是它卻能提供最好的錯誤判斷處理機制。
例如,我們可以在第 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); } },
- 最後完成的結果如下:
取得台中行政區域
沒有留言:
張貼留言