AJAX在GB2312的中文编码传输 AJAX特殊字符编码正确方法
程序员文章站
2022-03-14 10:43:04
很多可能在转摘过程中失真或未经验证就被转摘，真正使用时却不行，也由此决定自己全方位试验一下，努力还是没有白费，虽然最终得出的结果是很简单的，但其过程对于一个新学ajax的人...
很多可能在转摘过程中失真或未经验证就被转摘，真正使用时却不行，也由此决定自己全方位试验一下，努力还是没有白费，虽然最终得出的结果是很简单的，但其过程对于一个新学ajax的人来说，真是挺累。
欢迎您在使用过程中对新的心得一起跟帖交流，一个思想+一个思想，至少可以产生两个思想。
一、在get发送时：
方法1：在asp服务器端用response.charset="gb2312"界定输出编码给调用客户端
此时客户端不需要做什么转换即可。如下两个文件：
1、客户端js
var xmlhttp;
function createxml(){
if(window.activexobject){
xmlhttp=new activexobject("microsoft.xmlhttp");
}else if(window.xmlhttprequest){
xmlhttp=new xmlhttprequest();
}
}
function startxml(){
createxml();
xmlhttp.onreadystatechange = handlestatechange;
var url="ajaxtext.asp?tm=1&cc"+math.random();
//var sendcontents = 'theinput='+escape(theinput.value);
var regcode="2abc";
xmlhttp.open("get",url,true);
//regcode="regcode="+regcode;
//xmlhttp.setrequestheader("content-length",regcode.length); //可加可不加
//xmlhttp.setrequestheader("cache-control","no-cache");
//xmlhttp.setrequestheader('content-type','application/x-www-form-urlencoded'); //可不加
//xmlhttp.send(null);
//xmlhttp.send("regcode="+escape(regcode));
xmlhttp.send(null);
}
function handlestatechange(){
if (xmlhttp.readystate == 4 && xmlhttp.status==200){
//var divid=document.getelementbyid("results");
retext=xmlhttp.responsetext;
alert(retext);
//if(divid.haschildnodes()){
// divid.removechild(divid.childnodes[0]);
//}
//var result=document.createtextnode(xmlhttp.responsetext);
//divid.appendchild(result);
//document.getelementbyid("results").innerhtml=xmlhttp.responsetext;
}
}
服务器端：
<%response.codepage=936%>
<%response.charset="gb2312"
dim reg
reg=request("regcode")
response.write "王先生·和他的朋友" '可以正确输出。
%>
方法2：在客户端用函数转换(来自网上)。
function gb2utf8(data){
var glbencode = [];
gb2utf8_data = data;
execscript("gb2utf8_data = midb(gb2utf8_data, 1)", "vbscript");
var t=escape(gb2utf8_data).replace(/%u/g,"").replace(/(.{2})(.{2})/g,"%$2%$1").replace(/%([a-z].)%(.{2})/g,"@$1$2");
t=t.split("@");
var i=0,j=t.length,k;
while(++i<j) {
k=t[i].substring(0,4);
if(!glbencode[k]) {
gb2utf8_char = eval("0x"+k);
execscript("gb2utf8_char = chr(gb2utf8_char)", "vbscript");
glbencode[k]=escape(gb2utf8_char).substring(1,6);
}
t[i]=glbencode[k]+t[i].substring(4);
}
gb2utf8_data = gb2utf8_char = null;
return unescape(t.join("%"));
}
此时如果服务器端不指明编码，那么ajax默认为utf-8，就不能在客户端显示，用这个函数就可以。
retext=xmlhttp.responsetext;
retext=gb2utf8(retext);
alert(retext);
3、在火狐浏览器下：具体请参考：下一篇文章
火狐比较简单，他可以支持xmlhttp.responsetext;//firefox,但为了代码简化，建议用上面的直接做好编码。
但如果为了通用，就按post下面介绍的方法来做吧。
二、在post发送时：
对于常规的中文，上述的get方法在post也是可以的，但网上有一篇文章提到了部分符号不能显示的，比如：下一篇文章中的“test·test+test·”，（中间是间隔号）测试过了，的确在服务器端界定编码后输出给客户端也不能显示。
如果按照文中所说的，
发送端用xmlhttp.send("regcode="+escape(regcode));
然后在服务器端将接收的数据套上两个编码encodeuricomponent(escape(xxxxxxx))，则显示的结果是：test%25u7a5eest%2520test，同样不行。另外这个思路应是不对的，不知道这篇文章在网上被转抄时是否本身就有错，按理在客户端用escape编码传送后，在服务器端就应该反编码。或者request本身就有解码的作用。不需要再二次、三次编码。况且查了一下，escape和encodeuricomponent也无法对特殊字符编码。
我在服务器端做了如下输出：
test2="test·test+test·回馈："
response.write test2&"前面是服务器直接输出的而非接收的特殊符号“·”间隔号。后面是接收的数据（内容与原ajax发送的一样，用于对比）："
也就是说直接在服务器端生成一个同样的含特殊字符，这个服务器端文件已经用<%response.charset="gb2312"%>定义好编码为gb2312。但输出的结果是，在服务器端生成的test2="test·test+test·回馈："可以正常输出，而接收的ajax值就不行了。
即使在客户端用js三个编码参数escape()\encodeuri() \encodeuricomponent() 全部试过去，然后在服务器商反编码再输出，也是不行。这说明字串中的特殊符号在服务器端接收时就已经变形了。
现在问题界定在编码传递上了，为了说明这个问题，我又做了一个小试验：就是把这个字串赋值给asp的一个变量再用asp变量来赋值给js，如下：
<%
para="test·test+test·/"
para=server.urlencode(para)
%>
然后转手给js变量，如下：
xmlhttp.open("post",url,true);
var regcode="<%=para%>";
xmlhttp.setrequestheader('content-type','application/x-www-form-urlencoded;charset=gb2312');
xmlhttp.send("regcode="+regcode);
结果正常了，这充分说明asp的server.urlencode能完整对特殊字符编码。而js还是有欠缺。
那现在怎么办？
在实在没办法的情况下，我想到了即然encodeuricomponent()可以比encode()对更多特殊字符编码，那么不妨像多重md5加密一样，增加强化剂，于是我套用了两个encodeuricomponent()，现在代码是：
var regcode="test·test+test·/";
xmlhttp.setrequestheader('content-type','application/x-www-form-urlencoded;charset=gb2312');
xmlhttp.send("regcode="+encodeuricomponent(encodeuricomponent(regcode)));
上面是客户端的，再把服务器端改成：
<script language="javascript" runat="server">
function decodestr(str){
return decodeuricomponent(decodeuricomponent(str));
}
</script>
<%
dim reg
reg=request("regcode")
test2="test·test+test·回馈："
response.write test2&"前面是服务直接输入的而非接收的特殊符号“·”间隔号。后面是接收的数据（内容与原ajax发送的一样，用于对比）："
response.write decodestr(reg)
%>
终于完美看到了ajax输出的特殊字符。间隔号和+号都出来了，
“test·test+test·/”
为了进一步验证，我把下面encodeuricomponent也无法编码的个别特殊字符全加进来了，如下：
var regcode="汉字开头：! @ # $& * ( ··) = : / ; ? + 结尾，中间全是特殊字符。";
结果也正常了，太棒！
不过一般ajax传给服务器的数据是要应用的，否则没有意义，为了再进一步验证数据是否一样，我把服务器端做了小修改，如下：
<%
dim reg
reg=request("regcode")
test2="汉字开头：! @ # $& * ( ··) = : / ; ? + 结尾，中间全是特殊字符。"
if test2<>decodestr(reg) then
response.write "不同"
else
response.write "相同"
end if
%>
很兴奋。客户端输出“相同”，这下可以放心全面应用了。
总结：
1、ajax客户端双重套用encodeuricomponent()对post的数据编码。
2、服务器端对应地用decodeuricomponent()双重解码即可：
<script language="javascript" runat="server">
function decodestr(str){
return decodeuricomponent(decodeuricomponent(str));
}
</script>
3、在接收responsetext时，不需要再反编码了。直接：retext=xmlhttp.responsetext;
4、服务器端的这行仍然不可缺：<%response.charset="gb2312"%>，一般在asp文件中，都有<%@language="vbscript" codepage="936"%>这行，但这行可以去掉，唯独不能去掉<%response.charset="gb2312"%>，否则出错。
现在开始，把encodeuricomponent()/decodeuricomponent()背熟就可以。
附：以下几个编码方法摘自js手册，供参考：
escape() 方法：
采用iso latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ascii字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。unescape方法与此相反。不会被此方法编码的字符： @ * / +
注释：可以使用 unescape() 对 escape() 编码的字符串进行解码。但ecmascript v3 反对使用这种方法，应用使用 decodeuri() 和 decodeuricomponent() 替代它。
encodeuri() 方法： ------ 注意后面一个是大小的i——“i”不是l，下面的decodeuri也不是l。
把uri字符串采用utf-8编码格式转化成escape格式的字符串。不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + '
encodeuricomponent() 方法：
把uri字符串采用utf-8编码格式转化成escape格式的字符串。与encodeuri()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了uri的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后url将显示错误。不会被此方法编码的字符：! * ( )
引用内容
因此，对于中文字符串来说，如果不希望把字符串编码格式转化成utf-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用escape。如果你的页面是gb2312或者其他的编码，而接受参数的页面是utf-8编码的，就要采用encodeuri或者encodeuricomponent。
另外，encodeuri/encodeuricomponent是在javascript1.5之后引进的，escape则在javascript1.0版本就有。
decodeuri() 函数
decodeuri() 函数可对 encodeuri() 函数编码过的 uri 进行解码。
<script type="text/javascript">
var test1=http://www.w3school.com.cn/my first/
document.write(encodeuri(test1)+ "<br />")
document.write(decodeuri(test1))
</script>
decodeuricomponent() 函数：可对 encodeuricomponent() 函数编码的 uri 进行解码。
unescape()：对escape解码。
作者：非物理生命博客traindiy
欢迎您在使用过程中对新的心得一起跟帖交流，一个思想+一个思想，至少可以产生两个思想。
一、在get发送时：
方法1：在asp服务器端用response.charset="gb2312"界定输出编码给调用客户端
此时客户端不需要做什么转换即可。如下两个文件：
1、客户端js
复制代码 代码如下:
var xmlhttp;
function createxml(){
if(window.activexobject){
xmlhttp=new activexobject("microsoft.xmlhttp");
}else if(window.xmlhttprequest){
xmlhttp=new xmlhttprequest();
}
}
function startxml(){
createxml();
xmlhttp.onreadystatechange = handlestatechange;
var url="ajaxtext.asp?tm=1&cc"+math.random();
//var sendcontents = 'theinput='+escape(theinput.value);
var regcode="2abc";
xmlhttp.open("get",url,true);
//regcode="regcode="+regcode;
//xmlhttp.setrequestheader("content-length",regcode.length); //可加可不加
//xmlhttp.setrequestheader("cache-control","no-cache");
//xmlhttp.setrequestheader('content-type','application/x-www-form-urlencoded'); //可不加
//xmlhttp.send(null);
//xmlhttp.send("regcode="+escape(regcode));
xmlhttp.send(null);
}
function handlestatechange(){
if (xmlhttp.readystate == 4 && xmlhttp.status==200){
//var divid=document.getelementbyid("results");
retext=xmlhttp.responsetext;
alert(retext);
//if(divid.haschildnodes()){
// divid.removechild(divid.childnodes[0]);
//}
//var result=document.createtextnode(xmlhttp.responsetext);
//divid.appendchild(result);
//document.getelementbyid("results").innerhtml=xmlhttp.responsetext;
}
}
服务器端：
复制代码 代码如下:
<%response.codepage=936%>
<%response.charset="gb2312"
dim reg
reg=request("regcode")
response.write "王先生·和他的朋友" '可以正确输出。
%>
方法2：在客户端用函数转换(来自网上)。
复制代码 代码如下:
function gb2utf8(data){
var glbencode = [];
gb2utf8_data = data;
execscript("gb2utf8_data = midb(gb2utf8_data, 1)", "vbscript");
var t=escape(gb2utf8_data).replace(/%u/g,"").replace(/(.{2})(.{2})/g,"%$2%$1").replace(/%([a-z].)%(.{2})/g,"@$1$2");
t=t.split("@");
var i=0,j=t.length,k;
while(++i<j) {
k=t[i].substring(0,4);
if(!glbencode[k]) {
gb2utf8_char = eval("0x"+k);
execscript("gb2utf8_char = chr(gb2utf8_char)", "vbscript");
glbencode[k]=escape(gb2utf8_char).substring(1,6);
}
t[i]=glbencode[k]+t[i].substring(4);
}
gb2utf8_data = gb2utf8_char = null;
return unescape(t.join("%"));
}
此时如果服务器端不指明编码，那么ajax默认为utf-8，就不能在客户端显示，用这个函数就可以。
复制代码 代码如下:
retext=xmlhttp.responsetext;
retext=gb2utf8(retext);
alert(retext);
3、在火狐浏览器下：具体请参考：下一篇文章
火狐比较简单，他可以支持xmlhttp.responsetext;//firefox,但为了代码简化，建议用上面的直接做好编码。
但如果为了通用，就按post下面介绍的方法来做吧。
二、在post发送时：
对于常规的中文，上述的get方法在post也是可以的，但网上有一篇文章提到了部分符号不能显示的，比如：下一篇文章中的“test·test+test·”，（中间是间隔号）测试过了，的确在服务器端界定编码后输出给客户端也不能显示。
如果按照文中所说的，
发送端用xmlhttp.send("regcode="+escape(regcode));
然后在服务器端将接收的数据套上两个编码encodeuricomponent(escape(xxxxxxx))，则显示的结果是：test%25u7a5eest%2520test，同样不行。另外这个思路应是不对的，不知道这篇文章在网上被转抄时是否本身就有错，按理在客户端用escape编码传送后，在服务器端就应该反编码。或者request本身就有解码的作用。不需要再二次、三次编码。况且查了一下，escape和encodeuricomponent也无法对特殊字符编码。
我在服务器端做了如下输出：
复制代码 代码如下:
test2="test·test+test·回馈："
response.write test2&"前面是服务器直接输出的而非接收的特殊符号“·”间隔号。后面是接收的数据（内容与原ajax发送的一样，用于对比）："
也就是说直接在服务器端生成一个同样的含特殊字符，这个服务器端文件已经用<%response.charset="gb2312"%>定义好编码为gb2312。但输出的结果是，在服务器端生成的test2="test·test+test·回馈："可以正常输出，而接收的ajax值就不行了。
即使在客户端用js三个编码参数escape()\encodeuri() \encodeuricomponent() 全部试过去，然后在服务器商反编码再输出，也是不行。这说明字串中的特殊符号在服务器端接收时就已经变形了。
现在问题界定在编码传递上了，为了说明这个问题，我又做了一个小试验：就是把这个字串赋值给asp的一个变量再用asp变量来赋值给js，如下：
复制代码 代码如下:
<%
para="test·test+test·/"
para=server.urlencode(para)
%>
然后转手给js变量，如下：
复制代码 代码如下:
xmlhttp.open("post",url,true);
var regcode="<%=para%>";
xmlhttp.setrequestheader('content-type','application/x-www-form-urlencoded;charset=gb2312');
xmlhttp.send("regcode="+regcode);
结果正常了，这充分说明asp的server.urlencode能完整对特殊字符编码。而js还是有欠缺。
那现在怎么办？
在实在没办法的情况下，我想到了即然encodeuricomponent()可以比encode()对更多特殊字符编码，那么不妨像多重md5加密一样，增加强化剂，于是我套用了两个encodeuricomponent()，现在代码是：
复制代码 代码如下:
var regcode="test·test+test·/";
xmlhttp.setrequestheader('content-type','application/x-www-form-urlencoded;charset=gb2312');
xmlhttp.send("regcode="+encodeuricomponent(encodeuricomponent(regcode)));
上面是客户端的，再把服务器端改成：
复制代码 代码如下:
<script language="javascript" runat="server">
function decodestr(str){
return decodeuricomponent(decodeuricomponent(str));
}
</script>
<%
dim reg
reg=request("regcode")
test2="test·test+test·回馈："
response.write test2&"前面是服务直接输入的而非接收的特殊符号“·”间隔号。后面是接收的数据（内容与原ajax发送的一样，用于对比）："
response.write decodestr(reg)
%>
终于完美看到了ajax输出的特殊字符。间隔号和+号都出来了，
“test·test+test·/”
为了进一步验证，我把下面encodeuricomponent也无法编码的个别特殊字符全加进来了，如下：
复制代码 代码如下:
var regcode="汉字开头：! @ # $& * ( ··) = : / ; ? + 结尾，中间全是特殊字符。";
结果也正常了，太棒！
不过一般ajax传给服务器的数据是要应用的，否则没有意义，为了再进一步验证数据是否一样，我把服务器端做了小修改，如下：
复制代码 代码如下:
<%
dim reg
reg=request("regcode")
test2="汉字开头：! @ # $& * ( ··) = : / ; ? + 结尾，中间全是特殊字符。"
if test2<>decodestr(reg) then
response.write "不同"
else
response.write "相同"
end if
%>
很兴奋。客户端输出“相同”，这下可以放心全面应用了。
总结：
1、ajax客户端双重套用encodeuricomponent()对post的数据编码。
2、服务器端对应地用decodeuricomponent()双重解码即可：
<script language="javascript" runat="server">
function decodestr(str){
return decodeuricomponent(decodeuricomponent(str));
}
</script>
3、在接收responsetext时，不需要再反编码了。直接：retext=xmlhttp.responsetext;
4、服务器端的这行仍然不可缺：<%response.charset="gb2312"%>，一般在asp文件中，都有<%@language="vbscript" codepage="936"%>这行，但这行可以去掉，唯独不能去掉<%response.charset="gb2312"%>，否则出错。
现在开始，把encodeuricomponent()/decodeuricomponent()背熟就可以。
附：以下几个编码方法摘自js手册，供参考：
escape() 方法：
采用iso latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ascii字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。unescape方法与此相反。不会被此方法编码的字符： @ * / +
注释：可以使用 unescape() 对 escape() 编码的字符串进行解码。但ecmascript v3 反对使用这种方法，应用使用 decodeuri() 和 decodeuricomponent() 替代它。
encodeuri() 方法： ------ 注意后面一个是大小的i——“i”不是l，下面的decodeuri也不是l。
把uri字符串采用utf-8编码格式转化成escape格式的字符串。不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + '
encodeuricomponent() 方法：
把uri字符串采用utf-8编码格式转化成escape格式的字符串。与encodeuri()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了uri的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后url将显示错误。不会被此方法编码的字符：! * ( )
引用内容
因此，对于中文字符串来说，如果不希望把字符串编码格式转化成utf-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用escape。如果你的页面是gb2312或者其他的编码，而接受参数的页面是utf-8编码的，就要采用encodeuri或者encodeuricomponent。
另外，encodeuri/encodeuricomponent是在javascript1.5之后引进的，escape则在javascript1.0版本就有。
decodeuri() 函数
decodeuri() 函数可对 encodeuri() 函数编码过的 uri 进行解码。
<script type="text/javascript">
var test1=http://www.w3school.com.cn/my first/
document.write(encodeuri(test1)+ "<br />")
document.write(decodeuri(test1))
</script>
decodeuricomponent() 函数：可对 encodeuricomponent() 函数编码的 uri 进行解码。
unescape()：对escape解码。
作者：非物理生命博客traindiy