一次乱码问题解决过程反思

               

一个很简单的问题花了一整天的时间去解决,教训总结在这里,以后当引以为戒

问题:服务器上的一个新闻发布网站在提交新闻后显示出来的新闻内容页面是乱码。不仅如此,以前发布过的所有新闻内容也都变成了乱码。老师说问题这两天才出现,以前一直运行良好。

当时习惯性地马上打开浏览器访问网站,发现网站在firefox中本身就是乱码,在浏览器菜单中选择了GBK编码看到了正常的网页。点击新闻超链接,这时候弹出一个很酷的窗口,里面显示一堆乱码。

因为网站的使用者都是非技术用户,而且网站从上线到现在一直运行良好,自己最近也没有改过数据库,所以感觉不太可能是数据库的问题。

其他部分编码都正常后,只有弹出窗口中显示的新闻内容是乱码。查看了一下页面源代码,发现<a>标签上也没有绑定onclick的处理事件。当时最要紧的事是先让以前发布的新闻能正常阅读。把服务器上的一个html文件download下来,发现在文件中用meta标签指定了gbk编码,用iconv试着转换了一下(iconv --form=gbknews.html)发现这个文件本身也是用gbk编码存储的。自己把文件另存为utf8编码(iconv --from=gbk news.html--to=utf8 > news.utf8.html),并把meta标签也修改成了utf8(<metahttp-equiv="Content-Type"content="text/html;charset=utf8">),放到服务器上去,然后点击这条新闻,发现乱码没了!于是把服务器上的所有关于新闻内容的html文件都做了个备份,然后下载到本地,用脚本把它们全转换成utf8编码存储,并把其中的meta标签都做了修改,再上传到服务器上,此刻以前发布的新闻都可以正常阅读了。将要发布的新闻也可以用这样的方法暂发布上去。(当时这么做完全是出于前几次乱码问题的经验)

接下来考虑怎么样修复网站,使得通过新闻提交页面提交的新闻点击时都能正常显示。<a>标签上并没有绑定事件处理函数,而这个弹出窗口一定是javascript做的。用firebug查看,发现页面加载了prototype.js和lightbox.js等几个javascript文件。自己只是略懂javascript的皮毛,浏览了一下prototype.js后,放弃了读懂它然后解决问题的打算。

回过头来发现一开始自己打开网站主页面时也是乱码,通过浏览器菜单选择编码才正常。点击跳转到提交新闻页面开始也是乱码。弹出窗口中的乱码也是修改了meta标签中的charset为utf8才正常。网站主页面上明明是用meta来说明过它自己是gb2312编码的,firefox一开始也没有用utf8编码去解释它。这让自己非常郁闷。同时,自己看到网站主页面上的html头部代码是: 
<HTML lang=gb2312xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>��������</TITLE>
<META http-equiv=Content-Type content="text/html;charset=gb2312">
<META http-equiv=Content-Language content=UTF-8>

使用了html的lang属性,meta中的Content-Type,Content-Language三个地方都指定了编码。这让自己越发对HTML和HTTP的相关标准不自信,于是希望能彻底弄明白这些相关标准。在w3c和unicode网站上搜索了一堆标准文档回来,希望能一劳永逸

事后回想,发现这根本没有必要。到这一步,自己的思路总结起来其实就是在怀疑乱码的出现是因为服务端页面、浏览器、与此次通信相关的前后台代码,它们没有清楚地表达自己本身的编码或者没有正确地按照指定的编码解释。再往回看看,自己之所以这么怀疑,是因为自己比较有把握地排除了数据库的因素。所以自己的思路总结起来可以说,问题要么出现在数据库和web服务器之间,要么出现在web服务器和浏览器之间。而根据自己的考虑,前者是可以排除的。问题很可能就在web服务器和浏览器之间,因为浏览器是久经考验的工具,所以再细分一步,问题极可能就出现在web服务器上的相关代码没有清楚地向浏览器表达自己的编码方式。那么这个时候,要么检查后台代码和相关javascript代码,要么从现象入手,调试通信过程,定位到具体的错误环节。这样一比较,自然后者较前者有效率。如果思路能走到这一步,那离解决问题也就不远了。自己却偏偏在这里偏离了问题,南辕北辙。这是第一个教训。

