客户端脚本的跨域内容使用(安全问题)
我正在尝试使用 jQuery 加载函数加载一些外部内容到我的页面上的 div 。 load 方法对于本地内容可以正常工作,但是如果您想要域外的内容,则它将无法工作。
$("#result").load("http://extrnal.com/page.htm #data);
(它实际上可以在 IE 中运行并带有安全警告,但根本无法在 Chrome 中运行)。 jQuery 文档说这是对的,因为出于安全原因跨域内容受到限制。如果使用 .getJSON 方法,我会收到同样的警告。
好的,经过一番谷歌搜索后,我发现了使用 YQL 加载内容的非常有趣的方法,我尝试了一些示例,如下所示:
var request = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fq%3Fs%3Dyhoo%22&format=json&diagnostics=true&callback=?";
$.getJSON(request, function (json) {
alert(json);
}
);
它确实有效!
我现在不明白的是 http://query.yahooapis.com 也是跨域资源,但是浏览器(IE 和 Chrome)可以正常工作吗?
有什么区别?我缺少什么?
谢谢
I'm trying to load some external content using jQuery load function to div on my page. load method works ok, with local content, but if you want something out of your domain, it won't work.
$("#result").load("http://extrnal.com/page.htm #data);
(it actually works in IE with security warning, but refuses to work in Chrome at all). jQuery documentation says that it is right, because cross-domain content is restricted because of security reasons. Same warning I get if use .getJSON method.
OK, after a googling a bit I found very interesting approach of using YQL for loading content, I've tried some examples, like this:
var request = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fq%3Fs%3Dyhoo%22&format=json&diagnostics=true&callback=?";
$.getJSON(request, function (json) {
alert(json);
}
);
And it really works!
What I dont understand now is that http://query.yahooapis.com is also cross-domain resouce but browser (both IE and Chrome) works OK with that?
Whats the difference? What am I missing?
Thank you
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您从 YQL 返回的结果采用 JSON 格式,这种格式允许像这样的跨站点 AJAX 调用。它与允许您通过 JSON(即 twitter API)与外部站点的 Web 服务进行通信的机制相同。
详细信息在这里 - http://www.wait-till-i.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/
The results you are getting back from YQL are in JSON format which is permitted for cross site AJAX calls like this. Its the same mechanism that allows you to communicate with web services for external sites via JSON (Ie. the twitter API).
Details here - http://www.wait-till-i.com/2010/01/10/loading-external-content-with-ajax-using-jquery-and-yql/
您可以在外部站点上创建 JSON,如下所示:
并定义
you can make on external site JSON like this:
and define
感谢您的回答,但不幸的是,他们都没有回答我原来的问题。
我已经检查了 stackoverflow 上的相关问题(我知道我需要先这样做)并找到了这种行为的原因。
第一个代码片段集使用 AJAX/JSON 来检索数据,并且由于同源策略而被允许。但是对 YQL 的请求改用 JSONP 就可以了。
JSONP 是我不了解的东西,这就是为什么我没有理解这种行为。
JSONP 的介绍信息可以在这里找到:
http://ajaxian.com/archives/jsonp-json-with-padding
Thanks for your answers, but unfortunately both of them do not answer my orginal question..
I've checked out related questions on stackoverflow (i know i need to do that first) and found the reason of such behavior.
First code snipset uses AJAX/JSON to retrive the data and it is permitted because of Same Origin Policy. But request to YQL uses JSONP instead, that is OK.
The JSONP was something that I don't know about, that's why I didn't undrestand the behaviour.
Introduction info on JSONP could be found here:
http://ajaxian.com/archives/jsonp-json-with-padding