What is JSONP?

First, the birth of Jsonp

2. First, because Ajax can't cross the domain, then the developer thinks about it.
4. Second, the developer discovers that the SRC attribute of the <script> tag can be cross-domain
6. Write a cross-domain server into a function called local, callback data back not good?
8. JSON is just supported by JS (object)
10. Invoke a dynamically generated JS format file on a cross-domain server (regardless of the type of address, the resulting return value is a JS code)
12. This way of getting remote data looks very much like Ajax, but it's not the same.
14. It is easy for the client to use the data, and gradually form an informal transport protocol, which people call JSONP.
16. Passing a callback parameter to the cross-domain server and then returning the data across the domain server will wrap the callback parameter as the function name in the JSON data.

Second, the boss, to a catty of chestnuts.
"Chestnut One"
Cross-Domain Server
Files:remote.js
Code:

Alert (' I am a remote file ');

Local

<script type="text/javascript" src=" cross-domain server/remote.js" ></script>

Here is to directly introduce a JS, the page will pop up a prompt form, showing that I am a remote file .

"Chestnut II"
Cross-Domain Server
Files:remote.js
Code:

Localhandler ({"result":" I am the data brought by remote JS "});

Local

<script type="text/javascript">     var localhandler = function (data {        alert (' I am a local function, can be called by cross-domain remote.js file, remote JS brings data is:' + data.result);      </script> <script type="text/javascript" src= " cross-Domain server/ Remote.js"></script>

Here's what I'm doing.

1. Define a function locally
2, introduce a JS
3, the introduction of JS inside, call this function

The page will pop up a prompt form. The local function is displayed successfully by the remote JS call across the domain, and I have received the data from the remote JS .

The new problem arises : Let remote JS know what name the local function it should call. After all, JSONP service providers have to face a lot of service objects, and these service objects are different local functions?

"Chestnut three"
The JS script provided by the cross-domain server is dynamically generated so that callers can pass a parameter that tells the cross-domain server "I want a JS code called xxx function , please return to me", Therefore, the cross-domain server can follow the client's requirements to generate a JS script and respond.

Cross-Domain Server
Files:flightresult.php
Code:

Flighthandler ({    "code":"CA1998",     "price"1780,    "tickets " 5 });

Local

<script type="Text/javascript">//callback function After getting the flight information query result    varFlighthandler =function (data) {alert ('The result of the flight you are inquiring for is: Ticket price'+ Data.price +'Yuan,'+'remaining votes'+ Data.tickets +'of the card. ');     }; //provide the URL address of the JSONP service (regardless of the type of address, the resulting return value is a piece of JavaScript code)    varURL ="cross-domain server/flightresult.php?code=ca1998&callback=flighthandler"; //Create a script tag, set its properties    varScript = Document.createelement ('Script'); Script.setattribute ('src', URL); //Add the script tag to head, and the call startsdocument.getElementsByTagName ('Head')[0].appendchild (script); </script>

This time, we're doing
1. Dynamic creation of scripts
2, the URL passed a code parameter, the server to do query CA1998 flight information, callback parameters to tell the server, my local callback function is called Flighthandler
3, cross-domain server call this function flighthandler page will pop up a prompt form. Pass the fare, the remaining ticket and the number to return.

Third, so what exactly did the server do? In the final analysis, it is stitching strings.

//Data$data = [    "name":"ANONYMOUS66",    " Age":" -",    " like":"Jianshu"];//Receive callback function name$callback = $_get['Callback'];//OutputEcho $callback."(". Json_encode ($data).")";

Iv. What is the difference from Ajax?
Ajax and JSONP are essentially different things.
The core of Ajax is to get non-page content through XMLHttpRequest
The core of JSONP is the dynamic add <script> tag to invoke the JS script provided by the server.

V. Conclusion
This article is on the principle of JSONP literacy, generally many developers will use but do not know the principle, which in the learning and growth of the road is not good. So, knowing the JSONP principle, you can add 50 dollars to the salary again.

What is JSONP?