¿Cuál es JSONP?
Baidu se ven casualmente en el sitio, hay que dar muchas explicaciones sobre JSONP, pero se siente como un todo, y después de leer muchos todavía aturdido, para muchas personas que son nuevos en JSONP sigue siendo difícil de entender, tratar de utilizar su propio el lenguaje para hablar de JSONP, ver si le ayuda.
En primer lugar, vamos a hablar de cómo se genera JSONP:
1, un problema bien conocido, la solicitud de dominios cruzados directa Ajax sin acceso a un problema de archivo comunes, no importa si son páginas estáticas, páginas web dinámicas, servicios web, WCF, siempre y cuando las solicitudes de varios dominios, será permitido.
2, pero también encontramos que el impacto de varios dominios no es si usted llama js en una página Web (No sólo eso, también se encontró que aquellos que tienen el atributo "src" de las etiquetas tienen la capacidad de varios dominios, como <\ script> , <\ img>, <\ iframe>).
3, por lo que se puede juzgar por la etapa actual si desea finalizar la web pura (controles ActiveX, servidor proxy, el futuro pertenece a HTML5 no es el WebSocket etc.) acceder a datos a través de dominios es único posible, que consiste en tratar en un servidor remoto js carga en el formato de datos, las llamadas de los clientes y para su posterior procesamiento.
4, como ocurre ya sabemos que hay algo que se llama pura carácter JSON descripción del formato de datos concisa de datos complejos, aún mejor es también js apoyo JSON nativo, por lo que este formato de los datos de proceso en el lado del cliente puede ser casi arbitraria.
5, con este tipo de soluciones listas para llegar, el cliente web llamando a la secuencia de comandos de la misma manera, al formato de archivo llamado JS generado dinámicamente en el servidor de dominios cruzados (generalmente JSON sufijo), es obvio por qué el servidor para generar dinámicamente JSON documento, el propósito es para cargar datos en las necesidades del cliente.
6, el cliente después de la llamada al éxito del archivo JSON, datos obtenidos también que necesitan, el resto se procesa de acuerdo con sus necesidades y muestran que esta forma de miradas de adquisición de datos remota mucho como AJAX, pero en realidad no es lo mismo.
7, con el fin de facilitar el uso de los datos del cliente, formado gradualmente un protocolo de transporte informal, que jsonp lo llaman, un punto del protocolo es permitir a los usuarios pasar un parámetro de devolución de llamada al servidor, el servidor a continuación, volver a los datos cuando el nombre de la función de devolución de llamada como parámetro para envolver los datos JSON de manera que los clientes pueden personalizar libremente su función para procesar automáticamente los datos devueltos.
Si cómo utilizar algunos parámetros vagos para una devolución de llamada, entonces tendremos ejemplos específicos para explicar más adelante.
JSONP aplicación específica del cliente:
Independientemente de jQuery Ye Hao, vale la pena mencionar ExtJs, u otro marco de apoyo jsonp del trabajo realizado detrás de las escenas que son los mismos, Me explico paso a paso para lograr jsonp del cliente:
1, sabemos que, incluso si el código de archivo entre dominios js (por supuesto, significa una política de seguridad de secuencias de comandos web), páginas web también se pueden ejecutar de manera incondicional.
Hay en la raíz de un servidor remoto remoteserver.com remote.js código del archivo es el siguiente:
alert('我是远程文件');
Allí, bajo un servidor local localserver.com jsonp.html código de la página es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="http://remoteServer.com/remote.js"></script>
</head>
<body>
</body>
</html>
Sin lugar a dudas, la página aparecerá una ventana de símbolo, que muestra el éxito de las llamadas entre dominios.
2. Ahora se define una función, y luego llamar a los datos de entrada en la página remote.js remotas jsonp.html.
jsonp.html código de la página es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
};
</script>
<script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>
</body>
</html>
código de documento remote.js es el siguiente:
localHandler ({ "resultado": "Me trajeron js de datos remota"});
ver los resultados después de la operación, la ventana de la página impulsó con éxito, se muestra la función local es llamada una entre dominios remota js tiene éxito, y también recibió con js remotas a los datos.
Muy contento, el propósito del acceso remoto a varios dominios a los datos obtenidos, básicamente, pero es un problema, ¿cómo dejo que los js remoto de funciones que debe llamar a los conocimientos locales ¿Cuál es el nombre de ella? Después de todo, el servicio es jsonp que tienen que hacer frente a una gran cantidad de clientes, y estos sirven a sus funciones locales no son los mismos ah? A continuación, mirar hacia abajo.
3, los desarrolladores inteligentes pueden pensar fácilmente, siempre y cuando el servidor js script proporciona se genera de forma dinámica en la línea de canto, por lo que la persona que llama puede pasar un parámetro en el pasado para indicar al servidor "Quiero función XXX código algunos llaman js, se volverá a mí", por lo que el servidor de lata de acuerdo con las necesidades del cliente para generar la escritura js y respondió a.
Mira la página de códigos jsonp.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
// 得到电影信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的电影结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?time=12m12d&callback=flightHandler";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>
Este cambio de código es relativamente grande, ya no pueden escribir directamente en el archivo de JS remotas muerto, pero Codificación de consulta dinámica, y esto es lo que la aplicación cliente jsonp de la parte central, el enfoque en este caso es la manera de hacerlo es llamar jsonp todo el proceso.
Vemos los parámetros de llamada URL aprobaron una vez, quiero decir al servidor para comprobar la jornada de información el 12 de diciembre, mientras que el parámetro de devolución de llamada indica al servidor que mi función de devolución de llamada local llamado flightHandler, así que por favor pasar los resultados de la consulta esta función llamada.
OK, el servidor está muy inteligente, esto se llama la generación de páginas flightResult.aspx por un tiempo este código para jsonp.html:
flightHandler({
"time": "12m12d",
"price": 39,
"tickets": 16
});
4. Hasta este punto, creo que ha sido capaz de comprender principio implementación del cliente jsonp, ¿verdad? El resto es acerca de cómo el paquete de código, con el fin de interactuar con la interfaz de usuario, que permite múltiples y repetidas llamadas
JQuery cómo lograr llamada jsonp?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Page</title>
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
alert('您查询到电影信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
},
error: function(){
alert('fail');
}
});
});
</script>
</head>
<body>
</body>
</html>
¿No es extraño? ¿Por qué esta vez no escribió flightHandler esta función? Y la operación de un éxito sorprendente!
Este es un crédito para el jQuery, jQuery cuando se trata tipo jsonp de Ajax (aunque el jQuery jsonp también incluido en el Ajax, pero, de hecho, que en realidad no son la misma cosa hijos), rellamada automática y ayuda a generar los datos tomados a cabo método de propiedad a la llamada para el éxito, por lo que no se enfríe?
suplemento
Por último, el Ajax y JSONP similitudes y diferencias añadido:
. 1, y jsonp ajax de estas dos tecnologías se llama "look" como un objeto, también, es una petición de URL, a continuación, el servidor devuelve los datos se procesan, y por lo tanto jQuery jsonp considerados como un marco. Ext ajax una forma de paquete.
2, pero el Ajax y jsonp en realidad algo diferente naturaleza. Ajax es adquirir el contenido no subyacente en esta página por XmlHttpRequest, mientras que el núcleo se añade dinámicamente jsonp
