关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法


Posted in Javascript onNovember 30, 2010

客户端是UTF-8编码,这也是现在大家公认的标准编码
在这种情况下,实用AJAX异步获取GB2312编码的服务器端信息时,不可避免的要遇到汉字乱码问题
因为目标数据是GB2312,但XMLHttpRequest默认是用UTF-8来进行数据封装的,因此会产生乱码
相信很多人都在用轻量级的JS工具集-prototype.js,它的AJAX功能同样很出色
我也一直在用它,因此对于这个问题也一直是基于 prototype.js来考虑的
但经过多次试验,还是没能把它返回的 responseText 转成正确的编码格式
后来了解到,在XMLHttpRequest对象的 responseBody 属性中,保存了原始的数据信息
但prototype.js的AJAX功能返回的 responseBody 属性是 undefined,看来还是要自己动手了
经过近一个小时的敲打,一个短小精悍的AJAX框架腾空出世了,哈哈,不过功能还是很全的
里面某些写法借鉴了另一个轻量级的AJAX框架-bingo.js的实现方式
调用方式及注释:

myAjaxCall({ 
url : 'xxxxx.jsp' //目标页面地址 
,params : URLEncoding('prm1=参数1&prm2=参数2') //参数串信息 
,method : 'POST' //发送方式POST or GET 
,callBack : retValue //回调函数名称 
,isBody : true //是否返回 responseBody ,默认返回 responseText 
//,isXml : false //是否以XML格式返回数据 
//,errorReport : false //发送错误时,是否弹出提示 
//,attachs : {} //附加的其他参数,可传递给回调函数 
}); 
function retValue(res,att){ 
var strRet = bytes2BSTR(res); 
alert(strRet); 
}

注意看其中的两个函数:

、URLEncoding :对参数进行编码
、bytes2BSTR :对返回的数据进行解码

这两个函数直接借鉴了网络上很流行的两个编码函数,不过都是用vbs写的
需要把这两个函数也附加到上面的页面里:

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

下面附上我写的轻量级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); 
}
Javascript 相关文章推荐
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
学习面向对象之面向对象的术语
Nov 30 #Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 #Javascript
基于JQuery的asp.net树实现代码
Nov 30 #Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 #Javascript
juqery 学习之四 筛选过滤
Nov 30 #Javascript
juqery 学习之四 筛选查找
Nov 30 #Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 #Javascript
You might like
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
php链式操作的实现方式分析
2019/08/12 PHP
XML的代替者----JSON
2007/07/21 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
Python自动登录126邮箱的方法
2015/07/10 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python实现代码块儿折叠
2020/04/15 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
酒店中秋节促销方案
2014/01/30 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL