javascript - 为什么这个跨域请求解决方法有效？

Question

在this John Resig article ，他正在使用 javascript 处理字典大小的单词列表，并且他正在通过 Ajax 从 CDN 加载内容。

单词被加载时用换行符分隔单词。然后他说跨域失败:

There's a problem, though: We can't load our dictionary from a CDN! Since the CDN is located on another server (or on another sub-domain, as is the case here) we're at the mercy of the browser's cross-origin policy prohibiting those types of requests. All is not lost though - with a simple tweak to the dictionary file we can load it across domains.

First, we replace all endlines in the dictionary file with a space. Second, we wrap the entire line with a JSONP statement. Thus the final result looks something like this:

dictLoaded('aah aahed aahing aahs aal... zyzzyvas zzz');

This allows us to do an Ajax request for the file and have it work as would expected it to - while still benefiting from all the caching and compression provided by the browser.

因此，如果我没看错的话，只需在原始内容周围添加他的方法 dictLoaded('original content') 即可使 ajax 请求不会失败。

这(把它变成一个函数 + 参数)真的就够了吗？ JSONP为什么要解决跨域访问限制的问题？

Answer 1

<script>标签可以从任何地方(甚至跨域)加载任何 JS 文件。随之而来的好处是该脚本中的代码也被执行，因此，这是一种绕过跨域限制的方法。

问题是，当代码被执行时，它是在全局范围内执行的。所以有这个代码:

var test = 'foo'

将创建一个 test全局范围内的变量。

为了缓解这种情况，您可以将回复包含在一个函数中。这是“JSONP”中的“P”，意思是“填充”。这会将您的回复包含在函数调用中。

所以如果你的外语脚本有:

myFunction({
    test : 'foo'
});

它调用myFunction并传递带有 test 的对象具有值 foo 的键.接收函数如下所示:

function myFunction(data){
    //"data.test" is "foo"
}

现在我们已经成功绕过跨域限制了。所需的基本部件是:

• 接收函数(可动态创建，使用后丢弃)
• “填充的”JSON 回复