关于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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
javascript 限制输入脚本大全
Nov 03 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
php 接口类与抽象类的实际作用
2009/11/26 PHP
理解php Hash函数,增强密码安全
2011/02/25 PHP
php笔记之:AOP的应用
2013/04/24 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
php curl常用的5个经典例子
2017/01/20 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
vue实现购物车加减
2020/05/30 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[00:15]TI9地铁玩家打卡
2019/08/11 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python描述器descriptor详解
2015/02/03 Python
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
python实现Windows电脑定时关机
2018/06/20 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
UI自动化定位常用实现方法代码示例
2020/10/27 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
就业表自我评价分享
2014/02/06 职场文书
物业保安员岗位职责
2014/03/14 职场文书
伦敦奥运会口号
2014/06/13 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
小学美术教学反思
2016/02/17 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers