The first of the Ajax beginner tutorials Ajax_ajax Related

From just contact B/s development, have heard of Ajax technology, but has been in ambiguous state, the truth understand, one to the hands of the dumbfounded.

Ajax seems to be unfathomable technology, become a B/s learning process in a shadow.

Until a few days ago, the side dishes really began to practice Ajax, real hands-on only to find that Ajax is not so difficult, if not consider Ajax variant applications, only consider AJAX basic application, it is quite simple, too complex theory to hinder our initiative.

Therefore, this series of tutorials will be from a practical point of view, the fastest speed for the reader to master the basic AJAX applications, in the most direct way to show Ajax technology.

To better read this series of tutorials, you have the following requirements for your readers:

L familiar with HTML.

L familiar with HTTP protocol.

L familiar with JavaScript.

L familiar with XML.

L familiar with XML DOM.

Ajax is not a new technology, it's just a standard. According to the personal understanding of small dishes, the so-called Ajax technology, that is, in order to realize the client-server background interaction, with XML as the information carrier, using JavaScript control, through the HTTP protocol to interact, to achieve the effect of partial refresh of the HTML interface.

Let's talk a little bit about these techniques.

There's nothing to say about HTML.

HTTP protocol content is much more. In the Ajax practice, will involve post, get method request data, HTTP header information structure, data parsing format, etc., mainly is these three items, see which unfamiliar, hurriedly remedial bar! But it's all very simple, no pressure.

The side dishes feel Ajax is writing JavaScript scripts, JavaScript is responsible for declaring a critical XMLHttpRequest object, this object through the post or get method to send a request to the server, obtain the XML format of the return data, and then parse the XML, Shown in the interface, this is the AJAX implementation process.

XML is nothing more than a data specification, it can make the data have a certain structure, so that convenient data organization, and convenient data expansion.

The basic composition of XML is the element, which is often said in HTML, such as:<book></book>;, and elements and elements can be nested, such as:<book><name></name> </book>. At the same time, elements can have attributes, such as: <book><name data= "1001 Nights" ></name></book>.

As a result, XML can represent very rich, flexible information that can even be used as a small database.

Here, for example, it is recommended that you extend an element by means of a child element, such as: <book><name></name></book>, and do not recommend extending the element in a property, for example: <book name= "" ></book>, because child elements are more flexible than attributes and conform to the design idea of XML.

To manipulate XML with JavaScript, you must understand the basic DOM (Document Object Model) knowledge. To facilitate the reader's learning, the side dish is a simple introduction to the XML DOM.

According to the DOM definition, each component in the XML is a node. Based on the understanding of the side dishes, the meaning of the ingredient is part of XML.

Specifically as follows:

L The entire document is a document node.

L Each XML tag is an element node. For example, <book></book> is a pair of tags, also called element nodes, also called elements.

L The text contained in the XML element is a text node. For example <name> 1001 night </name>, where "1001 Nights" is a text node.

The attribute of the XML element is called the attribute node. For example <book serialnumber= "0905024" ></book>, where serialnumber is the attribute node.

Nodes have three very important properties, namely nodename (node name), NodeValue (node value), NodeType (node type). NodeName and NodeValue are very commonly used and must be made clear.

For nodename (read only) there are:

The nodename of the L element node is the same as the label name of the element. For example, the element <book></book>, and its nodename is book.

The nodename of the L attribute node is the property name. For example, <book serialnumber= "0905024" ></book>, and the property node is SerialNumber, then its NodeName property is also serialnumber.

The nodename of the L text node is a fixed #text string. For example <name> 1001 Night </name>, the text node is "1001 Nights" and its nodename will return the fixed string "#text".

For NodeValue (read/write) there are:

The nodevalue of the L element node returns Undefind. For example <book></book> element, its NodeValue property returns Undefind.

The nodevalue of the L attribute node is the value of the property. For example <book serialnumber= "0905024" ></book>, the property node is SerialNumber, and its nodevalue returns 0905024.

The nodevalue of a text node is the content of the text itself. For example <name> 1001 Night </name>, the text node is "1001 Nights" and its NodeValue returns "1001 Nights". This must pay special attention to!!! In this example, the name element contains a "1001 Night" Text node, and "1001 Nights" is not the value of the name Element (NodeValue)! The value of the name Element (NodeValue) is undefind! As a result, it is important to note that when you get to the name element, it is also similar to FirstChild, Childnodes[0] to further get the text nodes contained in the element before you can read the text content with the NodeValue property.

In summary, you can use a diagram to generalize Ajax technology:

Small dishes Energy Limited, the level is limited, it is impossible to talk about these technologies is very fine, but also need to have a certain foundation of the reader, the purpose of this series of articles is through the actual case of small dishes, so that the reader to the Ajax Epiphany, recognize the nature of Ajax.