代码之家 › 专栏 › 技术社区 › Hemant

为什么我不能从jquery加载方法加载外部资源?

ajax jquery

Hemant · 技术社区 · 15 年前

在使用jquery学习Ajax请求的过程中,我尝试通过单击链接加载Google主页。所以我写了如下的东西:

$("#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文件替换GoogleURL时,它工作正常。

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

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

编辑:有人能解释(或参考)跨域Ajax调用带来的安全问题吗?换句话说,为什么打开另一个浏览器标签并打开谷歌而不是从页面内打开是安全的?是保护呼叫者还是被呼叫者?

6 回复 | 直到 10 年前

Emil Ivanov 15 年前

jquery使用Ajax(xmlhttpRequest)请求加载数据,但浏览器允许在同一域中使用该请求。(上述答案提到 Same origin policy )这就是为什么它与temp.htm一起工作,而不是www.google.com。

解决这个问题的一种方法是创建一个服务器脚本,它将为您加载页面——基本上是一个代理。然后你打电话来
```
$('#g').load("load.php?url=google.com")
```
另一个解决方案是使用iframes进行通信-我发现了这个库,这似乎是您需要的: jquery-crossframe
第三种选择是 JSONP 但这对你来说不起作用。

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

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

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

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

Greg 15 年前

出于安全原因,不允许进行跨域Ajax调用-请参阅 Same Origin Policy .

Andy Gaskell 15 年前

这是出于安全考虑。你可以在上阅读有关它的所有信息和解决方案。 yahoo .

Henrik Joreteg 15 年前

值得注意的是,在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

就我个人而言,我使用它在我的博客上拉入我最新的tweets,而不必将其构建到我的服务器端代码中。这还有一个额外的好处,即不必为Twitter中经常出现问题的API服务编写错误处理代码。如果你想看的话,只需在我的博客上查看来源: http://joreteg.com

Hemant 15 年前

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

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

Kavita 10 年前

尝试添加

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

在htaccess.send中使用

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

这将发送一个邮件请求。它对我有效。