AJAX beginner tutorial: First introduction to AJAX

This article is the first part of the ajax basic tutorial. This series of tutorials will start from a practical perspective, allowing readers to master basic AJAX applications as quickly as possible, and display AJAX technology in the most direct way. This article explains the basic knowledge of AJAX

I have heard about AJAX technology since I first came into contact with B/S development, but I have always been in an ambiguous state.

AJAX seems to be an unfathomable technology, becoming a shadow in the B/S learning process.

It wasn’t until a few days ago that Xiaocai really started to practice AJAX. When he really started to do it, he discovered that AJAX is not that difficult. If you don’t consider the variant applications of AJAX and only consider the basic application of AJAX, it is still quite simple. Overly complex theories hinder our enthusiasm for action.

Therefore, this series of tutorials will start from a practical perspective, allowing readers to master basic AJAX applications as quickly as possible, and demonstrate AJAX technology in the most direct way.

In order to better read this series of tutorials, readers have the following requirements:

l Be familiar with HTML.

l Be familiar with HTTP protocol.

l Familiar with javascript.

l Be familiar with XML.

l Familiar with XML DOM.

AJAX is not a new technology, it is just a new standard. According to Xiaocai's personal understanding, the so-called AJAX technology is to realize the background interaction between the client and the server, using xml as the information carrier, using javascript for control, and interacting through the HTTP protocol to achieve the effect of partially refreshing the html interface.

Let’s talk about these technologies briefly.

HTML has nothing to say.

The HTTP protocol has more content. In AJAX practice, it will involve POST and GET method request data, the construction of HTTP header information, data parsing format, etc. These are mainly these three items. See which ones you are not familiar with, and hurry up and learn more! But it's all simple, don't stress.

Xiaocai feels 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, obtains the return data in xml format, and then parses the xml. , displayed on the interface, this is the AJAX execution process.

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

The basic components of xml are elements, which are tags often mentioned in HTML, for example: ; and elements and elements can be nested, for example: < name>. At the same time, elements can have attributes, such as: .

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

Here, I would like to mention that it is recommended to use the sub-element method to extend the element, for example: . It is not recommended to use the attribute method. Extension elements, for example: , because sub-elements are more flexible than attributes and also conform to the design idea of ​​xml.

If you want to use Javascript to operate xml, you must understand basic DOM (Document Object Model) knowledge. In order to facilitate readers' learning, Xiaocai briefly introduces XML DOM.

According to DOM definition, each component in xml is a node. According to Xiaocai's understanding, the meaning of ingredients is the component 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, 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, One Thousand and One Nights, where "One Thousand and One Nights" is the text node.

l The attributes of xml elements are called attribute nodes. For example, , where serialNumber is the attribute node.

Nodes have three very important attributes, namely: nodeName (node ​​name), nodeValue (node ​​value), nodeType (node ​​type). Among them, nodeName and nodeValue are very commonly used and must be clarified.

For nodeName (read-only):

l The nodeName of the element node is the same as the tag name of the element. For example, the element , its nodeName is book.

l The nodeName of the attribute node is the attribute name. For example, , if the attribute node is serialNumber, then its nodeName attribute is also serialNumber.

l The nodeName of the text node is a fixed #text string. For example, One Thousand and One Nights, 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 element, its nodeValue attribute will return undefind.

l The nodeValue of the attribute node is the value of the attribute. For example, , the attribute node is serialNumber, and its nodeValue returns 0905024.

l The nodeValue of a text node is the content of the text itself. For example, One Thousand and One Nights, the text node is "One Thousand and One Nights", and its nodeValue returns "One Thousand and One Nights". Be sure to pay special attention to this! ! ! In this example, the name element contains a "One Thousand and One Nights" text node. "One Thousand and One Nights" is not the value (nodeValue) of the name element! The value of the name element (nodeValue) is undefind! Therefore, you should pay attention to the actual programming. When you get the name element, you need to further get the text nodes contained in the element like firstChild and childNodes[0], and then you can use the nodeValue attribute to read the text content.

To sum up, AJAX technology can be summarized in one picture:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax verification form example with prompts

Detailed explanation of ajax synchronization and asynchronous in jquery

Implement drop-down box linkage display data based on Ajax

The above is the detailed content of AJAX beginner tutorial: First introduction to AJAX. For more information, please follow other related articles on the PHP Chinese website!