Home > Article > Web Front-end > A brief discussion on the difference between JSON and JSONP and the use of jQuery's ajax jsonp_jquery

A brief discussion on the difference between JSON and JSONP and the use of jQuery's ajax jsonp_jquery

WBOYOriginal: 2016-05-16 16:30:401408browse

JSON and JSONP

JSON (JavaScript Object Notation) is a lightweight data exchange format used to exchange information between browsers and servers.

JSONP (JSON With Padding) is JSON (or wrapped JSON) packaged in a function call.

JSON is a data format, and JSONP is a data calling method.

Copy code The code is as follows:

//JSON

{

“name”: “sb”

}

Copy code The code is as follows:

//JSONP

callback({

“name”: “sb”

})

For security reasons, scripts (AJAX) cannot access content outside this domain. However, static resources are not restricted by domain policies and can load scripts, styles, pictures and other static resources from any domain. JSOP uses this principle to achieve cross-domain data acquisition.

Example 1:

Copy code The code is as follows:

//Define shoPrice function

function showPrice(data) {

alert("Symbol: " data.symbol ", Price: " data.price);

}

Copy code The code is as follows:

//Include showPrice function and parameters in the Web page

This example shows how to call a JavaScript function with static JSON data as a parameter.

Example 2:

The first function call can be written in a js file and placed on the server, loaded into the page using a script tag, and this tag can be created dynamically.

Copy code The code is as follows:

The content of remote.js is the same as what was written in the tag before:

1 showPrice({symbol: 'IBM', price: 91.42});

The dynamically inserted JavaScript code takes the JSON data to be passed as a parameter and the parameter of the showPrice function calling statement.

So the question is, should the showPrice function be called every time the data is obtained? This requires the front-end and back-end programmers to make an agreement. Of course, this will cause a lot of inconvenience, especially when the interface is open to public development. JSOP is processed in this way: the front end is supported to pass a callback function name parameter, the back end receives the callback function name parameter, and then generates a call to the function, passes the JSON data as a parameter, and inserts it into the page when it reaches the client to start execution.

Example 3:

Dynamically insert code with callback parameters:

Copy code The code is as follows:

Code snippet of JSONP service implemented in PHP on the backend:

Copy code The code is as follows:

$jsonData = getDataAsJson($_GET['symbol']);

echo $_GET['callback'] . '(' . $jsonData . ');';

// Print: showPrice({"symbol" : "IBM", "price" : "91.42"});

It fits well with the definition of JSONP and packages JSON data in function calls.

The above examples come from:

Using JSONP for cross-domain communication, Part 1: Quickly build powerful mashups using JSONP and jQuery

Using JSONP with jQuery

The calling methods of AJAX and JSONP in jQuery look very similar. Don't be confused by this phenomenon. They are very different in nature. AJAX obtains non-page content through the XMLHttpRequest object, while JSONP dynamically adds