細談 URL 編碼 (Part IV)

細談 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

---

Written by: 國立中興大學資管系呂瑞麟