Home > Developer > JavaScript
Recently, I am working on a project. Because the page uses cookies, I need to determine whether the user's browser supports cookies and prompt users how to enable the Cookie function of the browser. At the same time, multilingual support, including Chinese, Vietnamese, Japanese, and English, must be configured for the entire project. The project uses jQuery parsing to read the XML language configuration file for language scheduling. This is the test source code for jQuery to parse and read XML files.
Directory structure:
Main.css file code:
Copy codeThe Code is as follows:
@ CHARSET "UTF-8 ";
*{
Margin: 0px;
Padding: 0px;
}
Body {
Width: 800px;
Text-align: left;
Font-size: 62.5%;
Font: normal 0.75em tahoma, helvetica, sans-serif;
}
# Message_error {
Height: 16px;
Color: #000;
Line-height: 16px;
Background: # fcc url (image/msg_error.png) no-repeat;
Margin-bottom: 2px;
Border-bottom: # faa 1px solid;
Padding-left: 20px;
Overflow: hidden;
Display: none;
}
# Message_success {
Height: 16px;
Line-height: 16px;
Color: #000;
Background: # cfc url (image/msg_success.png) no-repeat;
Margin-bottom: 2px;
Border-bottom: # afa 1px solid;
Padding-left: 20px;
Overflow: hidden;
Display: none;
}
Index.html file code:
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> jQuery row-level XML file reading </title>
<Link rel = "stylesheet" href = "main.css" href = "main.css" type = "text/css"/>
<Script type = "text/javascript" src = "jquery-1.3.2.js"> </script>
<Script type = "text/javascript" src = "browser. js"> <script>
</Head>
<Body>
<Div id = "Message_success"> </div>
<Div id = "Message_error"> </div>
</Body>
</Html>
MsgConfig_zh.xml file code:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Msg-Config>
<Msg id = "1" name = "cookie-support">
<Message> your browser does not support cookies. Please enable the Cookie function of your browser </message>
<Message-help> click to view how to enable Cookie </message-help>
<Message-url> index.html </message-url>
</Msg>
<Msg id = "2" name = "load-xml">
<Message> jQuery successfully reads the node XML </message>
</Msg>
</Msg-Config>
Browser. js file code:
Copy codeThe Code is as follows:
$ (Document). ready (function (){
/* Check the browser if open Cookie support.
*-----------------------------------------------------*/
// Navigator. cookieEnabled = true indicates that the browser supports the Cookie function.
// Navigator. cookieEnabled = false indicates that the Cookie function is not enabled in the browser.
// Because the Cookie function has been enabled in my browser, it is set to true to check the effect.
If (navigator. cookieEnabled = true ){
$. Ajax ({
Url: "MsgConfig_zh.xml", // relative path of the XML file
Type: "POST", // method of sending the request
DataType: "xml", // specify the file type as "xml"
Timeout: 1000, // timeout setting, in milliseconds
Error: function (xml) {// handle XML file parsing errors
$ ("# Message_error"). text ("Error loading XML document (XML file loading Error)" + xml );
$ ("# Message_error"). show ();
},
Success: function (xml ){
// Traverse Msg-Config to find the node with "msg" and node id = 1
$ (Xml). find ("Msg-Config> msg [id = 1]"). each (function (){
Var Msg_value = $ (this). find ("message"). text (); // obtain the message Value of the subnode.
Var Msg_help = $ (this). find ("message-help"). text (); // obtain the message-help value of the subnode.
Var Msg_url = $ (this). find ("message-url"). text (); // obtain the value of the message-url of the subnode.
// Add the obtained value combination to the layer Message_error of the page in the form of .html ()
// This uses the .html () method, which processes the html code in the text.
// If the. text () method is used, HTML code such as <a> <font color> is output to the page intact.
$ ("# Message_error" ).html (Msg_value + "<font color = 'blue'> <B> <a href =" "+ Msg_url +" "href =" "+ Msg_url + ""> "+ Msg_help +" </a> </B> </font> ");
// Layer Message_error is hidden and displayed after a value is added.
$ ("# Message_error"). show ();
});
// Traverse Msg-Config to find the node with "msg" and node id = 2
$ (Xml). find ("Msg-Config> msg [id = 2]"). each (function (){
Var Msg_value = $ (this). find ("message"). text (); // obtain the message Value of the subnode.
$ ("# Message_success" cmd.html (Msg_value); // Add the obtained value to the page layer Message_error in the form of .html ().
$ ("# Message_success"). show ();
});
}
});
}
});
The final result is displayed:
Needless to say, the code is marked with detailed comments.
However, during the test, I encountered one or two problems. First, the encoding format of the XML file must be a UTF-8, that is, to ensure that <? Xml version = "1.0" encoding = "UTF-8"?>, Otherwise, garbled characters may occur. Because jQuery's Ajax transmits data using UTF-8 encoding.
Second, it is about the encoding of JS files. In principle, Chinese characters should not appear in JS files. In the test, I added a test for Chinese characters, such as code snippet $ ("# Message_error "). text ("Error loading XML document (XML file loading Error)" + xml); indicates the Error message prompt when the XML file cannot be correctly parsed or cannot be found, during the test, we found that the Chinese characters "loading XML file errors" were garbled. After a long time, I realized that the JS file encoding was a problem. I checked it online for a long time, and no one explicitly explained the solution. Even if there was one, it did not solve the problem of Garbled text, in addition, most people are talking nonsense. If a post is transferred in and out, it will be harmful if it has never been tested. Finally, I figured out how long it was, and finally solved the problem of the JS file layout. I also fixed the issue of garbled characters when the jquery.html () function and the jQuery. text () function were transmitting Chinese characters.
Solve the Problem of garbled characters when the jquery.html () function and jQuery. text () function are transmitting Chinese characters. Please refer to another article titled Code Conversion of JS files.
Package and download files
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
