細談 URL 編碼 (Part III)

細談 URL 編碼 (Part III)

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

請勿轉貼

看其他教材

---

在探討 URL 編碼的 Part III 中，我們繼續之前的說明方式來討論 Ajax 網頁中負責傳送 URL 的物件 XMLHttpRequest 物件的編碼方式。 在 Ajax 網頁的 第一個測試網頁 中，網頁內容的編碼採用 Big5。 <form> 標籤的定義如下：

<form name="myform">
姓名: <input type="text" value="老呂" name="data"></input>
<input type="button" value="OK" onClick="makeRequest('http://xml.nchu.edu.tw:8080/xml/servlet/EchoBig5');"></input>
</form>

從以上原始碼中，我們可以看得出來：當使用者按下 "OK" 按鈕，遠端的 servlet EchoBig5 就會被 XMLHttpRequest 物件所呼叫。makeRequest() 是一段簡單 的 Ajax 程式碼，需要進一步了解 makeRequest() 內容的讀者，可以閱讀 測試網頁中的原始碼，或者閱讀 AJAX 入門；其中，稍微需要點出來的只有下列程式碼：

    // 不對非 ASCII 資料 encode
    url = url + "?data=" + document.myform.elements[0].value;
    http_request.open('GET', url, true);
    http_request.send(null);

從測試網頁中，預設情形是把 document.myform.elements[0].value （也就是"老呂"）的值，完全不處理的情形下傳送到遠端。 請在測試網頁上點一下"確定"按鈕。如果使用 Firefox，你應該會看到如下的對話視窗：

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

仔細觀察兩個畫面，我們立刻可以從第二對 <h1> 標籤看出內建於 Firefox 中的 XMLHttpRequest 物件處理 URL 的方式和內建於 IE 的 XMLHttpRequest 物件不一樣。從 Part I 和 Part II 的說明， 我們知道雖然網頁內容（也就是"老呂"是以 Big5 編碼），但是 Firefox 的 XMLHttpRequest 物件卻不參考網頁的編碼方式，而是採用 UTF-8 的方式對 "老呂"編碼，因此從畫面中，我們可以看出編碼後的長度為 6，而且內容 就是 UTF-8 編碼而成的 %E8%80%81%E5%91%82。反之，讓我們仔細觀察 IE 的執行畫面，它卻能正確的依據網頁的編碼方式將"老呂"傳送出去，因此 在第二對 <h1> 標籤中，它顯示編碼後資料的長度為 4，而且 16 進位數 為 %A6%D1%A7%66，所以經由 EchoBig5 的正確轉換後，在第三對 <h1> 標籤 中，呈現的資料就是正確的結果。
目前看起來，似乎 IE 的處理方式跟一般瀏覽器處理的方式相同，因此這方面 好像比 Firefox 好。可是當網頁內容的編碼方式是 UTF-8 的時候， 狀況如何呢？
回到：Part II 繼續閱讀：Part IV

---

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