Ajax编码和Ajax乱码解决

50 views
Skip to first unread message

youn...@gmail.com

unread,
Nov 27, 2008, 10:28:31 PM11/27/08
to 工作记录
AJAX乱码解决
用过AJAX的朋友肯定知道javascript是使用UTF-8国际编码,即每个汉字用4个字节来存储,但是这就造成了用AJAX来send数
据的时候出现乱码。

Ajax乱码产生主要有2个原因
1. xtmlhttp 返回的数据默认的字符编码是utf-8,如果前台页面是gb2312或者其它编码数据就会产生乱码
2. post方法提交数据默认的字符编码是utf-8,如果后台是gb2312或其他编码数据就会产生乱码

一、使用encodeURIComponent加上修改 Content-Type 为 application/x-www-form-
urlencoded" 来把数据统一编码成 url 格式,但是这样做有一个弊端,就是太大的数据往往会出错。
二、是通过vbscript 的写的函数把数据转成gb2312格式的,我个人觉得这种方法比较好。有兴趣的朋友可以到网上去查一下。
三、客户端、服务器端全部采用Utf-8编码,且url发送中文字采用escape编码,unescape解码。而且效率高,而且符合目前的形
式,utf-8编码本身就是一种比较优秀的编码。

今天突发奇想,AJAX调用的时候会不会发送cookie 呢?马上写了一个程序测试一下,果然能,这样就可以在调用ajax之前,先把数据通过
javascript写到cookie里,然后再send就可以将cookie里的数据发送出去了,太爽了!!

演示地址:http://cn5.cn/ajax/ajax12.htm

客户端代码 ajax.htm

<title>AJAX使用cookie传值例子</title>
<script>
var oDiv
var xh
function getXML()
{
setcookie($('name').value,$('val').value);
oDiv = document.all.m
oDiv.innerHTML = "正在装载,请稍侯……."
oDiv.style.display= ""
xh = new ActiveXObject("Microsoft.XMLHTTP")
xh.onreadystatechange = getReady
xh.open("POST","a.php",false)
xh.send();
}

function getReady()
{
if(xh.readyState==4)
{
if(xh.status==200)
{
oDiv.innerHTML = "完成"
}
else
{
oDiv.innerHTML = "抱歉,装载数据失败。原因:" + xh.statusText
}
}
} //author : longbill www.longbill.cn

function setcookie(name,value)
{
var cookiestr=name+"="+value+";";
var expires = "";
var cookieexp=60*60*1000;
var d = new Date();
d.setTime( d.getTime() + cookieexp);
expires = "expires=" + d.toGMTString()+";";
document.cookie = cookiestr+ expires;
}
function $(a)
{
return document.getElementById(a);
}
</script>

<body >
AJAX使用cookie传值例子:

<form name=myform>
name:<input id=name value="变量名甚至可以是中文" size=20>

value:<input type=text size=20 id=val value=这里>

<input onclick="getXML()" type="button" value="送出数据">
<input onclick="if(xh && xh.responseText) {alert(xh.responseText);}"
type="button" value="显示返回结果">

<div id=m bgcolor=blue>在此显示状态</div>
<input type=button onclick="alert(document.cookie)" value=显示本地COOKIE>
</form>

服务器端代码 a.php

<?
Header("Content-type: text/html;charset=GB2312");
echo "以下是您送出的所有COOKIE变量及其值n";
print_r($_COOKIE);
?>

----------------

ajax乱码解决总结
第一,javascript沿用java的字符处理方式,内部是使用unicode来处理所有字符的,
第二,utf-8是每个汉字(unicode字符)用3个字节来存储。
第三,用utf-8来send数据是不会出现乱码的,是后台程序没有正确解码才会出现乱码。
第四,ajax发送数据的时候如果修改 Content-Type 为 application/x-www-form-urlencoded",肯定
是用post方式,而“太大的数据往往会出错”是用GET方式发送数据造成的。
第五,用vbscript写的函数是用来把数据转成gbk编码(操作系统默认的编码方式。如果在繁体系统上就是big5之类的编码)的,而不是
gb2312,两者的编码字符数量相差3倍左右。
第六,用cookie来发送数据,一是很容易溢出,二是要不停的擦屁股,否则cookie里面的数据在每个http请求(包括图片和脚本请求)中都会被
发送。三是并发几个http请求的时候,没有办法指定那个cookie是要发送给那个http请求的。

------------------------

