How to use AJAX technology to develop Web applications

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Ajax|web| program in the previous article, we discussed how to get data from a remote XML file through JavaScript. In this article, we will learn how to deal with the data more complex. As an example, we prepare a set of XML data, dividing the data into separate pieces and presenting the fragments in different ways (depending on how they are identified).

This article is based on the sample code built in the previous article, so if you don't understand our current code, you can go back and read the first article (Sheneyan Note: right there).

Start ~

Let's start with our first step: Construct XML. We're going to write an XML document that organizes a series of data that is ready to be processed by JavaScript, so we'll organize some nodes and subnodes (or elements and child elements) together. In this example, we will use the names of some family pets:

<?xml version= "1.0" encoding= "UTF-8"?>
<data>
<pets>
<pet> Cat </pet>
<pet> Dog </pet>
<pet> Fish </pet>
</pets>
</data>
On top, we have this XML declaration (indicating that the document is an XML 1.0 document, using UTF-8 encoding), a root element (<data>) combines all of the following elements, a <pets> element organizes all the pets, and then a < The pet> node corresponds to a pet. To specify what type of animal each pet is, we set a text node in the <pet> element: Cat, dog, fish.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en"
"HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title> developing Web applications using AJAX-Example </title>
<script type= "Text/javascript" ></script>
<body>
<p> This page demonstrates how Ajax technology updates the content of a Web page by dynamically reading a remote file-no need to reload any pages. Note: This example is not effective for users who prohibit JS. </p>
<p> This page will demonstrate XML data such as retrieving and processing the group. The retrieved data will be exported to the bottom in tabular form.
<a href= "#" > View demo </a>.</p>
<div id= "DataArea" ></div>
</body>

You'll notice that we called the function the same way (through a hyperlink) as we did last time, and we put the data into a div (this time it's called "DataArea"). This ajaxread () function is very close to the last time except for one difference: the onreadystatechange function. Let's take a look at this function first:

Xmlobj.onreadystatechange = function () {
if (xmlobj.readystate = = 4) {
Processxml (Xmlobj.responsexml);
}
}
We canceled the Updateobj function and replaced it with a new function called Processxml (). This function will get the XML document itself (that is, retrieved by the Ajaxread function) and handle it. (this "XML document itself" I mean the parameter "Xmlobj.responsexml")

Now let's analyze the function processxml. The following is its code:

function Processxml (obj) {
var DataArray = obj.getelementsbytagname (' pet ');
var dataarraylen = dataarray.length;
var insertdata = ' <table style= ' width:150px; Border:solid 1px #000 "><tr><th>"
+ ' pets</th></tr> ';
for (var i=0; i<dataarraylen; i++) {
InsertData + = ' <tr><td> ' + dataarray[i].firstchild.data + ' </td></tr> ';
}
InsertData + = ' </table> ';
document.getElementById (' DataArea '). InnerHTML = InsertData;
}

First, we have defined some variables. "DataArray" as an array of all <pet> nodes (not node data, just nodes). "Dataarraylen" is the length of this array, used in our loops. "InsertData" is the HTML at the beginning of a table.

Our second step is to iterate through all the <pet> elements (through the variable "DataArray") and add the data to the variable InsertData. Here we will create a table row, insert a table data node (TD) In, and then include the text of each <pet> element into the table data node, and add these to the variable "InsertData". Therefore, once per loop, the variable insertdata adds a row of new data containing the name of one of three pets.

After the new data row is added, we insert a "</table>" end tag to the variable "InsertData". This completes this form, and then I have only this last step to achieve our goal: we need to put this form on the page. Luckily, we have to thank the innerHTML attribute, which is very simple. We get the div "DataArea" through the function document.getElementById () and insert the HTML in the variable "InsertData". Well, this form is popping up!

Before we go on ...

I have to point out two points:

First, you will notice that we are not using node <pets>. It's because we only have one data group (<pets>) and all subsequent elements (each <pet> element), which contain different data but they have the same name. In this example, this node can be ignored. However, it is better to put all elements <pet> into <pets> elements, rather than letting the <pet> elements be scattered (but still within the data element).

Another way is to put a specific label on each pet, such as:

<?xml version= "1.0" encoding= "UTF-8"?>
<data>
<pets>
< cat/>
< dog/>
< fish/>
</pets>
</data>

Then we can iterate through the nodes in the element <pets>. This processxml function looks like this:

