Home > Developer > Web Develop
jquery provides a good asynchronous loading interface for Ajax, which can partially update page data,
http://api.jquery.com/category/ajax/
As a lightweight data format, XML is generally supported by the browser JS engine, in the same JSON format, but not as thin as JSON.
Using the Ajax+xml data format to implement dynamic pages has the following benefits:
1, loose coupling, page HTML and data is completely separated, that is, the presentation layer and data layer separate, favorable foreground style customization. Unlike the previous background script nested HTML tags, and output data to the appropriate location of the label, to implement dynamic pages, representing and data mixing together.
2, support with RPC docking, for a variety of business RPC (similar to Web service) can be integrated into a page to show and configure, such as a personal site page, the display of weather data from the Meteorological Department, calendar of backlog and storage matters, Are interactive with the Chinese perpetual calendar website via XML data format.
3, take full advantage of the XML format benefits, hierarchical description of data, compared to form forms submitted by the X-www-form-urlencode format of data much stronger.
4, Ajax brings and benefits, you can partially update the page, without form form the overall submission, resulting in the entire page reload.
XML front and back interaction exampleFront desk file client.html completely has HTML JS writing, does not contain any PHP syntax, its implementation function, will be an XML string, sent through Ajax after the background (server.php), the background will receive the XML string intact and then output to the HTTP response, Before the foreground Ajax success event, the AJAX client receives the response XML string, then converts it to an XML object, and then calls the success event, which can be accessed in the event handler function.
Front desk File client.html
<HTML><Head> <Scripttype= "Text/javascript"src= "./jquery.js"></Script> <style> </style></Head> <Body> <H1>Hello world!</H1> <Scripttype= ' Text/javascript '> //to use a well-stitched XML string here varData= '<root><classCode>cellphone</classCode><city>GuangDong</city></root> '; $.ajax ({type:"POST", URL:"/xmlserver.php", //data sent is XMLContentType:"application/xml; Charset=utf-8", //Post mode, the data parameter cannot be null "", //If you do not pass parameters, you also write "{}", otherwise contenttype will not be appended to the request headers. Data:data,//data in response would expected XMLDataType:"XML", ANYSC:false, Success:function(Result) {$ ("H1"). Text (Result.getelementsbytagname (" City")[0].childnodes[0].nodevalue)}, Error:function(XMLHttpRequest, Textstatus, Errorthrown) {alert (Errorthrown+ ':' +textstatus); //Error Handling } }); </Script></Body></HTML>
Background Files server.php
<? PHP // send the XML data sent by the client as-is back//"<root><symbol>ibm</symbol><price>120</price></root > "; Echo $HTTP _raw_post_data ?>
JQuery + XML as a data Interchange format practice in front and back tables
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
