A rough way to process XML data in jquery _jquery

XML is all called Extensible Markup Language, its file structure is similar to HTML, but the difference is also obvious, HTML can only use the label already defined, such as title, body, span, etc., the label type is limited, but XML can be used in addition to all the HTML tags, but also can customize their own tags, such as person, name, sex, age, and tag attribute names in XML, can also be customized. There are also significant differences in the use of HTML, which is used primarily to show data, while XML focuses on data storage and transmission. For example, the following simple XML document is used to store employee information:

< employee >
 < name > Twist pain </name >
 < sex > male </sex >
 < age >40</Age >
 < position > Pain ceo</jobs >
</Employees >

The following article briefly describes how to use JQuery to load an XML file and get the data you want from it.
Prepare XML documents and test data

Let's say we're building an XML document that contains people information that reflects the name, the company, the company profile, the company's product profile, and then we can design the XML in the following style:

 <?xml version= "1.0" encoding= "Utf-8"?> <Persons> <person fullname= "Bill Gates "> <Corporation>Microsoft</Corporation> <description>the largest software company</ Description> <products>windows series OS, SQL Server Database, XBox 360...</products> </Person> & Lt Person fullname= "Jobs" > <Corporation>Apple</Corporation> <description>the Famous software Company</description> <products>macintosh, IPhone, IPod, ipad...</products> </Person> < Person fullname= "Larry Page" > <Corporation>Google</Corporation> <description>the Largest search engine</description> <products>google Search, Google Adsense, gmail...</products> </Person> & Lt;/persons> 

A simple analysis of this XML file, where the first line <?xml version= "1.0" encoding= "Utf-8"?> is to declare this document as an XML document, and the text is encoded as utf-8. The second and last line Persons as the root element of the document, and each person element represents everyone, and the name is stored in the FullName attribute of the man element, which is used to store the company name, Description Elements are used to store company profiles, which are used to store company product profiles. So far, the document contains information from Bill Gates, Jobs, and Larry Page three IT bosses.
Parsing this XML document with JQuery

The first is to load the XML file with the $.get () method, and then use the Find () method to locate all the person elements and iterate through each () method as follows:

<script type= "Text/javascript" > JQuery (document). Ready (function () {//* First load XML file with $.get method */$.get ("Employeesin

 Formation.xml ", function (xmlData) {/* We want to tell the data into a table, here defines a table character channeling/var htmldata =" <table border= ' 1 ' > ";  /* Locate the person element, and then iterate through/$ (xmlData) with each method. Find (' person '). each (the function () {var person = $ (this);/* Copy the current element to person * * var FullName = person.attr ("FullName"); /* Get the FullName property of person * * var Corporation = person.find ("corporation"). Text (); /* Get the value of the neutron element Corporation of person * * var Description = person.find ("Description"). Text (); /* Get the value of the person neutron element Description/var products = Person.find ("Products"). Text ();
  /* Get the value of the person's neutron element products * * * * will get the data, put in a line of the table * * htmldata + = "<tr>";
  HTMLData + + "<td>" + FullName + "</td>";
  HTMLData + + "<td>" + Corporation + "</td>";
  HTMLData + + "<td>" + Description + "</td>";
  HTMLData + + "<td>" + products + "</td>"; HTMLData ="</tr>";
 
 });
 Complete table character channeling HTMLData + + "</table>";
 Place the table in the body $ (' body '). Append (HTMLData);
});
});

 </script>

Briefly explain this code, because this XML document is relatively simple, so this code is relatively short, the Code $.get () method of the first parameter is an XML file address, the second parameter is a callback function, the callback function in the parameter xmlData is the data in the XML file. In this example, we intend to display the data in XML in the form of a table in HTML, so we first build a table string HTMLData first.

Then, using the Find () method, locate all the elements named person, because each individual element represents someone and then iterates through each () method, assigning a variable person to the element that is traversed. Use the Person.attr () method to remove the FullName attribute of the element, that is, the name of the person, and then use the Find () method to locate its child elements corporation,description and products and return their textual content, using TR and TD The labels wrap them in a row in the table. Finally, the table string is completed and the table is added to the Body tab.