Perché non posso caricare una risorsa esterna dal metodo di caricamento jQuery?

Question

Durante il processo di apprendimento delle richieste Ajax tramite jQuery, ho provato a caricare la home page di Google al clic di un collegamento. Così ho scritto qualcosa di simile:

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

E da qualche parte nel corpo:

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

che non ha funzionato e inizialmente ho pensato che ci sia qualche errore di sintassi o qualcosa del genere. Ma più tardi, quando ho sostituito l'URL di Google con un file html statico sul server, ha funzionato correttamente.

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

È progettato per funzionare in questo modo (se sì, perché?) O sto facendo qualcosa di sbagliato?

MODIFICA: Qualcuno può spiegare (o fare riferimento) al problema di sicurezza introdotto dalle chiamate ajax tra domini diversi? In altre parole, perché è sicuro aprire un'altra scheda del browser e aprire Google ma NON dalla pagina? È per proteggere il chiamante o il chiamato?

Answer 1

Jquery utilizza una richiesta ajax (XMLHttpRequest) per caricare i dati, ma il browser lo consente per le risorse nello stesso dominio. (Le risposte sopra citano lo Same origin policy). Ecco perché funziona con Temp.htm, ma non su www.google.com.

• Un modo per aggirare il problema è quello di creare uno script server che caricare la pagina per voi - fondamentalmente un proxy. Poi si chiama

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

• L'altra soluzione è quella di utilizzare iframe per la comunicazione - Ho trovato questa biblioteca, che sembra essere quello che ti serve: jquery-crossframe

• Una terza possibilità è JSONP ma che non avrebbero funzionato è il tuo caso.

La mia opinione: andare per la prima opzione con un proxy sul lato server.

---

Perché esiste una stessa politica di origine?

Immagina di controllare alcune cose sul tuo account ebay. Poi in un'altra scheda apri il mio sito, dove ho uno script che fa una serie di richieste a ebay (sei ancora loggato) e ti offro per una Audi A8 senza che tu te ne accorga. Fastidioso ... Se fosse la tua banca, può direttamente rubare denaro a te.

L'ironia è che nonostante la stessa politica di origine, l'attacco di cui sopra è ancora possibile.

Answer 2

Non è consentito effettuare chiamate AJAX tra domini per motivi di sicurezza - vedere Same Origin Policy.

Answer 3

Ciò è dovuto alla sicurezza. Puoi leggere tutto su di esso insieme a una soluzione a yahoo.

Answer 4

Prima di tutto, devo supporre che si dispone di una buona ragione per fare qualcosa che fa un link di default con JavaScript ...

Il motivo principale è probabilmente la sicurezza: non è possibile accedere a tutti i dati al di fuori del dominio corrente da JavaScript.

Answer 5

Vale la pena notare che non è completamente escluso dalle richieste tra domini in javascript.

A partire da jQuery 1.2, è possibile caricare i dati JSON situati su un altro dominio se si specifica un callback JSON-P e l'URL che si chiama supporta l'output JSON-P.

Il seguente esempio è direttamente dai documenti jQuery. Cattura le ultime quattro foto di flickr taggate con "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; 
     }); 
    }); 

Potete leggere la documentazione qui: http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

Personalmente lo uso per tirare nel mio ultimo tweet sul mio blog senza dover costruire nel mio codice lato server. Questo ha anche l'ulteriore vantaggio di non dover scrivere codice di gestione degli errori per il servizio API spesso chiazzato da Twitter. Basta vedere sorgente sul mio blog se vuoi vederlo: http://joreteg.com

Answer 6

provare ad aggiungere

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

in htaccess.send alcuni parametri utilizzando

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

questo invierà un post request.it lavorato per me