看了一会儿文档,想起来问题的紧迫,还剩下很多文档要看,感到一阵恐慌。自己在决定看文档前并没有冷静地估计这对解决问题有什么好处,会花费多少时间,有没有这个必要,中间可能会出现哪些问题。关键是要解决眼前的问题,至于根本上解决问题,怎么样去解决,有没有解决的必要,有没有必要自己去解决,都不应该在这个时候考虑。

这样,一个上午的时间过去了。吃饭的时候冷静了一下。下午先从调试通信过程入手,马上发现,点击超链接后发生了一次ajax调用,下面是用httpfox抓取到的HTTP request header:

POST article/2010/11/1291112086.htmlHTTP/1.1
...
X-Requested-With    XMLHttpRequest
X-Prototype-Version    1.4.0
Content-Type   application/x-www-form-urlencoded; charset=UTF-8
...

其中post的请求对象是一个html文件,一般都应该是一个CGI脚本,这一点让人有点困惑。网页上加载了lightbox.js,prototype.js等几个js脚本,浏览了一下这几个文件,发现相关的代码段应该是:

       // Begin Ajax request based off of the href of the clicked linked
       loadInfo: function() {
               var myAjax = new Ajax.Request(
       this.content,
       {method: 'post', parameters: '', onComplete:this.processInfo.bindAsEventListener(this)}
               );

       },

       // Display Ajax response
       processInfo: function(response){
               info = "<div id='lbContent'>" + response.responseText +"</div>";
               new Insertion.Before($('lbLoadMessage'), info)
               $('lightbox').className = "done";
               this.actions();
       },

       // Search through new links within the lightbox, and attach click event
       actions: function(){
               lbActions = document.getElementsByClassName('lbAction');

               for(i = 0; i < lbActions.length; i++) {
                       Event.observe(lbActions[i], 'click',this[lbActions[i].rel].bindAsEventListener(this), false);
                       lbActions[i].onclick = function(){return false;};
               }

       },
// Onload, make all links that need to trigger a lightbox active
function initialize(){
       addLightboxMarkup();
       lbox = document.getElementsByClassName('lbOn');
       for(i = 0; i < lbox.length; i++) {
               valid = new lightbox(lbox[i]);
        }
}

验证一下,在ajax请求之前,alert(this.content),在ajax请求之后,alert(response.responseText),发现this.content就是超链接的url,response.responseText就是新闻内容。联系到之前把新闻内容html文件改成utf8编码能正常显示,gb2312编码的新闻显示乱码,很明显是ajax从服务器收到的数据编码没有表达清楚,google了一下发现,ajax默认使用utf8编码。现在问题清楚了,只要在显示新闻内容的时候告诉客户端这是一段gbk编码的内容就可以了,或者在提交新闻的时候都使用UTF8编码来存储。前者修改代码量最少。这个时候自己又走进了另一个死胡同,自己一个劲儿地想怎么样让prototypejs的ajax使用gbk编码,又用httpfox查看了每次ajax调用时的http responseheader,发现其中的Content-Type的charset要么是utf8要么没有,所以又想着怎么样去修改http responseheader中的content-type。又一头扎进去,google了很多prototypejs的资料。

其实这个时候离解决已经很接近了。自己知道ajaxrequest了一个html有点奇怪,也知道如果ajax请求的是一个CGI脚本就可以修改这个CGI脚本来设置http responseheader了。这就是自己后来的解决方法:

       // Begin Ajax request based off of the href of the clicked linked
       loadInfo: function() {
       var param='url='+this.content;
               var myAjax = new Ajax.Request(
       'test.php',
       {method: 'get', parameters: param, onComplete:this.processInfo.bindAsEventListener(this)}
               );

       },
然后在test.php中:

<?php
$mile_stone=1290736520;
$url = $_GET['url'];
#if(empty($url)) { echo "����ϵ����Ա"; }
$file_time = basename($url, '.html');
settype($file_time, "integer");
if($file_time > $mile_stone) header("Content-Type:text/html;charset=gb2312");
else header("Content-Type: text/html;charset=utf8");
readfile($url);
?>

总结:
1) 时刻记住自己的目标,理智分析和取舍,不要依靠感觉和灵感来解决问题。
2)不要追求技术上的完美,尤其是不自量力的完美。
3)解决问题不止一种方法,先想再选最后执行。一个人不必也不可能样样通,选择自己最擅长的。
4)学习要靠书本交流和实践,有问题可以google一下作为参考。不要试图使用google去学习。

           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

猜你喜欢

转载自blog.csdn.net/qq_43668159/article/details/87442867