Detailed explanation of Jsonp keyword and the difference between json and jsonp, the difference between ajax and jsonp

Foreword

The first time I heard about jsonp was actually 2 years ago. At that time, I was working on a lottery module for an event page. I needed to get a probability from the server. I didn’t understand anything at the time. My colleague said to use ajax, so I used ajax. My colleague said that the dataType should be changed to jsonp, so I changed it to jsonp. So the activity page was finished, and I never encountered jsonp again. During this period, I always thought that jsonp was closely related to ajax, and it was a special cross-domain form of xhr... Until an interview a month ago, I asked about jsonp I was tortured to death, so I decided to take a look at jsonp. Well, it turns out that jsonp is not difficult.

Why use jsonp?

I believe that everyone is familiar with cross-domain and is equally familiar with the same-origin strategy. What, you haven’t heard of it? It doesn’t matter, since we are explaining it in simple terms, let’s start from the beginning.

Suppose I write an index page, and there is a request in the page. The request is for a json data (I don’t know the JSON introduction and usage summary of json data). Simply think about it and write the following code:

<script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
 $.ajax({
 url: 'http://localhost/a.json',
 dataType: "json",
 success: function (data) {
  console.log(data);
 }
 })
</script> 
{
 "name": "hanzichi",
 "age": 10
}

Copy after login

The poster placed both files in the www folder under wamp. The ajax request did not cross domain and the result was perfect:

But what if my json file and index file are not in the same domain, that is, cross-domain (if you don’t understand cross-domain, please refer to JavaScript’s same-origin policy)?

Try to open a new apache port under wamp (if you don’t know how to open it, you can refer to using multi-port access under WampServer), and put the json file in the folder of the service port (the port number set by the poster is 8080, The default is port 80), try to send a request:

<script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
 $.ajax({
 url: 'http://localhost:8080/a.json',
 dataType: "json",
 success: function (data) {
  console.log(data);
 }
 })
</script>

Copy after login

Obviously, the prompt is cross-domain! What to do? At this time jsonp is about to take action!

Magical script tag

Closely related to jsonp is the script tag, but xhr or ajax in the traditional sense has nothing to do with it!

Next, looking at the index.html code above, we see that the page references the jquery path of Baidu cdn. We seem to be accustomed to this method, but if we think about it carefully, the script tag is completely cross-domain. ..Yes, the core of jsonp implementation is to use the cross-domain capability of script tags! So we had an idea and it seemed that we could do this, dynamically generate a script tag, assign the json url to the script's src attribute, and then insert the script tag into the dom...

<body>
 <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
 <script type="text/javascript">
 var s = document.createElement('script');
 s.src = 'http://localhost:8080/a.json';
 document.body.appendChild(s);
 </script>
</body>

Copy after login

We created a script tag, and the content wrapped in the tag is the required json data, but the error is as follows:

The reason is that json data is not a legal js statement. Putting the above json data in a callback function is the simplest way:

<body>
 <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
 <script type="text/javascript">
 function jsonpcallback(json) {
  console.log(json);
 }
 var s = document.createElement('script');
 s.src = 'http://localhost:8080/a.json';
 document.body.appendChild(s);
 </script>
</body> 
jsonpcallback({
 "name": "hanzichi",
 "age": 10
});

Copy after login

Of course, the a.json file does not have to be named this way, and there will be no problem if it is changed to a.js.

The same is true if you are interacting with the server, such as with php:

<body>
 <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
 <script type="text/javascript">
 function jsonpcallback(json) {
  console.log(json);
 }
 var s = document.createElement('script');
 s.src="http://localhost:8080/test.php&#63;callback=jsonpcallback";
 document.body.appendChild(s);
 </script>
</body> 
<&#63;php
 $jsondata = '{
 "name": "hanzichi",
 "age": 10
 }';
 echo $_GET['callback'].'('.$jsondata.')';
&#63;>

Copy after login

It should be noted that no matter what form the URL provided by jsonp (that is, the src of the dynamically generated script tag) looks like, the final generated return is a piece of js code.

JQuery’s encapsulation of jsonp

In order to facilitate development, jq also encapsulates jsonp in the ajax method.

<script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
 $.ajax({
 url: 'http://localhost:8080/a.json',
 dataType: 'jsonp',
 jsonpCallback: 'CallBack',
 success: function (data) {
  console.log(data);
 }
 });
</script> 
CallBack({
 "name": "hanzichi",
 "age": 10
});

Copy after login

The above code is for the case where the callback function name is written hard in the request file. Because the request is a json file, json is not a server-side dynamic language and cannot be parsed. If it is php or other server-side language, there is no need to hard-code the function name, such as the following:

<script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
<script type="text/javascript">
 $.ajax({
 url: 'http://localhost:8080/test.php',
 dataType: 'jsonp',
 success: function (data) {
  console.log(data);
 }
 });
</script> 
<&#63;php
 $jsondata = '{
 "name": "hanzichi",
 "age": 10
 }';
 echo $_GET['callback'].'('.$jsondata.')';
&#63;>

Copy after login

Of course there are several similar encapsulation methods:

// 1
$.getJSON("http://localhost:8080/test.php&#63;callback=&#63;", function(data) { 
 console.log(data);
});
// 2
$.get('http://localhost:8080/test.php', function(data) { 
 console.log(data);
}, 'jsonp');

Copy after login

It should be noted that the request address url of the getJSON method needs to bring callback=?, because when jq encapsulates this method, there is no default callback function variable named callback, so $_GET['callback'] in php The variable value cannot be found.

There is no need to specify the callback parameter in the general jq method url. For jsonp in jQuery, the callback parameter is added automatically. By default, the callback parameter in the jsonp request generated by jQuery is in the form callback=jQuery200023559735575690866_1434954892929. This seemingly random name corresponds to the success processing function, so there is generally no need to deal with it specially. 2. If you want to write down the callback name, you can refer to the above.

Summary

Due to the restriction of the same-origin policy, XmlHttpRequest only allows requests for resources from the current source (domain name, protocol, port). In order to implement cross-domain requests, you can implement cross-domain requests through the script tag, and then output JSON data on the server and execute it. The callback function solves cross-domain data requests, which is the core of jsonp.

　jsonp principle:

1. First register a callback on the client, and then pass the callback name to the server.
2. The server first generates json data. Then generate a function using javascript syntax, and the function name is the passed parameter jsonp. Finally, the json data is directly placed into the function as a parameter, thus generating a js syntax document and returning it to the client. .
3. The client browser parses the script tag and executes the returned javascript document. At this time, the data is passed as a parameter to the callback function predefined by the client. (Dynamic execution of the callback function)

The difference between json and jsonp, the difference between ajax and jsonp

Although there is only one letter difference between json and jsonp, they are not related to each other.

json is a lightweight data exchange format.

jsonp is a cross-domain data exchange protocol.

Advantages of json: (1) Transmission based on plain text is extremely simple, (2) lightweight data format suitable for Internet transmission, (3) easy to write and parse.

The difference between ajax and jsonp:

The same thing: they both request a url

Difference: The core of ajax is to obtain content through xmlHttpRequest

The core of jsonp is to dynamically add the