2009-08-18 4 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> 

動作しませんでしたし、最初に私はいくつかの構文エラーか何かがあると思いました。しかし、後で私はGoogleのURLをサーバー上の静的なHTMLファイルに置き換えたとき、正しく動作しました。

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

このように機能するように設計されていますか(そうであれば、なぜですか)、何か間違っていますか?

編集:誰でも、クロスドメインajaxコールで導入されたセキュリティ問題を説明(または参照)できますか?言い換えれば、別のブラウザタブを開いてgoogleを開いても、ページ内から開くのはなぜ安全なのですか?それは呼び出し元または呼び出し先を保護することですか?

答えて

34

Jqueryはajax(XMLHttpRequest)リクエストを使用してデータをロードしますが、ブラウザは同じドメインのリソースに対してこれを許可します。 (上記の回答はSame origin policyです)。そのため、Temp.htmでは動作しますが、www.google.comでは動作しません。

  • これを回避する方法の1つは、ページを読み込むサーバースクリプト(基本的にはプロキシ)を作成することです。そして、あなたは他のソリューションは、通信のためのiframeを使用することです

    $('#g').load("load.php?url=google.com") 
    
  • を呼ぶ - 私はあなたが必要なもののようだという、このライブラリを見つけました:jquery-crossframe

  • 第三の選択肢がJSONPですが、それは動作しませんそれはあなたの場合。

私の意見は、サーバー側のプロキシで最初のオプションになります。


元のポリシーが同じ理由は何ですか?

あなたのeBayアカウントで何かをチェックしているとします。その後、別のタブであなたは私のサイトを開き、eBayへの一連のリクエスト(あなたはまだログインしている)を作成し、気づかずにAudi A8に入札するスクリプトを持っています。迷惑...あなたの銀行なら、それはあなたから直接お金を盗むことができます。

同じアイデンティティポリシーにもかかわらず、上記の攻撃はまだ可能です。

+3

+1すばらしい答え。 –

+2

非常に徹底的で完全な答え –

+0

ですので、load.phpは照会されたドメインを読み込んで内容を保存するだけですか? – 3zzy

2

セキュリティ上の理由から、クロスドメインAJAXコールは許可されていません。Same Origin Policyを参照してください。

1

これはセキュリティのためです。 yahooの解決策とともに、すべてのことを読むことができます。

0

まず第一に、私はあなたがリンクはJavaScriptを使用して、デフォルトではない何かをする非常に良い理由を持っていることを前提としなければならない...

主な理由は、おそらくセキュリティです:あなたは、任意のデータにアクセスすることはできませんJavaScriptから現在のドメインの外部にあります。

+0

私はこれを行う理由はありません。私はjQueryとAjaxの呼び出しを学ぶためにこれをやっていました(そして、素朴にGoogleを使ってみました)。だからおそらく私は決して他のサーバーを呼び出す必要はないかもしれませんが、必要な場合には解決策を知っておくことはまだ良いです(Andyによって示唆された)。 – Hemant

1

JavaScriptのクロスドメインリクエストから完全に除外されているわけではありません。

jQuery 1.2以降、JSON-Pコールバックを指定すると別のドメインにあるJSONデータを読み込むことができ、呼び出したURLはJSON-P出力をサポートします。

次の例は、jQueryドキュメントの内容です。それは "cat"とタグ付けされた最後の4つの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サービスのエラー処理コードを書く必要がないという利点もあります。これはポストrequest.itが働いお送りしますhttp://joreteg.com

0

試み追加htaccess.sendで

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

いくつかのパラメータ

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

を使用して:あなたはそれを見たい場合はちょうど私のブログ上でソースを表示私にとっては

関連する問題