What is JSONP?

Excerpt: 1190000007935557

First, the birth of Jsonp

• First, because Ajax can't cross the domain, then the developer thinks about it.

• Second, the developer discovers that the src attribute of the <script> tag can be cross-domain
  Write a cross-domain server into a function called local , callback data back not good?

• JSON is just supported by JS (object)

• 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 )

• This way of getting remote data looks very much like Ajax, but it's not the same.
  It is easy for the client to use the data, and gradually form an informal transport protocol , which people call JSONP.

• Passing a callback parameter to the cross-domain server and then returning data across the domain server will wrap the callback parameter as the function name to enclose the JSON data.

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

alert(‘我是远程文件‘);

Local

<script type="text/javascript" src="跨域服务器/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":"我是远程js带来的数据"});

Local

  <script  Type= "Text/javascript" > var Localhandler = function (data) { Alert (</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

<ScriptType="Text/javascript" > callback function after getting the flight information query resultvar Flighthandler =functionData) {alert (' Your flight results are: Fares ' + Data.price +" + data.tickets + //provides the URL address of the JSONP service (regardless of the type of address, the resulting return value is a piece of JavaScript code)  "cross-domain Server/flightresult.php?code=ca1998&callback=flighthandler"; //Create a script tag, set its properties var script =  Document.createelement ( ' src ' , URL); //add the script tag to head, at which point the call begins document.getelementsbytagname ( Span class= "hljs-string" > "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 = [    "name":"anonymous66",    "age":"18", "like":"jianshu"];// 接收callback函数名称$callback = $_GET[‘callback‘];// 输出echo $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 via 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?