为什么我无法从jQuery加载方法加载外部资源?

在使用jQuery学习Ajax请求的过程中,我尝试在点击链接时加载google主页。 所以我写了类似的东西:

$("#ajax").click (function (event) { $("#g").html("Loading..."); $("#g").load("http://www.google.com"); event.preventDefault (); }); 

在身体的某个地方:

 Load file ajax way 
Click the above link to load the page...

哪个不起作用,最初我认为有一些语法错误或其他东西。 但后来当我用服务器上的静态html文件替换google url时,它运行正常。

 $("#g").load("Temp.htm"); 

是否设计为这样工作(如果是,为什么?)或我做错了什么?

编辑:请任何人解释(或参考)跨域ajax调用引入的安全问题? 换句话说,为什么打开另一个浏览器选项卡并打开谷歌而不是从页面中打开是安全的? 它是为了保护来电者还是被叫者?

Jquery使用ajax(XMLHttpRequest)请求来加载数据,但浏览器允许这个用于同一域上的资源。 (上面的答案提到了同源政策 )。 这就是为什么它适用于Temp.htm,但不适用于www.google.com。

  • 解决此问题的一种方法是创建一个服务器脚本,为您加载页面 – 基本上是一个代理。 然后你打电话

     $('#g').load("load.php?url=google.com") 
  • 另一个解决方案是使用iframe进行通信 – 我找到了这个库,这似乎是你需要的: jquery-crossframe

  • 第三个选项是JSONP,但这不适合你的情况。

我的意见 – 选择服务器端代理的第一个选项。


为什么有相同的原产地政策?

想象一下,你正在检查你的易趣帐户上的一些东西。 然后在另一个标签页面中打开我的网站,在那里我有一个脚本向ebay提出了一系列请求(您仍然登录)并在没有您注意的情况下向您出价购买奥迪A8。 烦人的…如果是你的银行,它可以直接从你那里偷钱。

具有讽刺意味的是,尽管有相同的原产地政策,上述攻击仍然是可能的。

出于安全原因,不允许您进行跨域AJAX调用 – 请参阅同源策略 。

这是出于安全考虑。 您可以在雅虎阅读所有相关内容以及解决方案。

值得注意的是,您并未完全排除javascript中的跨域请求。

从jQuery 1.2开始,如果指定JSON-P回调并且您调用的URL支持JSON-P输出,则可以加载位于另一个域的JSON数据。

以下示例直接来自jQuery文档。 它抓住了标有“猫”的最后四张flickr照片。

 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i,item){ $("").attr("src", item.media.m).appendTo("#images"); if ( i == 3 ) return false; }); }); 

你可以在这里阅读文档: http : //docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

我个人用它在我的博客上提取我的最新推文,而不必将其构建到我的服务器端代码中。 这还有一个额外的好处,就是不必为Twitter经常出错的API服务编写error handling代码。 如果您想看到它,请在我的博客上查看源代码: http : //joreteg.com

首先,我必须假设你有一个很好的理由做一些链接默认用JavaScript做的事情…

主要原因可能是安全性:您无法从JavaScript访问当前域之外的任何数据。

尝试添加

 Header add Access-Control-Allow-Origin: "http://yoursite.com/" 

在htaccess.send中使用了一些参数

 $("#g").load("http://www.google.com",{nomeaning:'nomeaning'}); 

这将发送一个post request.it为我工作