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

In the process of learning Ajax requests using jQuery, I tried to load google home page on the click of a link. So I wrote something like:

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

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

And somewhere in 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>

Which didn't work and initially I thought there is some syntax error or something. But later when I replaced the google url with a static html file on server, it worked correctly.

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

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

Is it designed to work like this (if yes, why?) or am I doing something wrong?

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

EDIT: Please can anyone explain (or refer) the security problem introduced by cross domain ajax calls? In other words, why it is safe to open another browser tab and open google but NOT from within the page? Is it to protect caller or callee?

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

6 个解决方案

#1

Jquery uses an ajax (XMLHttpRequest) request to load the data, but the browser allows this for resources on the same domain. (The answers above mention the Same origin policy). That's why it works with Temp.htm, but not www.google.com.

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

One way to get around this is to create a server script that will load the page for you - basically a proxy. Then you call

解决此问题的一种方法是创建一个服务器脚本，为您加载页面 - 基本上是一个代理。然后你打电话
```
$('#g').load("load.php?url=google.com")
```
The other solution is to use iframes for communication - I found this library, that seems to be what you need: jquery-crossframe

另一个解决方案是使用iframe进行通信 - 我找到了这个库，这似乎是你需要的：jquery-crossframe
A third options is JSONP but that would not work it your case.

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

My opinion - go for the first option with a server-side proxy.

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

Why is there a same origin policy?

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

Imagine that you are checking some stuff on your ebay account. Then in another tab you open my site, where I have a script that makes a series of requests to ebay (you are still logged in) and bids you for an Audi A8 without you even noticing. Annoying... If it was your bank it can directly steal money from you.

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

The irony is that despite the same origin policy, the above attack is still possible.

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

#2

You're not allowed to make cross-domain AJAX calls for security reasons - see Same Origin Policy.

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

#3

This is due to security. You can read all about it along with a solution over at yahoo.

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

#4

It's worth noting that you are not completely precluded from cross-domain requests in javascript.

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

As of jQuery 1.2, you can load JSON data located on another domain if you specify a JSON-P callback and the URL that you call supports JSON-P output.

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

The following example is straight from the jQuery docs. It grabs the last four flickr pics tagged with "cat".

以下示例直接来自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;
      });
    });

You can read the docs here: http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

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

Personally I use it to pull in my latest tweets on my blog without having to build it into my server-side code. That also has the added benefit of not having to write error handling code for the often spotty API service from Twitter. Just view source on my blog if you wanna see it: http://joreteg.com

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

#5

First of all, I have to assume that you have a very good reason to do something that a link does by default with JavaScript...

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

The main reason is probably security: You can NOT access any data outside of the current domain from JavaScript.

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

#6

try adding

尝试添加

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

in htaccess.send some parameters using

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

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

this will send a post request.it worked for me

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

#1

One way to get around this is to create a server script that will load the page for you - basically a proxy. Then you call

解决此问题的一种方法是创建一个服务器脚本，为您加载页面 - 基本上是一个代理。然后你打电话
```
$('#g').load("load.php?url=google.com")
```
The other solution is to use iframes for communication - I found this library, that seems to be what you need: jquery-crossframe

另一个解决方案是使用iframe进行通信 - 我找到了这个库，这似乎是你需要的：jquery-crossframe
A third options is JSONP but that would not work it your case.

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