關(guān)于UTF-8的客戶(hù)端用AJAX方式獲取GB2312的服務(wù)器端亂碼問(wèn)題的解決辦法
更新時(shí)間：2010年11月30日 22:29:15 作者：
客戶(hù)端是UTF-8編碼，這也是現(xiàn)在大家公認(rèn)的標(biāo)準(zhǔn)編碼在這種情況下，實(shí)用AJAX異步獲取GB2312編碼的服務(wù)器端信息時(shí)，不可避免的要遇到漢字亂碼問(wèn)題
客戶(hù)端是UTF-8編碼，這也是現(xiàn)在大家公認(rèn)的標(biāo)準(zhǔn)編碼
在這種情況下，實(shí)用AJAX異步獲取GB2312編碼的服務(wù)器端信息時(shí)，不可避免的要遇到漢字亂碼問(wèn)題
因?yàn)槟繕?biāo)數(shù)據(jù)是GB2312，但XMLHttpRequest默認(rèn)是用UTF-8來(lái)進(jìn)行數(shù)據(jù)封裝的，因此會(huì)產(chǎn)生亂碼
相信很多人都在用輕量級(jí)的JS工具集-prototype.js，它的AJAX功能同樣很出色
我也一直在用它，因此對(duì)于這個(gè)問(wèn)題也一直是基于 prototype.js來(lái)考慮的
但經(jīng)過(guò)多次試驗(yàn)，還是沒(méi)能把它返回的 responseText 轉(zhuǎn)成正確的編碼格式
后來(lái)了解到，在XMLHttpRequest對(duì)象的 responseBody 屬性中，保存了原始的數(shù)據(jù)信息
但prototype.js的AJAX功能返回的 responseBody 屬性是 undefined，看來(lái)還是要自己動(dòng)手了
經(jīng)過(guò)近一個(gè)小時(shí)的敲打，一個(gè)短小精悍的AJAX框架騰空出世了，哈哈，不過(guò)功能還是很全的
里面某些寫(xiě)法借鑒了另一個(gè)輕量級(jí)的AJAX框架-bingo.js的實(shí)現(xiàn)方式
調(diào)用方式及注釋?zhuān)?
myAjaxCall({
url : 'xxxxx.jsp' //目標(biāo)頁(yè)面地址
,params : URLEncoding('prm1=參數(shù)1&prm2=參數(shù)2') //參數(shù)串信息
,method : 'POST' //發(fā)送方式POST or GET
,callBack : retValue //回調(diào)函數(shù)名稱(chēng)
,isBody : true //是否返回 responseBody ，默認(rèn)返回 responseText
//,isXml : false //是否以XML格式返回?cái)?shù)據(jù)
//,errorReport : false //發(fā)送錯(cuò)誤時(shí)，是否彈出提示
//,attachs : {} //附加的其他參數(shù)，可傳遞給回調(diào)函數(shù)
});
function retValue(res,att){
var strRet = bytes2BSTR(res);
alert(strRet);
}
注意看其中的兩個(gè)函數(shù)：
、URLEncoding ：對(duì)參數(shù)進(jìn)行編碼
、bytes2BSTR ：對(duì)返回的數(shù)據(jù)進(jìn)行解碼
這兩個(gè)函數(shù)直接借鑒了網(wǎng)絡(luò)上很流行的兩個(gè)編碼函數(shù)，不過(guò)都是用vbs寫(xiě)的
需要把這兩個(gè)函數(shù)也附加到上面的頁(yè)面里：
Function URLEncoding(vstrIn)
strReturn = ""
For i = 1 To Len(vstrIn)
ThisChr = Mid(vStrIn,i,1)
If Abs(Asc(ThisChr)) < &HFF Then
strReturn = strReturn & ThisChr
Else
innerCode = Asc(ThisChr)
If innerCode < 0 Then
innerCode = innerCode + &H10000
End If
Hight8 = (innerCode And &HFF00) \ &HFF
Low8 = innerCode And &HFF
strReturn = strReturn & "%" & Hex(Hight8) & "%" & Hex(Low8)
End If
Next
URLEncoding = strReturn
End Function
Function bytes2BSTR(vIn)
strReturn = ""
For i = 1 To LenB(vIn)
ThisCharCode = AscB(MidB(vIn,i,1))
If ThisCharCode < &H80 Then
strReturn = strReturn & Chr(ThisCharCode)
Else
NextCharCode = AscB(MidB(vIn,i+1,1))
strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
i = i + 1
End If
Next
bytes2BSTR = strReturn
End Function
下面附上我寫(xiě)的輕量級(jí)Ajax框架 - myAjax.js 源碼：
/**
2 * myAjax
3 * by netwild
4 * netwild@163.com
5 */
6 var myAjaxConfig = {
7 "url":""
8 ,"params":""
9 ,"method":"GET"
,"callBack":function(){}
,"isXml":false
,"isBody":false
,"isCache":false
,"errorReport":true
,"statePoll":null
,"postData":null
,"attachs":{}
};
function myAjaxCall(requestJson){
var attach;
if(requestJson && typeof requestJson == "object"){
if(requestJson.url){myAjaxConfig.url = requestJson.url;}
if(requestJson.params){myAjaxConfig.params = requestJson.params;}
if(requestJson.method){myAjaxConfig.method = requestJson.method;}
if(requestJson.callBack){myAjaxConfig.callBack = requestJson.callBack;}
if(requestJson.isXml){myAjaxConfig.isXml = requestJson.isXml;}
if(requestJson.isBody){myAjaxConfig.isBody = requestJson.isBody;}
if(requestJson.isCache){myAjaxConfig.isCache = requestJson.isCache;}
if(requestJson.statePoll){myAjaxConfig.statePoll = requestJson.statePoll;}
if(requestJson.attachs){myAjaxConfig.attachs = requestJson.attachs;}
}
if(!myAjaxConfig.isCache){
var nocache = new Date().getTime();
if(myAjaxConfig.url.indexOf("?")>0){myAjaxConfig.url += "&nocache=" + nocache;}
else{myAjaxConfig.url += "?nocache=" + nocache;}
}
var newCall = new myAjaxCore();
newCall.init();
}
function myAjaxCore(){
var _self = this;
var _state,_status;
var _httpRequest,_attach;
////////////////////////////////////////////////////
this.init = function(){
if (window.XMLHttpRequest){
_httpRequest = new XMLHttpRequest();
if (_httpRequest.overrideMimeType) {
_httpRequest.overrideMimeType('text/xml');
}
}else if (window.ActiveXObject) {
var MSXML = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for(var n=0;n<MSXML.length;n++){
try {
_httpRequest = new ActiveXObject(MSXML[n]);
break;
}catch(e){}
}
}
with(_httpRequest) {
onreadystatechange = _self.getResponse;
open(myAjaxConfig.method,myAjaxConfig.url,true);
if(myAjaxConfig.method == "POST" && (myAjaxConfig.params != "")){
setRequestHeader("Content-Length",myAjaxConfig.params.length);
setRequestHeader("Content-Type","application/x-www-form-urlencoded");
send(myAjaxConfig.params);
}else{
var textType = myAjaxConfig.isXml?"text/xml":"text/plain";
_httpRequest.setRequestHeader('Content-Type',textType);
if(browser.IE){
setRequestHeader("Accept-Encoding", "gzip, deflate");
}else if(browser.FF){
setRequestHeader("Connection","close");
}
send(null);
}
}
};
////////////////////////////////////////////////////
this.getResponse = function(){
_state = _httpRequest.readyState;
if(_httpRequest.readyState == 4 && _httpRequest.status){_status = _httpRequest.status;}
if(myAjaxConfig.statePoll){myAjaxConfig.statePoll(_httpRequest.readyState);}
if(_httpRequest.readyState==4 && _httpRequest.status>=400){
_self.abort();
_self.alertf("ERROR:HTTP response code "+_httpRequest.status);
}
if(_httpRequest.readyState==4 && _httpRequest.status==200){
var response_content;
if(myAjaxConfig.isXML){
response_content = _httpRequest.responseXML;
}else if(myAjaxConfig.isBody){
response_content = _httpRequest.responseBody;
}else{
response_content = _httpRequest.responseText;
}
if(typeof myAjaxConfig.callBack == "function"){
myAjaxConfig.callBack(response_content,myAjaxConfig.attachs);
}else{
eval(myAjaxConfig.callBack+"(response_content,myAjaxConfig.attachs)");
}
}
};
////////////////////////////////////////////////////
this.abort=function(){_httpRequest.abort();};
this.state=function(){return _state;};
this.status=function(){return _status;};
this.destory=function(){_self.abort();delete(_httpRequest);};
this.alertf=function(error){if(myAjaxConfig.errorReport){alert(error);}};
}
if(!browser){
var browser={};
browser.IE = browser.ie = window.navigator.userAgent.indexOf("MSIE")>0;
browser.Firefox = browser.firefox = browser.FF = browser.MF = navigator.userAgent.indexOf("Firefox")>0;
browser.Gecko = browser.gecko = navigator.userAgent.indexOf("Gecko")>0;
browser.Safari = browser.safari=navigator.userAgent.indexOf("Safari")>0;
browser.Camino = browser.camino=navigator.userAgent.indexOf("Camino")>0;
browser.Opera = browser.opera=navigator.userAgent.indexOf("Opera")>0;
browser.other = browser.OT=!(browser.IE || browser.FF || browser.Safari || browser.Camino || browser.Opera);
}
在這種情況下，實(shí)用AJAX異步獲取GB2312編碼的服務(wù)器端信息時(shí)，不可避免的要遇到漢字亂碼問(wèn)題
因?yàn)槟繕?biāo)數(shù)據(jù)是GB2312，但XMLHttpRequest默認(rèn)是用UTF-8來(lái)進(jìn)行數(shù)據(jù)封裝的，因此會(huì)產(chǎn)生亂碼
相信很多人都在用輕量級(jí)的JS工具集-prototype.js，它的AJAX功能同樣很出色
我也一直在用它，因此對(duì)于這個(gè)問(wèn)題也一直是基于 prototype.js來(lái)考慮的
但經(jīng)過(guò)多次試驗(yàn)，還是沒(méi)能把它返回的 responseText 轉(zhuǎn)成正確的編碼格式
后來(lái)了解到，在XMLHttpRequest對(duì)象的 responseBody 屬性中，保存了原始的數(shù)據(jù)信息
但prototype.js的AJAX功能返回的 responseBody 屬性是 undefined，看來(lái)還是要自己動(dòng)手了
經(jīng)過(guò)近一個(gè)小時(shí)的敲打，一個(gè)短小精悍的AJAX框架騰空出世了，哈哈，不過(guò)功能還是很全的
里面某些寫(xiě)法借鑒了另一個(gè)輕量級(jí)的AJAX框架-bingo.js的實(shí)現(xiàn)方式
調(diào)用方式及注釋?zhuān)?
復(fù)制代碼 代碼如下:
myAjaxCall({
url : 'xxxxx.jsp' //目標(biāo)頁(yè)面地址
,params : URLEncoding('prm1=參數(shù)1&prm2=參數(shù)2') //參數(shù)串信息
,method : 'POST' //發(fā)送方式POST or GET
,callBack : retValue //回調(diào)函數(shù)名稱(chēng)
,isBody : true //是否返回 responseBody ，默認(rèn)返回 responseText
//,isXml : false //是否以XML格式返回?cái)?shù)據(jù)
//,errorReport : false //發(fā)送錯(cuò)誤時(shí)，是否彈出提示
//,attachs : {} //附加的其他參數(shù)，可傳遞給回調(diào)函數(shù)
});
function retValue(res,att){
var strRet = bytes2BSTR(res);
alert(strRet);
}
注意看其中的兩個(gè)函數(shù)：
、URLEncoding ：對(duì)參數(shù)進(jìn)行編碼
、bytes2BSTR ：對(duì)返回的數(shù)據(jù)進(jìn)行解碼
這兩個(gè)函數(shù)直接借鑒了網(wǎng)絡(luò)上很流行的兩個(gè)編碼函數(shù)，不過(guò)都是用vbs寫(xiě)的
需要把這兩個(gè)函數(shù)也附加到上面的頁(yè)面里：
復(fù)制代碼 代碼如下:
Function URLEncoding(vstrIn)
strReturn = ""
For i = 1 To Len(vstrIn)
ThisChr = Mid(vStrIn,i,1)
If Abs(Asc(ThisChr)) < &HFF Then
strReturn = strReturn & ThisChr
Else
innerCode = Asc(ThisChr)
If innerCode < 0 Then
innerCode = innerCode + &H10000
End If
Hight8 = (innerCode And &HFF00) \ &HFF
Low8 = innerCode And &HFF
strReturn = strReturn & "%" & Hex(Hight8) & "%" & Hex(Low8)
End If
Next
URLEncoding = strReturn
End Function
Function bytes2BSTR(vIn)
strReturn = ""
For i = 1 To LenB(vIn)
ThisCharCode = AscB(MidB(vIn,i,1))
If ThisCharCode < &H80 Then
strReturn = strReturn & Chr(ThisCharCode)
Else
NextCharCode = AscB(MidB(vIn,i+1,1))
strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
i = i + 1
End If
Next
bytes2BSTR = strReturn
End Function
下面附上我寫(xiě)的輕量級(jí)Ajax框架 - myAjax.js 源碼：
復(fù)制代碼 代碼如下:
/**
2 * myAjax
3 * by netwild
4 * netwild@163.com
5 */
6 var myAjaxConfig = {
7 "url":""
8 ,"params":""
9 ,"method":"GET"
,"callBack":function(){}
,"isXml":false
,"isBody":false
,"isCache":false
,"errorReport":true
,"statePoll":null
,"postData":null
,"attachs":{}
};
function myAjaxCall(requestJson){
var attach;
if(requestJson && typeof requestJson == "object"){
if(requestJson.url){myAjaxConfig.url = requestJson.url;}
if(requestJson.params){myAjaxConfig.params = requestJson.params;}
if(requestJson.method){myAjaxConfig.method = requestJson.method;}
if(requestJson.callBack){myAjaxConfig.callBack = requestJson.callBack;}
if(requestJson.isXml){myAjaxConfig.isXml = requestJson.isXml;}
if(requestJson.isBody){myAjaxConfig.isBody = requestJson.isBody;}
if(requestJson.isCache){myAjaxConfig.isCache = requestJson.isCache;}
if(requestJson.statePoll){myAjaxConfig.statePoll = requestJson.statePoll;}
if(requestJson.attachs){myAjaxConfig.attachs = requestJson.attachs;}
}
if(!myAjaxConfig.isCache){
var nocache = new Date().getTime();
if(myAjaxConfig.url.indexOf("?")>0){myAjaxConfig.url += "&nocache=" + nocache;}
else{myAjaxConfig.url += "?nocache=" + nocache;}
}
var newCall = new myAjaxCore();
newCall.init();
}
function myAjaxCore(){
var _self = this;
var _state,_status;
var _httpRequest,_attach;
////////////////////////////////////////////////////
this.init = function(){
if (window.XMLHttpRequest){
_httpRequest = new XMLHttpRequest();
if (_httpRequest.overrideMimeType) {
_httpRequest.overrideMimeType('text/xml');
}
}else if (window.ActiveXObject) {
var MSXML = ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
for(var n=0;n<MSXML.length;n++){
try {
_httpRequest = new ActiveXObject(MSXML[n]);
break;
}catch(e){}
}
}
with(_httpRequest) {
onreadystatechange = _self.getResponse;
open(myAjaxConfig.method,myAjaxConfig.url,true);
if(myAjaxConfig.method == "POST" && (myAjaxConfig.params != "")){
setRequestHeader("Content-Length",myAjaxConfig.params.length);
setRequestHeader("Content-Type","application/x-www-form-urlencoded");
send(myAjaxConfig.params);
}else{
var textType = myAjaxConfig.isXml?"text/xml":"text/plain";
_httpRequest.setRequestHeader('Content-Type',textType);
if(browser.IE){
setRequestHeader("Accept-Encoding", "gzip, deflate");
}else if(browser.FF){
setRequestHeader("Connection","close");
}
send(null);
}
}
};
////////////////////////////////////////////////////
this.getResponse = function(){
_state = _httpRequest.readyState;
if(_httpRequest.readyState == 4 && _httpRequest.status){_status = _httpRequest.status;}
if(myAjaxConfig.statePoll){myAjaxConfig.statePoll(_httpRequest.readyState);}
if(_httpRequest.readyState==4 && _httpRequest.status>=400){
_self.abort();
_self.alertf("ERROR:HTTP response code "+_httpRequest.status);
}
if(_httpRequest.readyState==4 && _httpRequest.status==200){
var response_content;
if(myAjaxConfig.isXML){
response_content = _httpRequest.responseXML;
}else if(myAjaxConfig.isBody){
response_content = _httpRequest.responseBody;
}else{
response_content = _httpRequest.responseText;
}
if(typeof myAjaxConfig.callBack == "function"){
myAjaxConfig.callBack(response_content,myAjaxConfig.attachs);
}else{
eval(myAjaxConfig.callBack+"(response_content,myAjaxConfig.attachs)");
}
}
};
////////////////////////////////////////////////////
this.abort=function(){_httpRequest.abort();};
this.state=function(){return _state;};
this.status=function(){return _status;};
this.destory=function(){_self.abort();delete(_httpRequest);};
this.alertf=function(error){if(myAjaxConfig.errorReport){alert(error);}};
}
if(!browser){
var browser={};
browser.IE = browser.ie = window.navigator.userAgent.indexOf("MSIE")>0;
browser.Firefox = browser.firefox = browser.FF = browser.MF = navigator.userAgent.indexOf("Firefox")>0;
browser.Gecko = browser.gecko = navigator.userAgent.indexOf("Gecko")>0;
browser.Safari = browser.safari=navigator.userAgent.indexOf("Safari")>0;
browser.Camino = browser.camino=navigator.userAgent.indexOf("Camino")>0;
browser.Opera = browser.opera=navigator.userAgent.indexOf("Opera")>0;
browser.other = browser.OT=!(browser.IE || browser.FF || browser.Safari || browser.Camino || browser.Opera);
}
相關(guān)文章
JavaScript相等判斷的避坑實(shí)戰(zhàn)指南
JavaScript中的相等性判斷,在項(xiàng)目開(kāi)發(fā)中,我經(jīng)常會(huì)遇到,今天我們一起探討下,下面這篇文章主要給大家介紹了關(guān)于JavaScript相等判斷的避坑實(shí)戰(zhàn)指南,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
Immutable Data是指一旦被創(chuàng)造后，就不可以被改變的數(shù)據(jù)。通過(guò)使用Immutable Data，可以讓我們更容易的去處理緩存、回退、數(shù)據(jù)變化檢測(cè)等問(wèn)題，簡(jiǎn)化我們的開(kāi)發(fā)2016-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)觸底加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了JS iFrame加載慢的解決方法，非常實(shí)用，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要介紹了js獲取及修改網(wǎng)頁(yè)背景色和字體色的方法,涉及JavaScript針對(duì)頁(yè)面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2015-12-12
JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)動(dòng)畫(huà)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)動(dòng)畫(huà)效果,可實(shí)現(xiàn)類(lèi)似百度頁(yè)面分享按鈕一樣的折疊展開(kāi)動(dòng)畫(huà)效果,涉及javascript頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
如何使用moment.js獲取本周、前n周、后n周開(kāi)始結(jié)束日期及動(dòng)態(tài)計(jì)算周數(shù)
使用了momentjs之后發(fā)現(xiàn)這個(gè)日期處理控件實(shí)在是太強(qiáng)大了,下面這篇文章主要給大家介紹了關(guān)于如何使用moment.js獲取本周、前n周、后n周開(kāi)始結(jié)束日期及動(dòng)態(tài)計(jì)算周數(shù)的相關(guān)資料,需要的朋友可以參考下2022-09-09
js 毫秒轉(zhuǎn)天時(shí)分秒的實(shí)例
下面小編就為大家分享一篇js 毫秒轉(zhuǎn)天時(shí)分秒的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
關(guān)于js datetime的一些使用經(jīng)驗(yàn)分享，想要了解datetime日期操作的朋友可以參考下。2011-11-11
JavaScript比較兩個(gè)數(shù)組的內(nèi)容是否相同(推薦)
這篇文章主要介紹了JavaScript如何比較兩個(gè)數(shù)組的內(nèi)容是否相同的相關(guān)資料,需要的朋友可以參考下2017-05-05