Ajax 乱码

作者：msf 来源：ITPOW（原创）日期：2007-1-26

看了第一个 Ajax 程序，似乎没有什么问题了，我们再来看看下面的程序，与第一个 Ajax 程序几乎相同，不同之处仅限于读取的内容不同，第一个 Ajax 读取的是一个样式表，这次读取的是ITPOW的首页。

<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XMLHTTP</title>
</head>

<body>

<div id="board"></div>

<script type="text/javascript" language="javascript">
<!--
function CreateHTTPObject()
{
    var xmlhttp;
    
    try
    {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
        try
        {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e)
        {
            xmlhttp = false;
        }
    }
    
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
        try
        {
            xmlhttp = new XMLHttpRequest();
        }
        catch (e)
        {
            xmlhttp=false;
        }
    }
    
    if (!xmlhttp && window.createRequest)
    {
        try
        {
            xmlhttp = window.createRequest();
        }
        catch (e)
        {
            xmlhttp=false;
        }
    }
    
    return xmlhttp;
}


//使用全局变量 xmlhttp
function OnReadyStateChng()
{
    if (xmlhttp.readyState == 0)
    {
        document.getElementById("board").innerHTML = "尚未初始化";
    }
    else if (xmlhttp.readyState == 1)
    {
        document.getElementById("board").innerHTML = "正在加载";
    }
    else if (xmlhttp.readyState == 2)
    {
        document.getElementById("board").innerHTML = "加载完毕";
    }
    else if (xmlhttp.readyState == 3)
    {
        document.getElementById("board").innerHTML = "正在处理";
    }
    else if (xmlhttp.readyState == 4)
    {
        document.getElementById("board").innerHTML = xmlhttp.responseText; //处理完毕
    }
    
}

var xmlhttp = CreateHTTPObject();
if (xmlhttp)
{
    xmlhttp.open("GET", "http://www.itpow.com/", true);
    xmlhttp.onreadystatechange = OnReadyStateChng;
    xmlhttp.send(null);
}
-->
</script>

</body>

</html>

[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

问题来了，显示结果为乱码。

为什么会是乱码？

这是由于 Ajax 通信采用的是 UTF-8 编码，而我们的网页是 GB2312，于是乱码就出现了。

简单说一下各种编码。

运行记事本，输入“中国人”，保存，编码选“ANSI”，查看文件大小为 6 字节。

运行记事本，输入“中国人”，保存，编码选“UTF-8”，查看文件大小为 12 字节。

编码方式不同，占用的字节数不同，于是解析时就会出现问题了。

那为什么不使用一种编码方式呢？这个由计算机发展历史有关，起初计算机只应用于英语，也就只有 ASCII 码，后来中文加入，也就有了 GB2312、GBK、BIG5，有人说一个中国怎么也弄这么多编码，没办法，中国有简体有繁体，中国汉字那么多，在手机里使用 GBK 码现在还不成熟。世界上还有韩文、日本文、拉丁文，编码太多了，有没有一个统一的编码呢？就产生了 Unicode，而 UTF-8 与 UTF-16 是对 Unicode 编码的转换或扩展。更多知识请参见字符编码。

说了这么多，你倒是给个解决方案啊。

我们就事论事，对于本文的示例，我们的解决办法是，将ITPOW首页中的：

<?xml version="1.0" encoding="gb2312"?>
改为
<?xml version="1.0" encoding="utf-8"?>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
改为
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

请看下面的示例：

<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>XMLHTTP</title> </head> <body> <div id="board"></div> <script type="text/javascript" language="javascript">  </script> </body> </html>
[Ctrl+A 全部选择提示：您可先修改部分代码，再按运行]

是不是能够显示中文了？但布局很乱，这是由于网页数据被读取下来后，找不到对应的样式表文件的原因。

我改了，可是仍然是乱码。

这说明您只改了这几个文字，并没有改这个网页的存储编码，您需要另存为一次，大多数网页编辑器会自动识别这些文字，然后按照您标明的编码来存储，如果您是使用的记事本编辑网页，那么它就没那么聪明了，可能需要您去选择编码。

我存储编码也改了，仍然是乱码。

由于网站整体规划的原因，我们上述的运行代码的编码是 GB2312，传回来的数据是 UTF-8，这形成了混合的编码，大多数浏览器会自动识别混合的编码，个别浏览器（测试发现 Netscape 7.0）无法自动识别，这是浏览器的原因，不过不用担心的是，当今流行浏览器都是很聪明的。