Почему я не могу загрузить внешний ресурс из метода загрузки jQuery?

в процессе изучения Ajax-запросов с помощью jQuery я попытался загрузить домашнюю страницу 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>

который не работал, и изначально я думал, что есть какая-то синтаксическая ошибка или что-то еще. Но позже, когда я заменил url google статическим html-файлом на сервере, он работал правильно.

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

предназначен ли он для такой работы (если да, то почему?) или я делаю что-то не так?

EDIT: пожалуйста, кто-нибудь может объяснить (или сослаться) проблему безопасности, введенную междоменными вызовами ajax? Другими словами, почему безопасно открыть другую вкладку браузера и открыть google, но не изнутри страницы? Это для защиты звонящего или вызываемого?

9
ajax jquery

6 ответов

Jquery использует запрос ajax (XMLHttpRequest) для загрузки данных, но браузер разрешает это для ресурсов в том же домене. (В ответах выше упоминается та же политика происхождения). Вот почему он работает с Темп.htm, но не www.google.com.

  • один из способов обойти это-создать сценарий сервера, который загрузит страницу для вас - в основном прокси. Тогда вы звоните

    $('#g').load("load.php?url=google.com")

  • другое решение-использовать iframes для связи - я нашел эту библиотеку, это, кажется, то, что вам нужно:в jQuery-crossframe

  • третий вариант -JSONP но это не сработает в вашем случае.

мое мнение-перейдите к первому варианту с прокси на стороне сервера.

почему же происхождения политики?

представьте, что вы проверяете некоторые вещи на своей учетной записи ebay. Затем в другой вкладке вы открываете мой сайт, где у меня есть скрипт, который делает серию запросов на ebay (вы все еще вошли в систему) и предлагает вам Audi A8, даже не заметив. Раздражающий... Если это был ваш банк, он может напрямую украсть у вас деньги.

ирония заключается в том, что, несмотря на ту же политику происхождения, вышеуказанная атака все еще возможна.

35

вам не разрешено совершать междоменные вызовы AJAX по соображениям безопасности-см. Та Же Политика Происхождения.

2

Это из-за безопасности. Вы можете прочитать все об этом вместе с раствором в yahoo.

1

стоит отметить, что вы не полностью исключены из междоменных запросов в javascript.

начиная с jQuery 1.2, вы можете загрузить данные JSON, расположенные в другом домене, если вы укажете обратный вызов JSON-P, а URL-адрес, который вы вызываете, поддерживает вывод JSON-P.

следующий пример прямо из документов jQuery. Он захватывает последние четыре фотографии flickr с тегом "cat".

$.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

лично я использую его, чтобы вытащить мои последние твиты в моем блоге без необходимости встроить его в мой серверный код. Это также имеет дополнительное преимущество в том, что не нужно писать код обработки ошибок для часто пятнистой службы API из Twitter. Просто посмотреть источник на мой блог, если хочешь увидеть это: http://joreteg.com

1

прежде всего, я должен предположить, что у вас есть очень веская причина сделать что-то, что ссылка делает по умолчанию с JavaScript...

основная причина, вероятно, безопасность: вы не можете получить доступ к любым данным за пределами текущего домена из JavaScript.

0

попробуйте добавить 

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

в htaccess.отправить некоторые параметры с помощью 

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

это отправит запрос post.это сработало для меня

0