从JavaScript代码使用jsonp

我正在学习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和JSON在幕后根本不同。 有关更多详细信息,请参阅我的其他堆栈溢出答案。

由于JSONP的工作方式,您需要服务器的合作将JSON响应包装在函数调用中(其名称通常由callback GET参数指定);

/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);
}

JSONP与JSON的工作方式不同。

使用JSON,你基本上使用XHR从你的服务器请求一个文件,解析它并使用结果对象。

使用JSONP插入一个<script>标签,就像你从其他服务器加载一个lib一样。 只有一些区别:在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请求。

链接地址: http://www.djcxy.com/p/47509.html

上一篇: Use jsonp from javascript code

下一篇: jQuery ajax call to domain that redirects to another domain (isn't followed)