用AJAX来GET回一个页面时,RESPONSETEXT里面的中文多半会出现乱码,这是因为xmlhttp在处理返回的responseText的
时候,是把resposeBody按UTF-8编码进解码考形成的,如果服务器送出的确实是UTF-8的数据流的时候汉字会正确显示,而送出了GBK编
码流的时候就乱了。解决的办法就是在送出的流里面加一个HEADER,指明送出的是什么编码流,这样XMLHTTP就不会乱搞了。

PHP:header("Content-Type:text/html;charset=GB2312");
ASP:Response.Charset("GB2312")
JSP:response.setHeader("Charset","GB2312");

youn...@gmail.com

unread,
Nov 27, 2008, 10:49:43 PM11/27/08
to 工作记录
具体方法如下:XMLHttpRequest对象有一个setRequestHeader("header","value")方法,这个方法带两个参
数,第一个参数(header)指定要添加到HTTP请求首部的键的名称,第二个参数(value)指定这个键的对应值,如果我们用
XMLHttpRequest传送的对象为简体中文数据,则可以用下面的命令在HTTP请求头部进行声明setRequestHeader
("Content-Type","gb2312"),这样浏览器就能用正确的字符集解释传递的数据,防止乱码

youn...@gmail.com

unread,
Nov 27, 2008, 10:56:10 PM11/27/08
to 工作记录
ajax GET方式提交,中文参数乱码的问题zz
最近在研究AJAX是,自己做了一个程序测试,发现在使用get方式提交时,如果参数中有中文的话,会出现乱码问题,而且取回的
XMLHttpRequest.resopnseText中如果有中文,将其值在页面上显示后也是乱码。Google一下,发现大多是针对post方式
提交的解决办法,

于是自己通过查看别人的文章,下来后自己调试,解决了get方式提交中文参数乱码的问题:

我的环境是表单页面index.html的编码是UTF-8:下面是我的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Demo1.html</title>

<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<!-- HTTP 1.1 -->
<meta http-equiv="Cache-Control" content="no-store"/>
<!-- HTTP 1.0 -->
<meta http-equiv="Pragma" content="no-cache"/>
<!-- Prevents caching at the Proxy Server -->
<meta http-equiv="Expires" content="0"/>
<script language="javascript">
var httpRequest=null;
function createHttpRequest() {
if(window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else if(window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
if(!request) {
request = new ActiveXObject("Msxml2.XMLHTTP");
}
return request;
}
}

function ok() {
var url = "handel.jsp?name="+encodeURIComponent
(document.form1.name.value);
httpRequest = createHttpRequest();
httpRequest.onreadystatechange = aa;
httpRequest.open("GET",url,true);
httpRequest.send(null);
}

function aa(){
if(httpRequest.readyState == 4) {
if(httpRequest.status == 200) {
document.getElementById("hh").innerText =
httpRequest.responseText;
}
}
}
</script>
</head>
<body>
<form name="form1">
<input type="text" size="24" name="name">
<input type="button" value="提交" onclick="ok()"><br>
你输入了:<textarea rows="3" cols="20" readonly id="hh"></textarea>
</form>
</body>
</html>


在构造url是用javascript自带的encodeURIComponent方法将参数进行编码,下面是我的代码

var url = "handel.jsp?name="+encodeURIComponent
(document.form1.name.value);
httpRequest = createHttpRequest();
httpRequest.onreadystatechange = aa;
httpRequest.open("GET",url,true);
httpRequest.send(null);


在目的地的handel.jsp页面(该页面显示编码也是UTF-8)上,先用iso-8859-1将request.getparameter()方
法取回的参数值,转成字节串,

然后在用UTF-8将字节串转成字符串,就好了,下面是handel.jsp的代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
byte[] b = name.getBytes("iso-8859-1");
for(int i=0;i<b.length;i++) {
System.out.println(b[i]);
}
System.out.println("name:"+name);
System.out.println(new String(b,"UTF-8"));
response.setContentType("text/plain");
response.setHeader("Cache-Control","no-cache");
response.setHeader("Charset","UTF-8");
out.println("Welcome "+name);
%>
为了解决返回值XMLHttpRequest.resopnseText中文乱码的问题,需要设置下面这句话:

response.setHeader("Charset","UTF-8");

youn...@gmail.com

unread,
Nov 28, 2008, 4:05:13 AM11/28/08
to 工作记录
最后一个管用
Reply all
Reply to author
Forward
0 new messages