2009-08-18 68 views
9

在使用jQuery学习Ajax请求的过程中,我尝试在点击链接时加载google主页。所以我写了类似:为什么不能从jQuery加载方法加载外部资源?

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

而且地方:

<a id="ajax" href="http://www.google.com">Load file ajax way</a> 
<div id="g">Click the above link to load the page...</div> 

,没有工作,最初我以为有一些语法错误或东西。但后来当我用服务器上的静态HTML文件替换谷歌网址时,它正常运行。

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

它的设计是这样工作吗(如果是的话,为什么?)还是我做错了什么?

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

回答

34

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

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

    $('#g').load("load.php?url=google.com") 
    
  • 另一个解决办法是使用iframe的沟通 - 我发现这个库,这似乎是你所需要的:jquery-crossframe

  • 第三个选项是JSONP但是这是行不通的它是你的情况。

我的意见 - 请与服务器端代理的第一个选项。


为什么会有相同的原产地规定?

想象一下,你正在检查你的易趣账户上的一些东西。然后在另一个选项卡中打开我的网站,在那里我有一个脚本,它提出了一系列eBay请求(您仍然登录),并且在没有您注意的情况下为您投标奥迪A8。讨厌......如果是你的银行,它可以直接从你那里偷钱。

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

+3

+1非常棒的答案。 – 2009-12-13 02:20:01

+2

非常全面和完整的答案 – 2011-02-22 14:39:15

+0

因此load.php只是读取查询的域并存储内容? – 3zzy 2012-11-28 10:41:29

1

这是由于安全性。您可以在yahoo以及解决方案中阅读所有内容。

0

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

主要的原因可能是安全的:你不能访问任何数据在JavaScript的当前域之外。

+0

我没有任何理由这样做。我只是在学习jQuery和Ajax调用(并且天真地试图使用谷歌)。因此,我可能永远不需要打电话给其他服务器,但如果需要的话,了解解决方案仍然很好(由Andy提出)。 – Hemant 2009-08-18 08:25:23

1

值得注意的是,您并未完全排除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){ 
     $("<img/>").attr("src", item.media.m).appendTo("#images"); 
     if (i == 3) return false; 
     }); 
    }); 

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

我个人使用它在我在我的博客最新的鸣叫拉而无需将其打造成为我的服务器端代码。这还具有额外的好处,就是不必为Twitter中常见的API服务编写错误处理代码。只要查看我的博客来源,如果你想看到它:http://joreteg.com

0

尝试添加

<IfModule mod_headers.c>Header add Access-Control-Allow-Origin: "http://yoursite.com/" 

在htaccess.send一些使用

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

参数,这将发个帖子request.it工作对我来说