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>猫</pet>
<pet>狗</pet>
<pet>鱼</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" ><!--
function Ajaxread (file) {
var xmlobj = null;
if (window. XMLHttpRequest) {
Xmlobj = new XMLHttpRequest ();
else if (window. ActiveXObject) {
Xmlobj = new ActiveXObject ("Microsoft.XMLHTTP");
} else {
Return
}
Xmlobj.onreadystatechange = function () {
if (xmlobj.readystate = = 4) {
Processxml (Xmlobj.responsexml);
}
}
Xmlobj.open (' Get ', file, true);
Xmlobj.send (");
}
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;
}
--></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= "http://cms.cnblogs.com/index.php#" onclick= "Ajaxread" (' Data_2.xml '); return False > View demo </a>.</p>
<div id= "DataArea" ></div>
</body>
(Sheneyan Note: For the complete code example see Example_2.html,xml file see: Data_2.xml)
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);
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
