JQuery + JSON as front and back data exchange
jquery provides a good asynchronous loading interface for Ajax, which can partially update page data,
http://api.jquery.com/category/ajax/
JSON, as a lightweight data format, is commonly supported by the browser JS engine, in the same XML format.
Using the Ajax+json 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 interacting with the Chinese perpetual calendar website in JSON data format.
3, take full advantage of the JSON 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.
JSON front and back interaction example
Front desk file client.html completely has HTML JS writing, does not contain any PHP syntax, its implementation function, will be a JSON string, sent through Ajax after the background (server.php), the background will receive the JSON string intact and then output to the HTTP response, Before the foreground Ajax success event, the AJAX client receives a JSON string of the response, then converts it to a JSON 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 '> //here to use the Josn string that is spliced well varData= '{"Classcode": "Cellphone", "City": "Guangdong"}'; $.ajax ({type:"POST", URL:"/jsonserver.php", //data sent is JSONContentType:"Application/json; 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 JSONDataType:"JSON", ANYSC:false, Success:function(Result) {$ ("H1"). Text (result.city)}, Error:function(XMLHttpRequest, Textstatus, Errorthrown) {alert (Errorthrown+ ':' +textstatus); //Error Handling } }); </Script></Body></HTML>
Background Files server.php
<? PHP // send the JSON data sent by the client back to//"{symbol: ' IBM ', price:120}" ; Echo $HTTP _raw_post_data ?>
JQuery + JSON as a front and back Data Interchange Format practice