The modification here is that we point to the <pets> group element (this "[0]" means this is the first, even if it is the only one) and its child nodes (element < cat/>,< dog/>,< fish/>). Because the text element splits these elements (spaces are considered to be a node), we need to make sure that only those nodes with the tag name (well, that is, only the tag) pass. Then we output the name of each label. Since each sign is a pet, we do not need to obtain data for each node-the section name itself is sufficient. Go and see how it works.

There is another way to do our job, which is to set a property value for each <pet> node. Your XML document looks like this:

<?xml version= "1.0" encoding= "UTF-8"?>
<data>
<pets>
<pet type= "Cat"/>
<pet type= "Dog"/>
<pet type= "Fish"/>
</pets>
</data>
You just have to change your processxml function a little bit, and it's like this:

function Processxml (obj) {
var DataArray = obj.getelementsbytagname (' pet ');
var dataarraylen = dataarray.length;
var insertdata = ' <table style= ' width:150px; Border:solid 1px #000 "><tr><th>"
+ ' pets</th></tr> ';
for (var i=0; i<dataarraylen; i++) {
InsertData + = ' <tr><td> ' + dataarray[i].getattribute (' type ') + ' </td></tr> ';
}
InsertData + = ' </table> ';
document.getElementById (' DataArea '). InnerHTML = InsertData;
}

(Sheneyan Note: After the modified example, see: example_2_2.html, XML file see: Data_2_2.xml)

The key difference is that we get the value through Dataarray[i].getattribute (' type '), which returns the value of the "type" property of the current <pet> node.

Go on...

Now that we know a few effective ways to retrieve data from a separate XML data set, let's look at how to retrieve the data from multiple groups. Rather than just listing what a pets has, let's say we have a day schedule for our pets. Because they all have different needs, every pet must be carefully taken care of. In the face of this situation, the animal caretaker needs a daily basis. Now let's put these in a well-formed XML:

<?xml version= "1.0" encoding= "UTF-8"?>
<data>
<pets>
<pet>cat
<task>Feed</task>
<task>Water</task>
<task>comb out Fleas</task>
</pet>
<pet>dog
<task>Feed</task>
<task>Water</task>
<task>put outside</task>
</pet>
<pet>fish
<task>Feed</task>
<task>check oxygen, water purity, etc.</task>
</pet>
</pets>
</data>
This may seem strange, but this is the subgroup (sub-group) we are creating. Each <pet> element is a group <pets> subgroup, and each <task> is a child element of each <pet> group.

Before I go on, you may want to beautify your form with some CSS, such as:

We also changed the initial value of the variable "InsertData"-we added a table header (<th>) to our "Tasks" field.

The next change lies in loops: We assign values to Subary and Subarylen variables. The variable subary becomes an array of the current <pet> <task> elements. The variable Subarylen becomes the length of the array until the array changes (when the outer loop goes to the next <pet>).

We created an inline loop to handle all the <task> elements, one at a time. Presumably, we create a new data grid, put a comma-separated list of tasks, and then close the data table and the current row. In particular, these <task> element node data (the task itself, for example, "feeding") is placed into the data grid in the variable "InsertData".

Next, let's examine the current <pet> if there are any more tasks. If so, we add a comma (,) to the variable insertdata so that each task uses a comma-delimited ("A, B, C," instead of "A, B, C,"-note that the last comma is on the second task, so we don't need it). This work is done when we get the length of the subary array (add 1 to the "J" variable of the loop). Because the loop will increment the variable "J" by 1 in the Next loop, "J" will be 1 more than it was at the time of the test. Therefore, if "j+1" (or, "J's value" When the loop starts again) equals Subarylen (the number of <task> nodes for the current <pet> node), the loop will stop. If the loop is no longer running, we will no longer add a new comma to separate the task. So if "j+1" is not equal to Subarylen, we until we can safely add commas to "insertdata" to prepare for the next <task>.

Once the inner loop finishes, we close the task data grid and the pet line. The outer loop will start again to create a new row and move to the next <pet>. This processing has been done until all <pet> elements (and all <task> elements of each pet) are processed.

Is there any other way?

You might think: "That JavaScript gets pretty complicated, but it just gets complicated as XML gets more complex, and maybe we can simplify XML and then simplify JavaScript." If you think so, it's great, because you're absolutely right. One of the different ways I've shown before, the one I'm detailing may be the most appropriate. How do we use attributes to correspond to each pet and the corresponding task? What does XML look like?

<?xml version= "1.0" encoding= "UTF-8"?>
<data>
<pets>
<pet type= "Cat" tasks= "Feed, Water, comb out fleas"/>
<pet type= "Dog" tasks= "feeds, Water, put outside"/>
<pet type= "Fish" tasks= "feeds, Check oxygen, water purity, etc."/>
</pets>
</data>

