从 javascript 代码中使用 jsonp

Posted 2023-02-27

【中文标题】从 javascript 代码中使用 jsonp

【英文标题】：Use jsonp from javascript code

【发布时间】：2012-06-27 13:59:02

【问题描述】：

我正在学习 javascript 和 json，我需要从另一台服务器获取我的 json 文件。我已经使用本地 json 文件进行了一些 javascript 测试，但现在我想将所有代码转换为 jsonp，因为我需要处理另一个域上的文件。 我的代码是：

function jsonEntity()

 var richiestaEntity = new XMLHttpRequest();

richiestaEntity.onreadystatechange = function()

    if(richiestaEntity.readyState == 4) 

        var objectentityjson = ;
        window.arrayEntity= []; //creazione dell'array che conterrà le entity
        objectentityjson = JSON.parse(richiestaEntity.responseText);

        arrayEntita = objectentityjson.cards;

    return arrayEntita;
    

richiestaEntity.open("GET", "myjson.json", true);
richiestaEntity.send(null);

如何在不丢失代码结构的情况下使用 jsonp 而不是本地 json？

【问题讨论】：

JSONP 是一种黑客攻击，它利用了可以执行另一个域中的脚本这一事实。您只需创建一个脚本元素并设置其src 即可。你不能用XHR 做到这一点。见en.wikipedia.org/wiki/JSONP#How_it_works

【参考方案1】：

JSONP 和 JSON 在幕后的工作方式完全不同。有关详细信息，请参阅my other Stack Overflow answer。

由于 JSONP 的工作原理，您需要在服务器的配合下将 JSON 响应包装在函数调用中（其名称通常由 callbackGET 参数指定）；

/get_jsonp.php?callback=foo

（应该）得到：

foo(
    "foo": "bar"
);

...在响应中。

假设你已经合作，你可以改变你现有的功能如下；

function jsonEntity()

   var callbackName = "ajaxCallback";
   var script = document.createElement("script");

   // This bit needs the cooperation of the server, 
   // otherwise `ajaxCallback` won't be called.
   script.src = "myjson.json?callback=" + callbackName;

   window[callbackName] = function (obj) 
       window.arrayEntity = obj.cards;
   

   document.body.appendChild(script);

【参考方案2】：

JSONP 与 JSON 的工作方式不同。

使用 JSON，您基本上可以使用 XHR 从您的服务器请求一个文件，对其进行解析并使用生成的对象。

使用 JSONP，您可以插入 <script> 标记，就像您从其他服务器加载库时一样。只是有一些区别：在 URL 中，您传输一个附加参数，即回调函数，并在您的页面上定义该函数。

这可能如下所示。首先我们定义回调：

function myCallback( data ) 
  // do some stuff with data

然后我们动态插入一个新的<script>标签来检索数据。

<script src="path.to/remote/server.js?callback=myCallback" type="text/javascript"></script>

我们已经完成了。

服务器现在发送表单的答案

myCallback( "your": "answer", "is": "here"  );

它调用你的回调函数并开始你的处理。请参阅此处，服务器不是通常的 JSON 响应，而是使用代表 JSON 的对象作为参数对您的回调进行函数调用。

请注意，参数的名称（在我的示例中为“回调”）可能因服务提供商而异。因此，在使用它之前，请查找正确的名称。

另外需要注意的是，这只适用于GET 请求。您可以不将此技术用于POST 请求。