I do not know on the Chinaren alumni friends have not noticed, chinaren in many aspects after the revision of a large number of changes. For example, the message and reply is no longer like before, after each submission must reload the entire page, when the speed of the super slow, can only stare at the eyes waiting. So now this dazzling effect is how to do it, if you feel interested, then follow me down to see!
Friends who know Ajax may know that the realization of this dazzling effect is not a very difficult thing, of course, if you don't know what Ajax is, it doesn't matter, but in this section we're going to make a news review system to see what Ajax is, and first we'll get to know something about basics.
What is Ajax?
Ajax author Jesse James Garrett in Ajax: A new approach to web apps, which refers to Ajax as the abbreviation for "Asynchronous JavaScript + xml", which is asynchronous JavaScript and XML processing. It contains:
Use XHTML and CSS for standards-based representations:
Using DOM (Document Object model) dynamic display and interactive operation;
Using XML and XSLT for data exchange and operation;
Using XMLHttpRequest to obtain asynchronous data;
Use JavaScript to bind the above technology application;
What is the difference between Ajax and traditional Web applications?
The biggest difference between Ajax and traditional Web apps is that Ajax can partially load one area of a page, rather than the traditional web after every page request must reload the entire page, especially in the page load is relatively large, the page load time is longer, the user most of the time in the waiting state, The present to the user is only a blank, and in the application of Ajax can be very good to avoid such things happen.
What is the working principle of Ajax?
Ajax mainly requests the server through the XMLHttpRequest in the JavaScript object and updates the page based on the results of the processing. Such an update does not update the entire page, but rather makes local updates to a region based on the needs of the user and does not affect browsing in other areas while updating. For example: Sohu personal blog in each column after the refresh button.
What is XMLDOM?
XMLDOM is the programming interface specification used to access and manipulate XML documents. XMLDOM is designed to be available in any language and any operating system. With the help of DOM, programmers can create XML documents, traverse their structure, and add, change, and delete their elements. The DOM sees the entire XML document as a tree, and the document-level element is the root of the tree.
Let's take a look at a few of the features related to this tutorial, it is worth noting that the following methods or properties are not the same object, please see the description:
getElementsByTagName method
Description: Returns the collection of elements for the specified name.
Syntax: objNodeList = Xmldocument.getelementsbytagname (tagname);
Example: Var node=xmldom.responsexml.getelementsbytagname ("pl");
GetAttribute () method
Description: Gets the attribute value of an element node
Syntax: Elementnode.getattribute (name)
Example: Var tot=xmldom.responsexml.getelementsbytagname ("pl") [0].getattribute ("tot");
ChildNodes Property
Description: Returns a list of nodes that contain all the available child nodes of the node.
Grammar: objnodelist=node.childnodes;
Example: objNodeList = Xmldoc.childnodes;
If a specific node is required, var u= xmldoc.childnodes (0);
Length Property ()
Description: Returns the number of nodes in a list of nodes
Syntax: nodelistobject.length
Example: Var len=node.length;
Now that the basics are finished, if you don't know much about it, it's a good idea to see some JavaScript-related tutorials. Let's take a look at the specific implementation principle of the news commentary system