A beginner's understanding of AJAX, a beginner's understanding of AJAX

A beginner's understanding of AJAX, a beginner's understanding of AJAX

I have heard about AJAX technology since I first came into contact with B/S development, but I have been in an ambiguous state. The truth is that I am dumb once I get started.

AJAX seems to be an untested technology and a shadow in the B/S learning process.

It was not until a few days before that I started AJAX practice. I realized that AJAX is not that difficult. If I did not consider AJAX variants, I would only consider basic AJAX applications, it is still quite simple, and too complicated theory hinders our enthusiasm.

Therefore, this series of tutorials will give readers the fastest speed to master basic AJAX applications and present AJAX technology in the most direct way.

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

L familiar with HTML.

L familiar with HTTP.

L familiar with javascript.

L familiar with XML.

L familiar with xml dom.

AJAX is not a new technology, but a new standard. According to my personal understanding, AJAX technology is used to implement background interaction between the client and the server. xml is used as the information carrier, javascript is used for control, and HTTP protocol is used for interaction, the html page is refreshed.

Let's talk about these technologies.

HTML is nothing to say.

There is a lot of HTTP content. In AJAX practice, it involves POST, GET Method Request data, HTTP header information construction, data parsing format, and so on. It is mainly these three items. Let's take a look at which one is unfamiliar! But it's easy. Don't put pressure on it.

Cai believes that AJAX is writing Javascript scripts. javascript is responsible for declaring a crucial XMLHttpRequest object. This object sends a request to the server through the POST or GET method to obtain the returned data in xml format, parse the xml file and display it on the interface. This is the AJAX execution process.

Xml is nothing more than a data specification. It can make the data have a certain structure, which facilitates data organization and data expansion.

The basic composition of xml is an element, which is also a common tag in HTML. For example, <book> </book>, while elements and elements can be nested, for example: <book> <name> </book>. At the same time, the element can have attributes, such as <book> <name data = "One Thousand and One Nights"> </name> </book>.

In this way, xml can represent very rich and flexible information, and can even be used as a small database.

We recommend that you use the sub-element method to extend the elements, for example, <book> <name> </book>, we do not recommend that you use attributes to extend elements, such as <book name = ""> </book>, because child elements are more flexible than attributes and comply with the xml design philosophy.

To operate xml using Javascript, you must understand the basic DOM (Document Object Model) knowledge. To make it easier for readers to learn, this section briefly introduces the xml dom.

According to the DOM definition, each component in xml is a node. According to the dish, the meaning of the component is an integral part of xml.

The details are 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 labels, also called element nodes, and also called elements.

L text contained in xml elements is a text node. For example, <name> One Thousand and One night </name>, where "One Thousand and One Night" is a text node.

L the attribute of an xml element is called an attribute node. For example, <book serialNumber = "0905024"> </book>, in which serialNumber is an attribute node.

A node has three important attributes: nodeName (node name), nodeValue (node value), and nodeType (node type ). NodeName and nodeValue are very common and must be clarified.

For nodeName (read-only:

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

L The nodeName of the attribute node is the attribute name. For example, if the attribute node of <book serialNumber = "0905024"> </book> is serialNumber, its nodeName attribute is also serialNumber.

L The nodeName of the text node is a fixed # text string. For example, for <name> One Thousand and One Nights </name>, the text node is "One Thousand and One Nights", and its nodeName will return the fixed string "# text.

For nodeValue (read/write:

L The nodeValue of the element node returns undefind. For example, the <book> </book> element returns undefind for its nodeValue attribute.

L The nodeValue of the attribute node is the value of this attribute. For example, <book serialNumber = "0905024"> </book>, the attribute node is serialNumber, and its nodeValue returns 0905024.

L nodeValue of the text node is the content of the text itself. For example, for <name> One Thousand and One Nights </name>, the text node is "One Thousand and One Nights", and its nodeValue returns "One Thousand and One Nights ". Please pay special attention to this !!! In this example, the name element contains a one thousand and one-night text node. "One Thousand and One-night" is not the value of the name element (nodeValue )! The value (nodeValue) of the name element is undefind! Therefore, in actual programming, you must note that when the name element is obtained, you must further obtain the text nodes contained in the element, such as firstChild and childNodes [0, then you can use the nodeValue attribute to read the text content.

In summary, AJAX technology can be summarized in a diagram:

This series of articles aims to use the practical examples of this series of articles to explain how little food can be done and how little food can be done, let readers suddenly understand the nature of AJAX.