In the past, XML was the darling of programmers and the best choice for data transmission, API, and AJAX applications. In particular, when encountering AJAX applications, XMLHttpRequest checks the MIME type of the returned data, if it is of the text/xml type, XMLHttpRequest runs XML Parser to parse the returned document and build the corresponding DOM tree in the memory, you can use the JavaScript standard DOM method to operate the DOM tree. As we all know, DOM is not an efficient method. Another problem is that if you want to use JavaScript objects instead of XML data directly, you have to traverse the entire DOM tree to create the corresponding objects.
As a result, JSON was born.
JSON provides a standard data exchange format that is more suitable for AJAX applications. JSON (JavaScript Object Notation) is a lightweight data exchange format. Easy to read and write. It is also easy to parse and generate machines.
JSON has many advantages, but it also has shortcomings. Although XML does have many problems, we recommend you refer to the old K blog for comparison between the two.
This article mainly demonstrates how to use Jquery. ajax to obtain json and xml data in the background. For more information about the two, see the recommendation blog.
Client code
[Html]
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "JsonXmlTest. aspx. cs" Inherits = "JqueryAjaxTest. JsonTest" %>
<! 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.7.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ ("Document"). ready (function (){
$. GetJSON (
"Data/JsonData.txt ",
Function (JsonData ){
$. Each (JsonData. employees, function (I, item ){
$ ("# Result1"). append (item. firstName + "" + item. lastName + "<br/> ");
})
})
$. Ajax ({
Url: "Data/XmlData. xml ",
Success: function (XmlData ){
Var XmlContent = "";
// Try this each usage
$ (XmlData). find ("name"). each (function (){
XmlContent + = $ (this ). children ("firstName "). text () + "" + $ (this ). children ("lastName "). text () + "<br> ";
});
$ ("# Result2" 2.16.html (XmlContent );
},
DataType: "xml"
});
})
</Script>
</Head>
<Body>
<Div id = "result1">
</Div>
<Hr/>
<Div id = "result2">
</Div>
</Body>
</Html>
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "JsonXmlTest. aspx. cs" Inherits = "JqueryAjaxTest. JsonTest" %>
<! 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.7.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ ("Document"). ready (function (){
$. GetJSON (
"Data/JsonData.txt ",
Function (JsonData ){
$. Each (JsonData. employees, function (I, item ){
$ ("# Result1"). append (item. firstName + "" + item. lastName + "<br/> ");
})
})
$. Ajax ({
Url: "Data/XmlData. xml ",
Success: function (XmlData ){
Var XmlContent = "";
// Try this each usage
$ (XmlData). find ("name"). each (function (){
XmlContent + = $ (this ). children ("firstName "). text () + "" + $ (this ). children ("lastName "). text () + "<br> ";
});
$ ("# Result2" 2.16.html (XmlContent );
},
DataType: "xml"
});
})
</Script>
</Head>
<Body>
<Div id = "result1">
</Div>
<Hr/>
<Div id = "result2">
</Div>
</Body>
</Html>
Server xml file content
[Html]
<? Xml version = '1. 0' encoding = 'utf-8'?>
<Employees>
<Name>
<FirstName> Bill </firstName>
<LastName> Gates </lastName>
</Name>
<Name>
<FirstName> George </firstName>
<LastName> Bush </lastName>
</Name>
<Name>
<FirstName> Thomas </firstName>
<LastName> Carter </lastName>
</Name>
</Employees>
<? Xml version = '1. 0' encoding = 'utf-8'?>
<Employees>
<Name>
<FirstName> Bill </firstName>
<LastName> Gates </lastName>
</Name>
<Name>
<FirstName> George </firstName>
<LastName> Bush </lastName>
</Name>
<Name>
<FirstName> Thomas </firstName>
<LastName> Carter </lastName>
</Name>
</Employees>
Server json File Content
[Javascript]
{
"Employees ":[
{"FirstName": "Bill", "lastName": "Gates "},
{"FirstName": "George", "lastName": "Bush "},
{"FirstName": "Thomas", "lastName": "Carter "}
]
}
{
"Employees ":[
{"FirstName": "Bill", "lastName": "Gates "},
{"FirstName": "George", "lastName": "Bush "},
{"FirstName": "Thomas", "lastName": "Carter "}
]
}
Because jquery is used, parsing xml and json on the client does not seem to be much different. However, if native javascript is used, the comparison is obvious, read this article to compare Java + javascript + xml with java + javascript + json
I personally feel that xml is unparalleled on the server, but the advantage of json on the client is also obvious. Xml and json are both superior and inferior, and they are not easy to draw conclusions based on your preferences. A good programmer, both of them should be proficient and adapt to the situation.
Asp. Net + Jquery. Ajax:
Finally, according to my plan in the first article, I completed this series of articles. Looking back, the content is actually quite simple, but I still finish it seriously. If there is any inaccuracy, it will be corrected and supplemented in the future.
In fact, I want to write it into an article at the beginning, which will inevitably lead to the "rough summary" result. It is likely that I cannot make it clear at all, later, I thought that if there is no foundation, I would definitely be confused. Finally, I decided on an instance and an instance. In a little bit, I spoke about 10 articles for different readers, I don't know clearly, and I don't know the best solution, but I have done my best to make it clear and make it more reasonable. There are not many content involved, which can help readers get a well-spoken Jquery. ajax Foundation. If you don't look at the function, please try again.
It should be emphasized that this is the foundation of jquery. ajax, and it is true only when it is applied to projects flexibly. Come on, everybody. Come on, Jia Lin.
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
