細談 URL 編碼 (Part IV)

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: 國立中興大學資管系呂瑞麟

請勿轉貼

看其他教材

在 Part IV 中，我們將之前的測試網頁改成 UTF-8 的編碼，在傳遞 URL 之前仍然不進行編碼。使用者可以點選測試網頁來試試看；另外，makeRequest() 的內容跟前一個測試網頁大同小異，只是這次呼叫的遠端 servlet 是 EchoUTF8。

請在測試網頁上點一下"確定"按鈕。如果使用 Firefox，你應該會看到如下的對話視窗：

如果使用 IE，你應該會看到如下的畫面：

仔細觀察兩個畫面，不曉得是不是大多數人會跟我以前一樣，心裡大喊：耐ㄝ按ㄋㄟ？看起來，兩個瀏覽器的內建 XMLHttpRequest 物件在處理 URL 的時候都有一定的定見：比較 Part III 和這裡的結果，應該可以推論出 Firefox 的 XMLHttpRequest 物件都以 UTF-8 的方式來處理 URL；而 IE 也是不管網頁的編碼如何，XMLHttpRequest 物件一律以 Big5 的方式處理 URL。（喔，我的客戶端作業系統是繁體中文的 XP SP3，不知道這有沒有影響）

從以上的說明和測試，我們馬上知道要開發一個同時適用於 Firefox 和 IE 的 Ajax 網頁需要進一步的處理。在之前，我們在由 XMLHttpRequest 送出中文資料給 Tomcat 中，已經找到一個解決方式了，那就是在傳送 URL 之前，將非 ASCII 資料利用 Javascript 的 encodeURIComponent() 方法來進行編碼，然後才讓 XMLHttpRequest 物件將 URL 傳送出去。

由於 Javascript 的 encodeURIComponent() 方法會將傳入的字串轉換成 UTF-8 編碼的字元，因此 Ajax 的程式碼必須修改成

    url = url + "?data=" + 
          encodeURIComponent(document.myform.elements[0].value);
    http_request.open('GET', url, true);
    http_request.send(null);

因此，"老呂"的值會依據 UTF-8 編碼之後，傳送到伺服器。為了能夠正確的處理 UTF-8 資料，我們只能使用 EchoUTF8 來處理；以下兩個執行畫面，網頁內容都是以 Big5 編碼：

ajax4Big5.html

從畫面中，我們可以清楚的看出，不論是 Firefox 或者是 IE 都能得到正確的結果。同樣的，從之前的討論結果，我們也可以把網頁內容以 UTF-8 來編碼，因為在傳送之前，我們還是以 encodeURIComponent() 方法來進行編碼，servlet 只要以 UTF-8 來處理便可以得到正確的結果，讀者可以試試這個測試網頁。

討論到這裡，我想對於 URL 編碼這個主題大概已經有一個不錯的概念。由於每一個 process 傳遞到另一個 process 都可能發生編碼的問題，我希望利用這一連串的說明、討論、以及測試，能夠清楚的說明編碼的困難以及解決問題的方式；理論上來說，你下次遇到編碼的問題，應該也可以利用類似的過程來解決。說到這裡，突然想到：Dojo 和 YUI 究竟是如何處理 URL？

回到：Part III

Last Updated: Friday, 06-May-2011 18:47:00 CST
Written by: 國立中興大學資管系呂瑞麟