Question

在使用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文件替换google url时，它运行正常。

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

它的设计是否像这样工作（如果是，为什么？）或者我做错了什么？

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

Answer 1

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

解决此问题的一种方法是创建一个服务器脚本，为您加载页面 - 基本上是代理。然后你打电话
```
$('#g').load("load.php?url=google.com")
```
另一个解决方案是使用iframe进行沟通 - 我找到了这个图书馆，这似乎就是您所需要的：jquery-crossframe
第三个选项是JSONP，但这不适用于您的情况。

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

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

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

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

Answer 2

出于安全原因，您不允许进行跨域AJAX调用 - 请参阅Same Origin Policy。

Answer 3

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

Answer 4

值得注意的是，您并没有完全排除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

Answer 5

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

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

Answer 6

尝试添加

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

在htaccess.send中使用

的一些参数

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

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

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

6 个答案: