jQuery AJAX dominio cruzado
Aquí hay dos páginas, test.php y testerver.php.
prueba.php
<script src="scripts/jq.js" type="text/javascript"></script>
<script>
$(function() {
$.ajax({url:"testserver.php",
success:function() {
alert("Success");
},
error:function() {
alert("Error");
},
dataType:"json",
type:"get"
}
)})
</script>
servidor de pruebas.php
<?php
$arr = array("element1",
"element2",
array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>
Ahora mi problema: cuando ambos archivos están en el mismo servidor (ya sea localhost o servidor web), funciona y alert("Success")se llama; Si está en servidores diferentes, es decir, testerver.php en el servidor web y test.php en localhost, no funciona y se alert("Error")está ejecutando. Incluso si la URL dentro de AJAX se cambia ahttp://domain.example/path/to/file/testserver.php
Utilice JSONP .
jQuery:
$.ajax({
url:"testserver.php",
dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
success:function(json){
// do stuff with json (in this case an array)
alert("Success");
},
error:function(){
alert("Error");
}
});
PHP:
<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>
El eco puede estar incorrecto, ha pasado un tiempo desde que usé php. En cualquier caso, es necesario tener en callbackName('jsonString')cuenta las comillas. jQuery pasará su propio nombre de devolución de llamada, por lo que deberá obtenerlo de los parámetros GET.
Y como publicó Stefan Kendall, $.getJSON() es un método abreviado, pero luego debe agregarlo 'callback=?'a la URL como parámetro GET (sí, el valor es ?, jQuery lo reemplaza con su propio método de devolución de llamada generado).
JSONP es una buena opción, pero existe una forma más sencilla. Simplemente puede configurar el Access-Control-Allow-Originencabezado en su servidor. Configurarlo en *aceptará solicitudes AJAX entre dominios desde cualquier dominio. ( https://developer.mozilla.org/en/http_access_control )
Por supuesto, el método para hacer esto variará de un idioma a otro. Aquí está en Rails:
class HelloController < ApplicationController
def say_hello
headers['Access-Control-Allow-Origin'] = "*"
render text: "hello!"
end
end
En este ejemplo, la say_helloacción aceptará solicitudes AJAX de cualquier dominio y devolverá una respuesta de "¡hola!".
A continuación se muestra un ejemplo de los encabezados que podría devolver:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive
Por muy fácil que sea, tiene algunas limitaciones del navegador. Consulte http://caniuse.com/#feat=cors .
Puede controlar esto a través del encabezado HTTP agregando Access-Control-Allow-Origin . Establecerlo en * aceptará solicitudes AJAX entre dominios desde cualquier dominio.
Usar PHP es realmente simple, simplemente agregue la siguiente línea en el script al que desea tener acceso fuera de su dominio:
header("Access-Control-Allow-Origin: *");
No olvide habilitar el módulo mod_headers en httpd.conf.
