Implementation Code that JQuery reads XML file data and displays

Preparations

Before starting, we need to make the following preparations:

1. Create a blank html file named demo.html. (Editplus is recommended)

2. Be familiar with the basic syntax of the JQuery framework. (It doesn't matter if you are not familiar with it. I will comment it out in detail later)

3. Create an xml file named data. XML to store data. The XML structure will be involved below. You can also download the packaged file for viewing;

4.a loading.gif image. This image is used to display in the blank html document during the waiting time when XML is read.

Official start

Step 1: Let's take a look at this data. the simple structure of xml. The data I demonstrated here is "Saturn recommends a few books for you". Therefore, for the book information, xml includes the name, thumbnail, and description of the book;

The following is the XML file code:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Books>
<Book title = "Tibetan password" imageurl = "images/Tibet_Code.jpg">
<Description>
Here is the overview (www.jb51.net)
</Description>
</Book>

<Book title = "Cambridge IELTS 6" imageurl = "images/ielts.jpg">
<Description>
Here is the overview (www.jb51.net)
</Description>
</Book>

<Book title = "Professional ASP. NET" imageurl = "images/asp.jpg">
<Description>
Here is the overview (www.jb51.net)
</Description>
</Book>
</Books>



Next, let's look at the JavaScript code loaded in the blank HTML document:

Copy codeThe Code is as follows:
$ (Document). ready (function ()
{
$. Get ('mydata. xml', function (d ){
$ ('Body'). append ('$ ('Body'). append ('<dl/> ');

$ (D). find ('book'). each (function (){

Var $ book = $ (this );
Var title = $ book. attr ("title ");
Var description = $ book. find ('description'). text ();
Var imageurl = $ book. attr ('imageurl ');

Var html = '<dt> </dt> ';
Html + = '<dd> <span class = "loadingPic" alt = "Loading"/> ';
Html + = '<p class = "title">' + title + '</p> ';
Html + = '<p>' + description + '</p> ';
Html + = '</dd> ';

$ ('Dl '). append ($ (html ));

$ ('. LoadingPic'). fadeOut (2000 );
});
});
});


Step 2: here, I will only talk about the principle and running process of JavaScript code, but I will discuss the syntax in detail. If you have any questions about the syntax, please leave a message or view JQuery related documents.

Row 1: After the HTML document is prepared (both html and JavaScript are downloaded), the $ (document). ready method of JQuery and the process in it are automatically triggered. Obviously, the $. get method is executed first.
Row 3: The first parameter of $. get is the relative path of the XML file (note that the path must be filled in correctly. Here we put XML and webpage files in the same folder ). The second parameter is a Callback function, that is, a Callback function. That is to say, the get method is used to request the content of the XML file and then the callback function is used to operate the data in the file. The callback parameter d indicates all the data called back from XML. With this parameter d, we can proceed with the following content.
Row 4: dynamically Add a tag Row 5: A label <dl> is also dynamically added to the BODY to serve as the content container under the inclusion loop. (Row 20 will be used)
Row 7: This row is very important because we have already said that the callback function parameter d represents all the data called back from XML. Now we need to process (filter) the data) and format. Note: Here, we search for the book tag, and then cyclically execute the function following the each until the entries in the xml data are fully cyclic; (a bit like the foreach function in PHP)
Row 9: $ (this) actually creates an object to instantiate the current book information object of d for convenient operations. this is $ book;
Row 10 -- Row 12: Obtain the book name, description, and thumbnail of the current object $ book respectively. (Note that the syntax for retrieving attribute values and node values is different)
Line 14-line 18: format the book information for output;
Row 20: output formatted Information to the document in HTML output mode.
Row 22: To tell the user that the current information is being read from XML, the image disappears after 2000 milliseconds (2 seconds.

Step 3: Now, we are done. You are welcome to leave a message to discuss JQuery development and your problems. In addition, place the downloaded folder in the WEB environment (IIS or virtual host), and do not open it directly.

Package and download code