Oh, wow! It looks a lot simpler. Let's take a look at how our Processxml function modifies:

function Processxml (obj) {
    var dataarray = obj.getelementsbytagname (' pet ');
    var dataarraylen = dataarray.length;
    var insertdata = ' <table><tr><th> '
     + ' pets</ Th><th>tasks</th></tr> ';
    for (var i=0; i<dataarraylen; i++) {
        InsertData + = ' <tr><td> ' + dataarray[i].getattribute (' type ')               + ' </td> '
+ ' <td> ' + dataarray[i].getattribute (' tasks ') + ' </td> </tr> ';
   }
    InsertData + = ' </table> ';
    document.getElementById (' DataArea '). InnerHTML = InsertData;
}
(Sheneyan Note: After the modified example, see: Example_2_4.html,xml file See: Data_2_4.xml)

As you can guess, the function is much simpler. Because the code becomes simpler, it becomes more efficient. The only difference between our older functions is that the variable InsertData now inserts more HTML, especially two new variables "type" and "Tasks." As we learned earlier, those attributes are taken from the <pet> element of the XML document, and each pet property has a different value. This is probably the easiest way to modify the XML file yourself to suit your schedule changes. For example, if you end up scratching your cat's fleas, you simply remove the "flea-reduction" from your cat's Daily task table, but in the XML we used earlier, it might feel like a muddle.

The final way to format XML is to mix the two parts. Now, we'll use attributes and different tags. Let's take a look at the sample xml:

<?xml version= "1.0" encoding= "UTF-8"?>
<data>
<pets>
< cat tasks= "feeding, drinking water, reducing flea count"/>
< dog tasks= "feed, drink, take a walk"/>
< fish tasks= "feeding, checking oxygen, purity of water, other"/>
</pets>
</data>

This is perhaps the easiest XML to understand. Let's analyze the changes we made to make the Processxml function work:

Function Processxml (obj) {
    var dataarray = obj.getelementsbytagname (' pets ') [0].childnodes;
    var dataarraylen = dataarray.length;
    var insertdata = ' <table><tr><th> '
     + ' pets</ Th><th>tasks</th></tr> ';
    for (var i=0; i<dataarraylen; i++) {
      if (dataarray[i). TagName) {
        insertdata + + = ' <tr><td> ' + dataarray[i].tagname + ' </td> '
            + ' <td> ' + dataarray[i] . getattribute (' tasks ') + ' </td></tr> ';
     }
}
InsertData + = ' </table> ';
document.getElementById (' DataArea '). InnerHTML = InsertData;
}
(Sheneyan Note: After the modified example, see: Example_2_5.html,xml file See: Data_2_5.xml)

"DataArray" now points to the <pets> child nodes and treats them as an array (in other words, DataArray is now an array of all nodes in the <pets> node). This is because each label is different (< cat/>,< dog/>,< fish/>), so we can't use the names of these elements to search for them (and we can use <PET> before, because all the elements are <pet>).

Still, there are spaces between each node, so we have to exclude the text node in our process. We can verify that the label name exists-the text node is a node but there is no label, and the < cat/>,< dog/>,< fish/> Nodes are all labeled. So if a tag has a name, then we can insert the data into the variable insertdata. The data we inserted is a table with two tabular data grids. The first cell is the label name, which is the type of pet (cat, dog or fish), and the second cell is the specified animal's "Tasks" attribute value (such as "feeding or drinking water").

Conclusion

In this article, I've shown a lot of changes in this example, and you can experiment with them to check which one is better for you. Just remember that XML is "extensible," so there's no "wrong" way to combine your data, although there's always a "best" approach. Also, be careful to keep your XML well-formed. Remember that a lot of problems come from forgetting to end a tag (such as < dog/> instead of < dog >; unless there is data in this node, such as < dog >, here is the data Oh </dog >).

I intend to make it clear that XML and JavaScript applications are not confused. With more data, you can use Ajax for a larger purpose. I would like to see Ajax more applied to the corporate web site, and other. So if you apply that knowledge to practice, I'm glad to know what you've learned (mail:jona#slightlyremarkable.com #换成 @).

About the author

Jonathan Fenocchi (mail:jona#slightlyremarkable.com #换成 @) is a web developer, the main website design, client script, PHP script.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

How to use AJAX technology to develop Web applications

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

How to use AJAX technology to develop Web applications

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support