Use Ajax + XML to implement multilingual web applications

Text: Use Ajax + XML to implement multiple languages on the browser side

I. Introduction

The first question to answer is whether it is necessary for us to implement such a function.

At present, most websites (such as forums and blogs) are usually implemented on the server side in multiple languages and are mainly used for whole-site localization. In addition, news websites such as Xinhuanet actually have an independent website in each language and have different teams to maintain it. Of course, this is beyond the scope of this article. It is very passive for users to process multi-language information by replacing the server script. It is a waste of time for our code writers. In addition, each time you modify or add a entry, you must maintain a large script file (usually using arrays ......).

I want to get something like this: the server-side system does not process languages; on the downloaded page, the customer can select a language that he is good at or prefers. (currently, there are not many people in the two languages ......), This information is asynchronously sent to the server. Note: No script resources are consumed here. You only need to request one or several XML files. The advantage is that you can use a variety of ready-made XML editors to modify the entries, and you can also simply add languages to save server resources (running scripts is more resource-consuming than downloading files ), sometimes it can even save time for SQL queries (if someone records your favorite language in the database ...... But I haven't heard of it yet ......); The previous method of "pushing" is now "pulling"; you do not have to refresh the UI Language when updating it ......

Ii. Design and Implementation

To save development time, I chose prototype 1.5.1 as the basic class library (by the way, prototype library is too easy to use, but version 1.5.1 has more than 90 KB ...... This should be a typical example of fat client ).

The language file containing the entry uses XML, and the directory structure is as follows:

Lang/config. xml

Zh-cn.xml

En-ww.xml

/Subpage/config. xml

Zh-cn.xml

En-ww.xml

Note: A directory is a multi-language Configuration unit. Lang/config. xml specifies the available languages. The structure is as follows:

<? XML version = "1.0" encoding = "UTF-8"?>
<Lang-config version = "1.0">
<Entry value = "ZH-CN" name = "Chinese (simplified)"/>
<Entry value = "En-ww" name = "English"/>
</Lang-config>

You can add a language as needed. the language specified by the Value Attribute of the entry must have XML with the same name in the same directory as the file.

The zh-cn.xml and en-ww.xml are the files that store the entry, the structure is as follows:

<? XML version = "1.0" encoding = "UTF-8"?>
<Lang-pack lang = "En-ww" name = "English" version = "1.0">
<Title> Phil idea. Online </title>
<Entry id ="Str_something"> Something... </Entry>
</Lang-Pack>

In this example, each configuration Unit represents a page, so the title field represents the page title. You can add content as needed. Each entry occupies an entry tag. The ID attribute specifies the unique identifier of the entry in this configuration unit. The structure of the zh-cn.xml is the same as this and will not be repeated here.

To avoid referencing the same content in different files, you can add the include attribute to the root tag of the subpage/lang-code.xml and write the relative path of the referenced file:

<Lang-pack lang = "En-ww" name = "English"Include = "../en-ww">
<Title> Phil idea. Online-Brief Introduction </title>
<Entry id = "str_test"> test </entry>
</Lang-Pack>

Next, place the entry on the page where the entry needs to be applied:

<SPAN class ="Lang-spot: str_something"> </Span>

Why use the class attribute? The reason is that prototype has very simple class functions ...... It's so convenient! If you are interested, refer to the documentation. Of course, other classes can be appended to this Lang-spot: str_something without affecting the display of CSS effects.

The final task is to write JavaScript scripts:

You can download the script for testing: multi_lang_demo.js

　　Test:

Reference this file on the HTML page.
Add a script block at the end of the page:


Event. Observe (window, "LOAD", function (){
Lang. initialize ("Lang/", function (){
// List available languages in divlanglist
// (Suppose this exists in your page)
Lang. languagessupported. Keys. Each (
Function (okey ){
$ ("Divlanglist"). innerhtml + =
"<A href = 'javascript: void (0); '" +
"Onclick =/" Lang. Apply (document, '"+
Lang. languagessupported [okey]. Code + "');/"> "+
Lang. languagessupported [okey]. Name + "</a> <br/> ";
});
// Apply the language ZH-CN to the page, that is, simplified Chinese.
// No event processor configured for application completion
Lang. Apply (document, "ZH-CN", null );
});
});

You can try it now. The tag marked on the page is automatically replaced with the corresponding entry. You can add

Iv. Postscript

This code is just a demo. You can modify it on this basis, for example, adding and using cookies to remember the language used by the user. In addition, there is a circular reference problem for Language Pack references, which is not solved in this demo. If you are interested, try it.

Welcome! I also hope you will send us your modified work!