ExtJs的Ajax亂碼問題

最近用ExtJS+Ashx開了一個小的開源項目JeebookStore.

之前一直用的英文做的測試都也沒感覺有啥問題，上周末一上中文，亂碼問題就騷擾了我一個周末。

最開始是FormPanel發送的資料到ashx的時候出現亂碼，Google了一下這樣的問題還挺多，把所有js和html轉存為UTF-8，然後把調用js的html設定為UTF-8編碼，當然Asp的Request和Response保持預設的UTF-8，Firefox上就沒有亂碼的問題了。

再試IE，發現FormPanel內的資料已經沒有問題，但通過URL參數傳遞的中文還是不對。依次嘗試使用escape，encodeURI，encodeURIComponent函數對URL進行編碼，沒有效果。

多次實驗下發現如果使用Form.submit函數的params屬性來傳遞參數，並且method為GET時，IE下的表現就是正常的。如：

URL: ashx/AddFile.ashx?name=中國&path=/中國

Form.submit({

    url : ‘ashx/AddFile.ashx’,

    method : ‘GET’,

    params : {

        name : ‘中國',

        path : ‘/中國';

    }

})

檢查Action.Submit類的代碼，發現ExtJS會在submit時使用params來拼接成如上的URL，之所以沒有出現亂碼，是因為分別對每個值進行了編碼，而編碼用的函數正是encodeURIComponent，只不過不像我之前那樣直接對整個URL調用而已。

這番折騰又應了那句話，不合常理的問題往往是函數調用的問題。

總算IE和Firefox都可以正確處理中文了，可事情還沒完，下載檔案的檔案名稱在FireFox變亂碼了，當然還不算太亂，只不過是%E7%E9之類的顯示而已。

檢查發現我在返迴文件名時，使用Server.UrlEncode對檔案名稱做了UTF-8的編碼，如果直接返迴文件名則FireFox正常了，但IE同時變亂碼，這次是徹底的亂碼。貌似是因為FireFox對檔案名稱的解析採用了ISOxxxx-1的編碼而不是Http頭中記錄的編碼類別型。Google+研究了半天貌似沒有好的解決辦法，只好在ashx中做了瀏覽器的分支，即：

HttpBrowserCapabilities bc = HttpContext.Current.Request.Browser;
if (
bc.Browser == "IE" )
    _Response.AddHeader("Content-Disposition",
"attachment;filename=" + HttpUtility.UrlEncode(_fileName,
System.Text.Encoding.UTF8));
else
   
_Response.AddHeader("Content-Disposition", "attachment;filename=" + _fileName);

代碼很簡單，但還是發生了點小插曲。因為採用ashx，context.Request中沒有Browser的屬性，必須採用HttpContext.Current.Request.Browser才能正常調用。

總算最終塵埃落定，雖然還有FireFox下載檔案名稱中包含;檔案名稱會被截斷之類的問題，不過留在下次再說吧