Question

我在主脚本中有这个...

(function(d){
    var shortURLjs, id = 'shortUrl'; 
    if (d.getElementById(id)) {return;}
    shortURLjs = d.createElement('script'); 
    shortURLjs.id = id; 
    shortURLjs.async = true;
    shortURLjs.src = "http://site.com/test.js";
    d.getElementsByTagName('body')[0].appendChild(shortURLjs);
}(document));

在test.js中我有......

shortURL = { "firstName": "John", "lastName" : "Smith"};

但是当我尝试在添加它之后从包含test.js文件的脚本中访问shortURL时，它没有被定义。

我有点困惑。

Answer 1

您的主要功能必须调用类似的东西，它将作为脚本标记添加到您的头部：

<script src="http://www.mydomain.com/file.php?callback=JSONP_callback"></script>

callback=JSONP_callback表示将在返回结果的javascript中调用JSONP_callback。因此，您的服务器知道要调用哪个函数来显示结果。在您的主页上，您必须定义处理数据的函数。

function JSONP_callback(response)
{
    alert(response.name);
}

然后当您使用php或您使用的任何脚本时，您必须从回调中调用该函数，只要Javascript识别它就可以是任何东西：

// Within PHP it looks like:
echo $_GET['callback'] . "(" . json_encode(array( "name" => "Niels")) . ")";

// Which results in:
JSONP_callback({ name : "Niels" });

结果是该函数名称，因为我们调用了以callback=JSONP_callback为参数的页面。因为我们在主页面中定义了function JSONP_callback(result)，脚本将使用给定的数据执行此函数。

几个月前，我不得不为学校研究这个，我做的演示，也许你可以用某种方式使用它：http://lutrasoft.nl/school/JSONP.html

Answer 2

问题是脚本标记异步加载，而不是像

那样运行

insert tag
set shortURL
use shortURL
//your script finishes

插入的脚本只有在完成后才有机会运行

insert tag
use shortURL //oops!
//your script finishes
set shortURL

JSONP背后的技巧是，不是返回普通数据，而是返回看起来像函数调用

的内容

//instead of setting a variable like "shortUrl = ..."
// we instead call a function:
on_have_shortUrl({"first_name":...});

所以你需要做的就是预先准备好on_have_shortUrl功能

function on_have_shortUrl(shortURL){ use shortURL here}
insert script tag
inserted script calls your function passing the data to it

Niel的答案详细介绍了JSONP“协议”如何让您为回调函数和其他类似的东西选择不同的名称。

JSONP我做得对吗？

2 个答案: