El principio de las
solicitudes jsonp Ajax se ve afectado por la política del mismo origen y las solicitudes entre dominios no están permitidas, mientras que el enlace en el atributo src de la etiqueta de script puede acceder a scripts js entre dominios. Con esta función, el servidor ya no devuelve datos en formato JSON, pero devuelve un fragmento de código js que llama a una función y la llama en src, logrando así un dominio cruzado.
Implementación:
1: Construya el archivo jsonp.php
Lo siguiente usa JSONP para eliminar la solicitud ajax en el código de front-end, agregar una etiqueta de script y el src de la etiqueta apunta al script remote.js bajo otro dominio
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
console.log(data)
alert("age:" + data.age + "name:" + data.name);
}
</script>
</script>
<script type="text/javascript" src="http://10.228.11.159/phplist/remote.js"></script>
</body>
</html>
Aquí se llama al script cross-domain remote.js, y el código remote.js es el siguiente:
jsonhandle({
"age" : 15,
"name": "John",
})
Es decir, este código js remoto ejecuta la función definida anteriormente, y aparece un cuadro de aviso
2: Modifique el código del front-end nuevamente, el código es el siguiente
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript">
function jsonhandle(data){
alert("age:" + data.age + "name:" + data.name);
}
</script>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://10.228.11.159/jsonp.php?&callback=jsonhandle";
var obj = $('<script><\/script>');
obj.attr("src",url);
$("body").append(obj);
});
</script>
</body>
</html>
Aquí se agrega dinámicamente una etiqueta de secuencia de comandos, src apunta a una secuencia de comandos php de dominio cruzado y el nombre de la función js anterior se pasa como el parámetro de devolución de llamada, luego veamos cómo se escribe el código PHP:
<?php
$data = array(
'age' => 20,
'name' => '张三',
);
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")";
return;
El código PHP devuelve una declaración JS, a saber
jsonhandle({
"age" : 15,
"name": "张三",
})
Cuando se accede a la página en este momento, se agrega dinámicamente una etiqueta de secuencia de comandos, src apunta a la secuencia de comandos PHP, se ejecuta el código JS devuelto y aparece un cuadro de diálogo con éxito.
Entonces, JSONP convierte el acceso a solicitudes entre dominios en ejecutar código JS remoto. El servidor ya no devuelve datos en formato JSON, sino que devuelve un fragmento de código de ejecución de función que toma datos JSON como parámetro de entrada.
3: Finalmente, jQuery proporciona una forma conveniente de usar JSONP, el código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<title>GoJSONP</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type : "get",
async: false,
url : "http://www.practice-zhao.com/student.php?id=1",
dataType: "jsonp",
jsonp:"callback", //请求php的参数名
jsonpCallback: "jsonhandle",//要执行的回调函数
success : function(data) {
alert("age:" + data.age + "name:" + data.name);
}
});
});
</script>
</body>
</html>
https://mp.weixin.qq.com/s/Q8AiQw1AxVxV8U-5Wv7fHA