在理解JSONP之前，您需要了解JSON格式和XML。目前，web上最常用的数据格式是XML，但XML非常复杂。这使得用户不方便处理嵌入在网页中的内容。

为了使JavaScript能够轻松地交换数据，即使作为数据处理程序，我们也根据JavaScript对象使用了措辞，并开发了一种简单的数据交换格式，即JSON。JSON可以用作数据，也可以用作JavaScript程序。

JSON可以直接嵌入JavaScript中，使用它们可以直接执行某些JSON程序，但由于安全限制，浏览器沙盒机制禁用跨域JSON代码执行。

为了使JSON可以在执行后传递，我们开发了一个JSONP。JSONP通过JavaScript回调功能和＜script＞标记绕过浏览器的安全限制。

简而言之，它解释了JSONP是什么，它解决了什么问题（何时使用它）。

JSONP代表带填充的JSON。

这是一个网站，有很多例子，从最简单的使用这一技术到最先进的平面JavaScript的解释：

w3schools.com/JSONP

上面描述的我最喜欢的技术之一是Dynamic JSON Result，它允许以URL参数将JSON发送到PHP文件，并让PHP文件根据获得的信息返回JSON对象。

jQuery等工具也有使用JSONP的工具：

jQuery.ajax({
  url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
  jsonp: "callbackName",
  dataType: "jsonp"
}).done(
  response => console.log(response)
);

出身背景

您应该尽可能使用CORS（即您的服务器或API支持它，浏览器支持足够），因为JSONP具有固有的安全风险。

示例

JSONP（带填充的JSON）是一种常用于绕过web浏览器中的跨域策略。（您不允许对浏览器认为位于不同服务器上的网页发出AJAX请求。）

JSON和JSONP在客户端和服务器上的行为不同。JSONP请求不会使用XMLHTTPRequest和关联的浏览器方法进行调度。而是创建一个＜script＞标记，其源设置为目标URL。然后将此脚本标记添加到DOM（通常在＜head＞元素内）。

JSON请求：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // success
  };
};

xhr.open("GET", "somewhere.php", true);
xhr.send();

JSONP请求：

var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';
  
document.getElementsByTagName("head")[0].appendChild(tag);

JSON响应和JSONP响应之间的区别在于，JSONP应答对象作为参数传递给回调函数。

JSON：

 { "bar": "baz" }

日本电话：

foo( { "bar": "baz" } );

这就是为什么您看到包含回调参数的JSONP请求，以便服务器知道包装响应的函数的名称。

当浏览器评估＜script＞标记时（请求完成后），该函数必须存在于全局范围中。

处理JSON响应和JSONP响应之间需要注意的另一个区别是，JSON响应中的任何解析错误都可以通过包装对responseText求值的尝试来捕获在try/catch语句中。由于JSONP响应的性质，响应中的解析错误将导致无法缓存的JavaScript解析错误。

这两种格式都可以通过在启动请求之前设置超时并在响应处理程序中清除超时来实现超时错误。

使用jQuery

使用jQuery发出JSONP请求的有用之处在于，jQuery在后台为您完成所有工作。

默认情况下，jQuery要求您包含&callback=？在AJAX请求的URL中。jQuery将接受您指定的成功函数，为其分配一个唯一的名称，并将其发布到全局范围中。然后它将取代问号？在回调中=？使用它指定的名称。

比较类似的JSON和JSONP实现

以下假定响应对象｛“bar”：“baz”｝

JSON：

   var xhr = new XMLHttpRequest();
    
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
      };
    };
    
    xhr.open("GET", "somewhere.php", true);
    xhr.send();

日本电话：

 function foo(response) {
      document.getElementById("output").innerHTML = response.bar;
    };
    
    var tag = document.createElement("script");
    tag.src = 'somewhere_else.php?callback=foo';
    
    document.getElementsByTagName("head")[0].appendChild(tag);

JSONP是解决跨域脚本错误的好方法。您可以使用纯JS的JSONP服务，而无需在服务器端实现AJAX代理。

您可以使用b1t.co服务查看其工作原理。这是一个免费的JSONP服务，让您可以缩小URL。以下是用于服务的url：

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

例如呼叫，http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

将返回

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

因此，当该get作为src加载到js中时，它将自动运行whateverJavascriptName，您应该将其实现为回调函数：

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

要实际执行JSONP调用，可以通过几种方式（包括使用jQuery）执行，但这里有一个纯JS示例：

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

一个循序渐进的示例和一个要练习的jsonp web服务可以在以下位置获得：

JSONP实际上是克服XMLHttpRequest同域策略的一个简单技巧。（如您所知，不能将AJAX（XMLHttpRequest）请求发送到其他域。）

因此，我们必须使用脚本HTML标记，而不是使用XMLHttpRequest，这些标记通常用于加载js文件，以便js从另一个域获取数据。听起来很奇怪？

事实是，脚本标记可以以类似于XMLHttpRequest的方式使用！看看这个：

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

加载数据后，您将得到一个如下所示的脚本段：

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

然而，这有点不方便，因为我们必须从脚本标记中获取这个数组。因此，JSONP的创建者决定，这将更好地工作（而且是这样）：

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';

注意到那边的my_callback函数了吗？因此，当JSONP服务器收到您的请求并找到回调参数时，它将返回以下内容，而不是返回纯js数组：

my_callback({['some string 1', 'some data', 'whatever data']});

看看利润在哪里：现在我们得到了自动回调（my_callback），一旦我们得到数据，它就会被触发。这就是关于JSONP的所有知识：它是回调和脚本标记。

注意：这些是JSONP用法的简单示例，它们不是可用于生产的脚本。

基本JavaScript示例（使用JSONP的简单Twitter提要）

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

基本jQuery示例（使用JSONP的简单Twitter提要）

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>

JSONP代表带填充的JSON。（这项技术的名称很差，因为它和大多数人认为的“填充”毫无关系。）

JSONP用法的一个简单示例。

客户端.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

服务器.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>