2014年10月20日 星期一

測試 jQuery 傳送中文資料給 Tomcat


測試 jQuery 傳送中文資料給 Tomcat

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
請勿轉貼
看其他教材

這個範例是對應 由 XMLHttpRequest 送出中文資料給 Tomcat,其主要的目的在於測試在 jQuery 的環境下,如何經資料(尤其是中文資料)傳送給 Tomcat。 在之前的對應文章中,我們說明了不同的開發環境以及瀏覽器對於傳送資料的作法不同, 而且目前也還沒有標準規範該如何做;我們經過多次實驗後得知,比較實用的做法是 瀏覽器端的 Javascript 在將資料送往 Tomcat 之前,最好先使用 encodeURIComponent() 對資料進行編碼。目前根據 jQuery 的文件,jQuery 在傳送資料給伺服器端之前, 會自動對傳送資料進行 encodeURIComponent() 編碼,這個功能讓我們的程式開發 又可以更輕鬆。 完成這個範例的步驟如下:

第二個範例:呼叫遠端 servlet


第二個範例:呼叫遠端 servlet

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

請勿轉貼
看其他教材

這個範例是對應 AJAX 入門:第二個範例。 在第一個範例中,為了簡化起見,我們只是將遠端的檔案下載下來, 再經由 jQuery 的內建功能(如 find() 和 text())功能來剖析 XML 文件。可是 絕大多數的 jQuery 網頁都是跟伺服器端的程式來做互動的,因此在第二個範例中, 我們延續第一個範例,差別只是在於這次我們呼叫的對象是伺服器端的程式,其他不變。 雖然在本範例我們採用的遠端程式是 Java servlet,但是遠端程式可以是其他 開發環境,例如 php、asp、perl 等;另外,由於本例所使用的 servlet 程式跟 AJAX 對應文件的程式相同,我們就不再把 servlet 端的程式列示出來。 跟第一個範例主要的差別如下:
  • 由於是呼叫遠端程式,所以按鈕中的 onclick="makeRequest('taichung.xml') 需要改變成遠端的網址,依據 servlet 的網址,該段設定需要改成 onclick="makeRequest('http://xml.nchu.edu.tw:8080/jlu/servlet/Taichung')

  • 由於 servlet 回傳的是一個 HTML 檔,而不是一個 XML 檔,所以 makeRequest() 並不需要處理 XML 的內容,而是直接接收即可,因此我們把它改成
      function makeRequest(str) {
        $.get(str, function(result) {
            $("#taichung").html(result);
        });
      }
    

  • 最後完成的結果如下: (由於跨域的安全考量,下列按鈕無法執行,請至demo 網頁
    取得台中行政區域