Preparatory work
Before we begin we need to do the following:
1. Create a blank HTML file named demo.html; (recommended to use EditPlus to create)
2. Familiar with the basic syntax of the jquery framework; (not familiar, I'll comment in detail later)
3. Create an XML file named Data.xml to store the data, the structure of the XML will be covered below, you can also download my packaged file view;
4. A loading.gif picture that is used to display the wait time that XML reads out in a blank HTML document
Officially started
Step 1: First of all, let's take a look at the simple structure of this data.xml, I am here to demonstrate the data is "Saturn for you to recommend a few books", so for the book information, then the XML includes the name of the book, thumbnails and book description information;
The following is the XML file code:
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<books>
<book title= "Tibet Code" 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 a blank HTML document:
Copy Code code 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 only talk about the JavaScript code principle and the running process, not overly discuss the syntax, if you have any questions about the grammar, please leave me a message or view jquery related documents.
Line 1: When the HTML document is ready (that is, both HTML and JavaScript are downloaded), jquery's $ (document) is automatically triggered. Ready method and the process inside. Obviously, the first thing to do here is the $.get method.
The first argument for row 3:$.get is the relative path of the XML file (note that the path should be filled in correctly, where we put the XML and the Web page file in the same folder). The second parameter is a callback function, called a callback function. This means that the content of the XML file is requested through the Get method, and then the callback callback function is used to manipulate the data inside. and callback's parameter D represents all the data that comes from the XML callback, and with this parameter d, we'll be fine with the following.
Line 4: Dynamically add a label to the body of the document via JavaScript Line 5: Also dynamically adds a label <dl> to the body, which is used as the content container below the containing loop. (line 20 will be used)
Line 7: This line is important because, as we have said, the parameter d of the callback function represents all the data that is invoked from the XML, and now we need to process (filter) and format the data; Note: This is done by searching for the book tag (tag) and then looping through the functions after each Until the entry of the data in the XML is completely recycled (a bit like the function of the foreach function in PHP)
Row 9:$ (this) actually creates an object to instantiate the current one of D's book information Objects for easy operation, which is $book;
Row 10--Row 12: Gets the book name, description, and thumbnail of the current object $book, respectively (note that the syntax of the attribute value and the Fetch node value is different)
Line 14-line 18: Format book information for output;
Line 20: The formatted information is exported as HTML output to the document.
Line 22: In order to tell the user that our current information is being read from XML, 2000 milliseconds (2 seconds) Later, the picture fades away.
Step 3: So far, done. You are welcome to leave a message for me to discuss the development of jquery and the problems you have encountered, please do not hesitate to enlighten us. Also, place the downloaded folder in the Web environment (IIS or virtual host), and do not run directly.
Code package download
