Ajax在非UTF-8傳送中文資料注意事項筆記

一般我自在寫Ajax程式時，會有兩個流程，

1. pageA.html --> ajax --> pageB.aspx
2. pageA.html <-- ajax <-- PageB.aspx

1. 由PageA.html透過ajax向PageB.html傳送參數或資料；
2. 由PageB.html回應處理結果，傳回文字(Text)、XML、json…等資料；
3. PageA.html由回應結果，進行畫面處理。

在處理一個非utf-8的網頁，如果你傳送或回應「含(正體、簡體)中文」的資料，那會很慘，因為PageA.html傳送給PageB.aspx的資料，會含一堆亂碼的資料，而PageB.aspx回應也是一堆亂碼。就程式而言，是沒有問題，因為只有顯示是亂碼，其他都正常。

造成亂碼的原因是Ajax使用的XMLHttpRequest元件預設使用utf-8來作業，所以在非utf-8的網頁使用Ajax要特別注意「中文」資料傳送及回應的問題。

pageA.html --> ajax --> pageB.aspx

由PageA.html傳送給PageB.aspx會含有中文資料，處理方式是在資料傳送前使用javascript的內建escape()編碼要POST資料。例如，

var Name = document.getElementById('txtName');
var QueryString = escape(Name.value);
...
XMLHttp.send(QueryString);

這樣PageB.aspx就能接收到正確的資料。

javascript處理中文編碼函數參考

• escape(string)：編碼，會處理#字元為%23，空白字元轉換為+，中文字處理為UniCode。
• unescape(string)：反編碼escape(string)。

• encodeURI(string)：編碼，不會處理#字元，空白字元轉換為%20，中文字處理為UTF-8。
• decodeURI(string)：反編碼encodeURI(string)。

• encodeURIComponent(string)：會處理#字元為%23，空白字元轉換為%20，中文字處理為UTF-8。
• decodeURIComponent(string)：反編碼encodeURIComponent(string)。

pageA.html <-- ajax <-- PageB.aspx

當PageB.aspx要回傳給PageA.html的資料中含有中文資料，就ASP或ASP.NET而言，就是在PageB.aspx使用「Response.Charset="big5 | gb2312"」，強迫PageB.aspx以指定的編碼來回傳資料。這樣PageA.html的ResponseText或ResponseXML就會收到PageB.apsx所送回來含正確編碼的中文資料。

當然最的方式就是PageA.html與PageB.aspx都使用utf-8，這樣最保險。

Reference：

• JavaScript