Centralized data formats: JSON and JSONP

Source: Internet
Author: User
Tags format object eval insert soap json web services javascript eval

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



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.