¿Por qué no puedo cargar un recurso externo desde el método de carga jQuery?

Question

En el proceso de aprendizaje de las solicitudes de Ajax utilizando jQuery, traté de cargar la página de inicio de Google con un clic en un enlace. Así que escribí algo como:

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

Y en algún lugar en el cuerpo:

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

que no funcionaba y en un principio pensé que hay algún error de sintaxis o algo así. Pero más tarde, cuando reemplacé la url de google con un archivo html estático en el servidor, funcionó correctamente.

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

¿Está diseñado para trabajar como esto (si es así, ¿por qué?) O estoy haciendo algo mal?

EDITAR: ¿Alguien puede explicar (o remitir) el problema de seguridad introducido por las llamadas de dominio cruzado ajax? En otras palabras, ¿por qué es seguro abrir otra pestaña del navegador y abrir Google pero NO desde dentro de la página? ¿Es para proteger a la persona que llama o al que llama?

Answer 1

Jquery utiliza una solicitud ajax (XMLHttpRequest) para cargar los datos, pero el navegador permite esto para los recursos en el mismo dominio. (Las respuestas anteriores mencionan el Same origin policy). Es por eso que funciona con Temp.htm, pero no con www.google.com.

• Una forma de evitar esto es crear un script de servidor que cargará la página por usted, básicamente un proxy. Posteriormente, se llama

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

• La otra solución es utilizar marcos flotantes para la comunicación - me encontré con esta biblioteca, que parece ser lo que necesita: jquery-crossframe

• Una tercera opción es JSONP pero eso no iba a funcionar es tu caso

Mi opinión: busque la primera opción con un proxy del lado del servidor.

---

¿Por qué hay una misma política de origen?

Imagine que está revisando algunas cosas en su cuenta de eBay. Luego, en otra pestaña, abres mi sitio, donde tengo un script que realiza una serie de solicitudes a eBay (todavía estás conectado) y te ofrece un Audi A8 sin que te des cuenta. Molesto ... Si fuera su banco, directamente puede robarle dinero.

La ironía es que a pesar de la misma política de origen, el ataque anterior aún es posible.

Answer 2

No tiene permitido hacer llamadas AJAX entre dominios por razones de seguridad - consulte Same Origin Policy.

Answer 3

Esto es debido a la seguridad. Puede leerlo al respecto junto con una solución al yahoo.

Answer 4

En primer lugar, tengo que suponer que usted tiene una muy buena razón para hacer algo que hace un enlace por defecto con JavaScript ...

La razón principal es probablemente la seguridad: no se puede acceder a los datos fuera del dominio actual de JavaScript.

Answer 5

Vale la pena señalar que no está completamente excluido de solicitudes de dominio cruzado en JavaScript.

A partir de jQuery 1.2, puede cargar datos JSON ubicados en otro dominio si especifica una devolución de llamada JSON-P y la URL a la que llama admite salida JSON-P.

El siguiente ejemplo es directamente desde los documentos de jQuery. Captura las últimas cuatro imágenes de flickr etiquetadas con "gato".

$.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; 
     }); 
    }); 

Usted puede leer los documentos aquí: http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

Personalmente lo uso para tirar en mis últimos tweets en mi blog sin tener que construir en mi código del lado del servidor. Eso también tiene el beneficio adicional de no tener que escribir el código de manejo de errores para el servicio de API a menudo irregular de Twitter. Sólo ver la fuente en mi blog si quieres verlo: http://joreteg.com

Answer 6

trate de añadir

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

en htaccess.send algunos parámetros utilizando

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

esto enviará un mensaje trabajó request.it para mí