Home >Web Front-end >JS Tutorial >What is jsonp? Detailed explanation of the principle of jsonp

What is jsonp? Detailed explanation of the principle of jsonp

不言Original: 2018-10-15 10:51:574435browse

What is jsonp? What's the use? This article will introduce you to jsonp and understanding of jsonp principles. Friends in need can refer to it.

Without further ado, let’s go directly to the text~

What is jsonp?

We can find the definition of jsonp from the Internet: JSONP (JSON with Padding) is a "usage mode" of JSON, which can be used to solve cross-domain data access by mainstream browsers. question. Due to the same-origin policy, generally located in The web page of server1.example.com cannot communicate with a server other than server1.example.com, and HTML The 3f1c4e4b6b16bbbd69b2ee476dc4f83a element is an exception. Using this open policy of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a element, web pages can get dynamically generated scripts from other sources. JSON data, and this usage pattern is called JSONP. In fact, to put it simply, jsonp is a lightweight data transmission format used to solve cross-domain request problems.

Let’s analyze the principle of jsonp

ajax requests are affected by the same-origin policy and do not allow cross-domain requests, and the script tag src attribute The links in can access cross-domain js scripts. Using this feature, the server no longer returns data in JSON format, but returns a js code that calls a certain function, which is called in src, thus achieving cross-domain .

Let’s look at an example of jsonp:

<!DOCTYPE html>
 <html> 
 <head> 
 <title>GoJSONP</title> 
 </head> 
 <body> <
 script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> <script type="text/javascript" src="jquery-1.8.3.min.js">
</script> <script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $(&#39;<script><\/script>&#39;);
        obj.attr("src",url);
        $("body").append(obj);
    });
</script>
 </body> 
 </html>

A script tag is dynamically added here, src points to a cross-domain php script, and the above js function name is passed as the callback parameter Enter, then let’s take a look at how the PHP code is written:

<?php 
$data = array( &#39;age&#39; => 20, &#39;name&#39; => &#39;张三&#39;, ); 
$callback = $_GET[&#39;callback&#39;]; 
echo $callback."(".json_encode($data).")"; 
return;

The PHP code returns a JS statement, that is,

When accessing the page at this time, a script tag is dynamically added, and src points to PHP Script, execute the returned JS code, and a prompt box will pop up successfully.
So JSONP turns accessing cross-domain requests into executing remote JS code. The server no longer returns data in JSON format, but returns a function execution code that uses JSON data as an incoming parameter.

This article ends here. For more jsonp related content, you can pay attention to the php Chinese website! ! !

The above is the detailed content of What is jsonp? Detailed explanation of the principle of jsonp. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Share the simplest JavaScript countdown code (complete code attached)Next article：Share the simplest JavaScript countdown code (complete code attached)

See more

What is jsonp? Detailed explanation of the principle of jsonp

Related articles