什么是JSONP,为什么创建它?

我了解JSON,但不了解JSONP。Wikipedia上有关JSON的文档是JSONP的最高搜索结果。它说:

JSONP或“带填充的JSON”是JSON扩展,其中将前缀指定为调用本身的输入参数。

??什么电话 这对我来说毫无意义。JSON是一种数据格式。没有电话

第二个搜索结果是由某些人叫雷米,谁写的这个约JSONP:

JSONP是脚本标记注入,它将响应从服务器传递到用户指定的函数。

我可以理解,但这仍然没有任何意义。


那么什么是JSONP?为什么创建它(它解决了什么问题)?我为什么要使用它?


附录:我刚刚在Wikipedia 上为JSONP创建了一个新页面现在,基于jvenema的答案它对 JSONP有了清晰而透彻的描述

Harry逆天2020/03/09 18:20:41

JSONP表示带有Padding的JSON

这是该网站,上面有很多示例其中包括从最简单的使用此技术到最先进的平面JavaScript的解释:

w3schools.com / JSONP

上面描述的我最喜欢的技术之一是Dynamic JSON Result,它允许将JSON发送到URL参数中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)
);
神乐路易2020/03/09 18:20:41

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

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

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

为了使JSON在执行后可以传递,我们开发了JSONP。JSONP通过JavaScript回调功能和<script>标签绕过了浏览器的安全限制。

简而言之,它解释了什么是JSONP,解决了什么问题(何时使用)。

Tony飞云2020/03/09 18:20:41

因为您可以要求服务器将前缀附加到返回的JSON对象。例如

function_prefix(json_object);

为了使浏览器eval“内联” JSON字符串作为表达式。此技巧使服务器可以直接在客户端浏览器中“注入” JavaScript代码,而绕过“相同来源”限制。

换句话说,您可以进行跨域数据交换


通常,XMLHttpRequest不允许直接跨域数据交换(需要通过同一域中的服务器),而:

<script src="some_other_domain/some_data.js&prefix=function_prefix>`可以从不同于源的域访问数据。


同样值得注意的是:即使在尝试这种“技巧”之前,应将服务器视为“受信任的”服务器,也可以包含对象格式等可能发生变化的副作用。如果一个function_prefix(即适当的js函数)用于接收JSON对象,则该函数可以在接受/进一步处理返回的数据之前执行检查。

西里西门2020/03/09 18:20:41

JSONP通过构造一个“脚本”元素(以HTML标记或通过JavaScript插入DOM)来工作,该元素请求到远程数据服务位置。响应是使用预定义函数的名称以及传递的参数(即请求的JSON数据)加载到浏览器上的JavaScript。执行脚本时,该函数将与JSON数据一起调用,从而允许请求页面接收和处理数据。

有关进一步的阅读访问, 访问:https : //blogs.sap.com/2013/07/15/secret-behind-jsonp/

客户端代码段

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

服务器端的一段PHP代码

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>