網頁

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:

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。