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

Question

在使用 jQuery 学习 Ajax 请求的过程中，我尝试通过单击链接来加载 google 主页。所以我写了这样的内容:

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

body 某处:

<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 帐户上的一些内容。然后在另一个选项卡中打开我的网站，其中有一个脚本可以向 eBay 发出一系列请求(您仍然处于登录状态)，并在您没有​​注意到的情况下出价购买奥迪 A8。烦人...如果是你的银行，它可以直接从你那里偷钱。

讽刺的是，尽管有同源政策，上述攻击仍然是可能的。