关于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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 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
几种显示数据的方法的比较
2006/10/09 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
jQuery EasyUI 入门必看
2016/06/03 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
荷兰超市:DEEN
2018/03/14 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
秘书行业自我鉴定范文
2013/12/30 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers