Unfortunately, the data returned by many services is still in XML format.
jquery has no problem with the built-in support for XML processing of this data. But only if the returned data does not take any namespaces. For example, the following data
Copy Code code 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 Code code as follows:
var div = $ ("#placeholder");
Working with XML without namespaces
$.get ("Data.xml", NULL, function (data) {
var employees = $ ("Employee", data); Find all the employee nodes
var ul = $ ("<ul/>");
Employees.each (function () {
$ ("<li/>"). Text ("FirstName") + "" + $ (This). attr ("LastName")). APPENDTO (UL);//To construct a new Li tag for each row of data. and insert it into the UL
});
Ul.appendto (DIV);
});
But if our XML data has namespaces, the code above will not work. The reason is because jquery cannot handle namespaces by default \
Copy Code code 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>
In order to solve this problem, there are enthusiastic netizens, wrote a jquery plugin, called Jquery.xmlns.js, interested in the following to understand and download
http://www.rfk.id.au/blog/entry/xmlns-selectors-jquery/
So, we can solve the problem with the following methods
Copy Code code as follows:
$.xmlns["D"] = "http://tech.xizhang.com";
Processing XML with Namespaces
$.get ("Datawithnamespace.xml", NULL, function (data) {
var employees = $ ("d| Employee ", data); Find 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, XML is a very bad design for the namespaces in this technical specification. A lot more trouble than the benefits it brings.
The example in this article is complete with the following code
Copy Code code 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 ">
<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");
Working with XML without namespaces
$.get ("Data.xml", NULL, function (data) {
var employees = $ ("Employee", data); Find all the employee nodes
var ul = $ ("<ul/>");
Employees.each (function () {
$ ("<li/>"). Text ("FirstName") + "" + $ (This). attr ("LastName")). APPENDTO (UL);//To construct a new Li tag for each row of data. and insert it into the UL
});
Ul.appendto (DIV);
});
$ ("<br/>"). Appendto (Div);
$.xmlns["D"] = "http://tech.xizhang.com";
Processing XML with Namespaces
$.get ("Datawithnamespace.xml", NULL, function (data) {
var employees = $ ("d| Employee ", data); Find all the employee nodes
var ul = $ ("<ul/>");
Employees.each (function () {
$ ("<li/>"). Text ($ (this). attr ("firstName") + "" + $ (This). attr ("LastName")). APPENDTO (UL);
});
Ul.appendto (DIV);
});
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Placeholder" >
</div>
</form>
</body>
Finally, the effect you see in the browser is as follows. There's a picture of the truth.
