关于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 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
详解JavaScript函数
Dec 01 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
jquery实现页面加载效果
Feb 21 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
webpack打包优化的几个方法总结
Feb 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
php 缓存函数代码
2008/08/27 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python随机生成指定长度密码的方法
2015/04/04 Python
说一说Python logging
2016/04/15 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
python中dict()的高级用法实现
2019/11/13 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
护士年终考核评语
2014/12/31 职场文书
会计主管岗位职责
2015/04/02 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
mysql分表之后如何平滑上线详解
2021/11/01 MySQL
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB