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

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 <script> tags to call server scripts. Although jQuery encapsulates JSONP as a form of AJAX, JSONP is not a form or a special case of AJAX. <br /> <br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="8779" class="copybut" id="copybut8779" onclick="doCopy('code8779')"><U>Copy code The code is as follows:<div class="codebody" id="code8779"><br /> $.ajax({<br /> URL: "<a href="http://query.yahooapis.com/v1/public/yql">http://query.yahooapis.com/v1/public/yql",<br /> jsonpCallback: "showPrice",<br /> ​ jsonp: "callback",<br /> // tell jQuery we're expecting JSONP<br /> DataType: "jsonp",<br /> Data: {<br /> ​​​​ q: "select title,abstract,url from search.news where query="cat"",<br /> format: "json"<br /> },<br /> // work with the response<br /> Success: function(data) {<br />             console.log( data ); // server response<br /> }<br /> });<br /> <p>Ajax request parameter description: <p><strong>dataType String <p>The data type expected to be returned by the server. If not specified, jQuery will automatically make intelligent judgments based on the MIME information of the HTTP package. For example, the XML MIME type is recognized as XML. In 1.4, JSON will generate a JavaScript object, and script will execute the script. The data returned by the server will then be parsed based on this value and passed to the callback function. Available values: <p>"xml": Returns an XML document that can be processed with jQuery. <p>"html": Returns plain text HTML information; the included script tag will be executed when inserted into the dom. <p>"script": Returns plain text JavaScript code. Results are not cached automatically. Unless the "cache" parameter is set. '''Note:''''When making remote requests (not under the same domain), all POST requests will be converted into GET requests. (Because the DOM script tag will be used to load) <p>"json": Returns JSON data. <p>"jsonp": JSONP format. When calling a function using JSONP format, such as "myurl?callback=?" jQuery will automatically replace ? with the correct function name to execute the callback function. <p>"text": Returns a plain text string<br /> <br /> <strong>jsonp, <br /> <br /> Rewrite the name of the callback function in the jsonp request. The value is used to replace the "callback" part in the URL parameters of GET or POST requests such as "callback=?". For example, {jsonp:'onJsonPLoad'} will cause "onJsonPLoad" to be passed to the server. <br /> <br /> <strong>jsonpCallback, <br /> <br /> Specify a callback function name for jsonp. This value will be used instead of the random function name automatically generated by jQuery. This is mainly used to allow jQuery to generate unique function names so that it is easier to manage requests and provide callback functions and error handling. You can also specify this callback function name when you want the browser to cache GET requests. However, in actual use, there is no need to write a callback function, such as showPrice in this example, and no error will be reported if you do not write it, because jQuery automatically generates a callback function for you when processing JSONP and takes out the data to call the success method. It might look like this: <p><div class="codetitle"><span><a style="CURSOR: pointer" data="75667" class="copybut" id="copybut75667" onclick="doCopy('code75667')"><U>Copy code The code is as follows:<div class="codebody" id="code75667"><br /> function success_jsonpCallback(data) { success(data); } <br /> <p>The above is the entire content of this article. Do you have a detailed understanding of jsonp? If you have any questions, please leave me a message and we can discuss it together. </script>