It took a whole day to solve a very simple problem. The lessons learned are summarized here, and we should take the lessons as a warning in the future.
Problem: the page of news content displayed by a news publishing website on the server after the news is submitted is garbled. Not only that, but all the previously published news has become garbled. Old
The teacher said the problem occurred two days ago.
Now, it has been running well.
At that time, I habitually opened a browser to visit the website and found that the website itself is garbled in firefox. I chose GBK encoding in the browser menu to see the normal webpage. Point
Click the news hyperlink. A cool window is displayed, showing a bunch of garbled characters.
Because the website users are non-technical users, and the website has been running well since its launch, and has not been changed to a database recently, it is unlikely that it is a database problem.
When other codes are normal, only the news content displayed in the pop-up window is garbled. Check the source code of the page and find that the <a> tag is also
No onclick event is bound. At that time, the most important thing was to let the previous news be properly read. Download an html file on the server and use it in the file.
The meta tag specifies gbk encoding, and iconv is used to convert it (iconv -- form = gbk
News.html) the file itself is stored in gbk encoding. Save the file as utf8 encoded (iconv -- from = gbk news.html
-- To = utf8> news.utf8.html), and modify the meta tag to utf8 (<meta
Http-equiv = "Content-Type"
Content = "text/html; charset = utf8">), put it on the server, and click the news. The Garbled text is missing! Therefore, the server
All html files related to news content are backed up, downloaded to the local device, and all of them are converted to utf8 encoded storage using scripts, modify the meta tags and upload them
On the server, the previous news can be read normally. The news to be published can also be released in this way. (At that time, this was all due to the previous garbled problem)
Next, we will consider how to fix the website so that it can be properly displayed when you click on the news submitted on the news submission page. <A> the tag is not bound.
The event processing function, and this pop-up window must be made by javascript. View with firebug and find that prototype. js and lightbox. js are loaded on the page.
And other javascript files. I just had a little understanding of javascript. After browsing prototype. js, I gave up my intention to read it and solve the problem.
Looking back, we found that at first we opened the home page of the website with garbled characters. it was normal to select encoding from the browser menu. Click to jump to the page where the news is submitted. In the pop-up window
Garbled characters are also changed to utf8 In the meta tag. The website homepage clearly uses meta to indicate that it is gb2312 encoded.
At the beginning, we didn't use utf8 encoding to explain it. This makes yourself very depressed. At the same time, you can see that the html header code on the website homepage is:<HTML lang=gb2312
xmlns="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>
The lang attribute of html is used. The Content-Type in meta is,
Encoding is specified in Content-Language. This allows you to become less confident about HTML and HTTP standards, so you hope to fully understand these standards. In
The w3c and unicode websites have searched for a bunch of standard documents and hope they can be used once and for all.
In retrospect, this was not necessary at all. In this step, we can sum up our thinking that we suspect that garbled characters appear because of the server pages, browsers, and pre-communication issues.
Background Code, which does not clearly express their own encoding or does not correctly follow the specified encoding explanation. Let's look back. The reason why I am so skeptical is that I have safely ruled out the database
Factors. So we can sum up our own ideas to say that the problem either occurs between the database and the web server, or between the Web server and the browser. Based on your own considerations, the former can be ruled out
. The problem is probably between the Web server and the browser, because the browser is a tested tool, so let's take a further step, the problem is likely to occur on the Web server.
The browser expresses its encoding method. At this time, either check the background Code and related JavaScript code, or start with the phenomenon, debug the communication process, and locate the specific error link. Such
Compared, the latter is more efficient than the former. If you can proceed with this step, it will be far from solving the problem. However, I have deviated from the problem here. This is the first lesson.
After reading the document for a while, I thought of the pressing problem. I still had to read a lot of documents and felt a panic. I did not calmly estimate the benefits of solving the problem before deciding to read the document,
The amount of time it will take, whether it is necessary, and what problems may occur in the middle. The key is to solve the current problem. As for how to solve the problem fundamentally, is there any need to solve the problem?
It should not be considered at this time.
In this way, a morning has passed. Calm down while eating. In the afternoon, I started to debug the communication process and immediately found that an Ajax call occurred after clicking the hyperlink.
Is the HTTP Request Header captured by httpfox:
POST article/2010/11/1291112086.html
HTTP/1.1
...
X-Requested-With XMLHttpRequest
X-Prototype-Version 1.4.0
Content-Type
application/x-www-form-urlencoded; charset=UTF-8
...
The post request object is an HTML file and generally a CGI script, which is a bit confusing. Lightbox. JS is loaded on the webpage,
Several JS scripts, such as prototype. JS, browsed these files and found that the relevant code segment should be:
// 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]);
}
}
Verify that before the Ajax request, alert (this. content), after the Ajax request, alert
(Response. responseText), found that this. content is the url of the hyperlink, response. responseText is the new
Content. Before contacting the server, you can change the html file of the news content to utf8 encoding. The news of gb2312 encoding is garbled. It is obvious that the data encoding received by ajax from the server does not exist.
Google found that ajax uses UTF-8 encoding by default. Now the problem is clear. You only need to tell the client that it is a gbk encoded content when the news content is displayed.
Or use UTF8 encoding to store the information when submitting the news. The former has the least modification code. At this time, I entered another dead end and tried to make
The ajax of prototypejs uses gbk encoding and httpfox to view the http response for each ajax call.
Header, and found that the Content-Type charset is either utf8 or not, so I want to modify the http response
Content-type in the header. Google has a lot of prototypejs materials.
In fact, this time is very close to the solution. Know ajax
It is a bit strange to request an html. If ajax requests a CGI script, you can modify the CGI script to set http response.
Header. The solution is as follows:
// 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)}
);
},
Then in 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);
?>
Summary:
1) Keep your goals in mind, analyze your ideas and make choices, and do not rely on feelings and inspiration to solve problems.
2) do not pursue technical perfection, especially the perfection of measured power.
3) There are more than one way to solve the problem. First, select and execute. A person does not have to and cannot be a good user. He chooses what he is best.
4) It depends on book exchange and practice. If you have any questions, you can use google as a reference. Do not try to use google to learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
