Centralized data formats: JSON and JSONP

Article Introduction: Ajax and Web service data formats: JSON JSONP.

In the previous article we talked about the early centralized data format, xml,soap,html. Now, let's look at JSON and JSONP.

Json

JSON (JavaScript Object notation) is proposed by Douglas Crockford. He is a lightweight data interchange format based on JavaScript object literals.

We can convert the contents of the previous XML book format into the following JSON format:

1 2 3 4 5 6 7 8 9 (16) He ' is in the same 32

[{title: "The Principles of beautiful Web design, 2nd Edition", URL: "Http://www.sitepoint.com/books/design2/", Author: "Jason Beaird", Publisher: "SitePoint", Price: {currency: "USD", amount:39.95}}, {title: "Jquery:novice to Ninja", url: "http://www.sitepoint.com/books/jquery1/", Author: "Jear Le Castledine & Craig Sharkie ", Publisher:" SitePoint ", Price: {currency: "USD", amount:29.95}}, {title: "Build Your Own Database driven Webs Ite ", url:" http://www.sitepoint.com/books/phpmysql4/", Author:" Kevin Yank ", Publishe R: "SitePoint", Price: {currency: "USD", amount:39.95} } ]

This is a way to represent a book through an object, and has information such as title, URL, author, publisher, and Price. Price is a child object, and he contains currency types and prices.

JSON is easy to process in JavaScript. You can use the native Json.parse method of the browser or the Json-js Library of Douglas Crockford. Even if that doesn't work, you can also use the JavaScript eval method. There is no need to write additional data processing methods:

1 2 3 4

var json = Xhr.responsetext; var book = Json.parse (JSON); alert (book[0].title); Book Title alert (book[1].url); Second book URL

The advantage of using JSON is that:

• A lot lighter than XML, not so much redundancy.
• JSON is also good for readability, but usually the return is compressed. Unlike XML, browsers can directly show that the browser's formatted display of JSON needs some plug-ins.
• Processing JSON in JavaScript is simple
• Other languages such as PHP support for JSON are also good

JSON also has some disadvantages:

• JSON's support for server-side languages is not as extensive as XML, but it provides libraries for many languages on json.org
• If you use eval () to parse, security issues are likely to arise

Nevertheless, the advantages of JSON are obvious. He is an ideal data format for AJAX data interactions.

JSONP (JSON-P)

If you use XMLHttpRequest to invoke the JSON Web service, the returned data can be processed by json.parse () or eval (). You can also use AJAX components to insert script, for example, to insert a remotely loaded script into a DOM node and invoke it through a script tag:

1 2 3

var script = document.createelement ("script"); SCRIPT.SRC = "http://webservice.com/?a=1&b=2"; document.getElementsByTagName ("Head") [0].appendchild (script);

Unlike XMLHttpRequest, inserting a script tag can fetch data from other services at different sources. This is an ideal choice for traffic analysis, bookmark tools, widgets, and advertising systems.

However, the returned JSON data is usually executed immediately as local code. is not assigned to a variable, so it is not accessible later. But this problem can be recalled by passing a callback parameter to the network service:

1 2 3

var script = document.createelement ("script"); SCRIPT.SRC = "Http://webservice.com/?a=1&b=2&callback=MyDataHandler"; document.getElementsByTagName ("Head") [0].appendchild (script);

At this point, the network service usually returns a JSON data contained in a callback function, which is JSONP, or "JSON with padding" To see the code:

1 2 3 4 5 6 7 8 9 ten 13

Mydatahandler ([ { title: "The principles of beautiful Web design, 2nd Edition", URL: " http:/ /www.sitepoint.com/books/design2/", Author: " Jason Beaird ", Publisher: " SitePoint " , Price: { currency: "USD", Amount: 39.95 } } );

Passed to the Mydatahandler () method as a parameter after the JSON object was downloaded.

JSON and JSONP are already the most popular data formats for asynchronous interactions today. However, in the compression of the size of the transmission data can be further studied. Rockux will talk about customizing the data return later.

Look at this series of other articles:

• Ajax and Web service data formats: XML SOAP HTML
• Ajax and Web Services data formats: Custom return format

Reprint Please specify:
Author: rockux–web Front end
From: Ajax and Web Service data formats: JSON JSONP