Home > Developer > JavaScript
Unfortunately, the data returned by many services is still in XML format.
Jquery provides built-in support for processing xml data. The premise is that the returned data does not contain any namespaces. For example, the following data
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Data>
<Employee id = "1" firstName = "ares" lastName = "chen"> </Employee>
<Employee id = "1" firstName = "ares" lastName = "chen"> </Employee>
<Employee id = "1" firstName = "ares" lastName = "chen"> </Employee>
<Employee id = "1" firstName = "ares" lastName = "chen"> </Employee>
<Employee id = "1" firstName = "ares" lastName = "chen"> </Employee>
<Employee id = "1" firstName = "ares" lastName = "chen"> </Employee>
<Employee id = "1" firstName = "ares" lastName = "chen"> </Employee>
<Employee id = "1" firstName = "ares" lastName = "chen"> </Employee>
</Data>
To process such data, the jquery code is roughly as follows:
Copy codeThe Code is as follows:
Var div = $ ("# placeholder ");
// Process xml without a namespace
$. Get ("data. xml", null, function (data ){
Var employees = $ ("Employee", data); // locate all the Employee nodes
Var ul = $ ("<ul/> ");
Employees. each (function (){
$ ("<Li/> "). text ($ (this ). attr ("firstName") + "" + $ (this ). attr ("lastName ")). appendTo (ul); // construct a new li tag for each row of data and insert it into ul
});
Ul. appendTo (div );
});
However, if our XML data has a namespace, the above Code will be invalid. The reason is that jquery cannot handle namespaces by default \
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Data xmlns: d = "http://tech.xizhang.com">
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
<D: Employee id = "1" firstName = "bill" lastName = "gates"> </d: Employee>
</Data>
To solve this problem, some enthusiastic netizens wrote a jquery plug-in called jquery. xmlns. js. If you are interested, you can learn and download it below.
Http://www.rfk.id.au/blog/entry/xmlns-selectors-jquery/
Then, we can use the following method to solve the problem:
Copy codeThe Code is as follows:
$. Xmlns ["d"] = "http://tech.xizhang.com ";
// Process xml with namespace
$. Get ("datawithnamespace. xml", null, function (data ){
Var employees = $ ("d | Employee", data); // locate all the Employee nodes
Var ul = $ ("<ul/> ");
Employees. each (function (){
$ ("<Li/> "). text ($ (this ). attr ("firstName") + "" + $ (this ). attr ("lastName ")). appendTo (ul );
});
Ul. appendTo (div );
});
I have to say that the namespace in the XML technical specification is really a bad design. It adds a lot of trouble, better than the benefits it brings.
The complete code of this example is as follows:
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "WebForm1.aspx. cs" Inherits = "WebApplication1.WebForm1" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Script src = "Scripts/jquery-1.4.1.min.js" type = "text/javascript"> </script>
<Script src = "Scripts/jquery. xmlns. js" type = "text/javascript"> </script>
<Script language = "javascript" type = "text/javascript">
$ (Function (){
Var div = $ ("# placeholder ");
// Process xml without a namespace
$. Get ("data. xml", null, function (data ){
Var employees = $ ("Employee", data); // locate all the Employee nodes
Var ul = $ ("<ul/> ");
Employees. each (function (){
$ ("<Li/> "). text ($ (this ). attr ("firstName") + "" + $ (this ). attr ("lastName ")). appendTo (ul); // construct a new li tag for each row of data and insert it into ul
});
Ul. appendTo (div );
});
$ ("<Br/>"). appendTo (div );
$. Xmlns ["d"] = "http://tech.xizhang.com ";
// Process xml with namespace
$. Get ("datawithnamespace. xml", null, function (data ){
Var employees = $ ("d | Employee", data); // locate all the Employee nodes
Var ul = $ ("<ul/> ");
Employees. each (function (){
$ ("<Li/> "). text ($ (this ). attr ("firstName") + "" + $ (this ). attr ("lastName ")). appendTo (ul );
});
Ul. appendTo (div );
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div id = "placeholder">
</Div>
</Form>
</Body>
</Html>
Finally, we can see the following results in the browser. Images and truth
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
