Javascript 为什么这种跨域请求解决方案有效?

Javascript 为什么这种跨域请求解决方案有效?,javascript,ajax,cross-domain,jsonp,Javascript,Ajax,Cross Domain,Jsonp,在中,他使用javascript处理字典大小的单词列表,并通过ajax从CDN加载内容 这些单词被加载到分隔单词的新行中。然后他说跨域失败: 但有一个问题:我们无法从CDN加载词典! 由于CDN位于另一台服务器(或另一个子域)上, 就像这里的情况一样)浏览器的交叉原点决定了我们的命运 禁止此类请求的政策。不过,一切都没有失去- 只需对字典文件进行简单的调整,我们就可以将其加载到整个字典文件中 域名 首先,我们用空格替换字典文件中的所有端点。 其次,我们用JSONP语句包装整行。因此,决赛 结果如

在中,他使用javascript处理字典大小的单词列表,并通过ajax从CDN加载内容

这些单词被加载到分隔单词的新行中。然后他说跨域失败:

但有一个问题:我们无法从CDN加载词典! 由于CDN位于另一台服务器(或另一个子域)上, 就像这里的情况一样)浏览器的交叉原点决定了我们的命运 禁止此类请求的政策。不过,一切都没有失去- 只需对字典文件进行简单的调整,我们就可以将其加载到整个字典文件中 域名

首先,我们用空格替换字典文件中的所有端点。 其次,我们用JSONP语句包装整行。因此,决赛 结果如下所示:

口述(啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊

这允许我们对该文件执行Ajax请求,并使其按如下方式工作 希望它能够——同时仍然受益于所有的缓存和 由浏览器提供的压缩

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


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

这是因为他添加了JSONP语句

“带填充的JSON”是对基本JSON数据格式的补充。它提供了一种从不同域中的服务器请求数据的方法,这是典型的web浏览器由于同源策略而禁止的

这是通过脚本元素注入实现的

JSONP只有在与脚本元素一起使用时才有意义。对于每个新的JSONP请求,浏览器必须添加一个新元素,或者重用一个现有元素。前一个选项—添加新的脚本元素—通过动态DOM操作完成,称为脚本元素注入。元素被注入到HTMLDOM中,所需JSONP端点的URL被设置为“src”属性。这种动态脚本元素注入通常由javascript助手库完成。jQuery和其他框架具有jsonp助手功能;也有独立的选项

资料来源:

这(把它变成一个函数+参数)真的就这么简单吗

为什么这可以解决跨域访问限制的问题

你应该读一下。其思想是,现在您可以动态地包含一个指向资源的
标记,而不是发送AJAX请求(这是禁止的)。由于已经用函数名包装了内容,因此将执行此函数并将其作为JSON对象的参数传递。所以剩下的就是定义这个函数。

标签可以从任何地方(甚至跨域)加载任何JS文件。它带来的好处是,脚本中的代码也会被执行,因此,这是一种绕过跨域限制的方法

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

var test = 'foo'
将在全局范围内创建一个
test
变量

为了缓解这种情况,可以使用将应答包含在函数中。这是“JSONP”中的“P”,意思是“填充”。这将把您的回复封装在函数调用中

因此,如果您的外国脚本:

myFunction({
    test : 'foo'
});
它调用
myFunction
并使用
test
键传递对象,该键具有值
foo
。接收函数如下所示:

function myFunction(data){
    //"data.test" is "foo"
}
现在我们已经成功地绕过了跨域限制。所需的基本部件包括:

  • 接收功能(使用后可动态创建和丢弃)
  • “填充”JSON回复

回答得好,谢谢。由于脚本标记与页面一起加载,脚本标记的使用如何取代传统的ajax调用(ajax调用由某个事件触发)?@Kristian ajax受到限制跨域通信的同源策略的限制,但使用跨源资源共享(CORS)时除外。CORS需要将服务器设置为允许CORS请求。然而,JSONP却没有。它只是加载任何脚本并执行它们。这就像“纯客户端魔术”——没有后端干预。对不起,我的问题一定是含糊不清的。重新措辞:jsonp/script标记方法是否不限于在初始页面加载时执行?而ajax的json请求在事件触发时发生。。我如何协调这个时间差?@Kristian yup,JSONP可以在任何时间点启动。只需以JSONP格式加载所需的脚本。它们也是异步的。