Al encontrar problemas de dominio cruzado en el desarrollo del proyecto, generalmente se resuelven a través de JSONP. Pero qué es JSONP y cuál es el principio de implementación. Puede estudiarlo cuidadosamente durante el tiempo libre del proyecto.
1. ¿Qué es JSONP?
Para entender JSONP, tengo que mencionar JSON, entonces, ¿qué es JSON?
JSON es un subconjunto de la notación literal de objetos de JavaScript. Dado que JSON es un subconjunto de JavaScript, se puede usar en el lenguaje sin MUSS ni alboroto.
JSONP (JSON WITH RELDING) es un protocolo no oficial que permite la integración de las etiquetas de script en el lado del servidor regresar al cliente, y el acceso de dominio cruzado se logra a través de la forma de devolución de llamada de JavaScript (esta es solo una simple implementación de JSONP).
2. ¿De qué sirve JSONP?
Debido a la limitación de la política del mismo origen, XMLHTTPRequest solo permite los recursos de la fuente actual (nombre de dominio, protocolo, puerto). Para implementar solicitudes de dominio cruzado, las solicitudes de dominio cruzado se pueden implementar a través de etiquetas de script y luego emitir datos JSON en el servidor y ejecutar funciones de devolución de llamada, resolviendo así las solicitudes de datos de dominio cruzado.
La generación de JSONP
1. Como todos sabemos, los recursos de solicitud de AJAX están restringidos por el mismo dominio, ya sean recursos estáticos, páginas dinámicas o servicios web.
2. Al mismo tiempo, descubrimos que al llamar a los archivos JS en la página web, no se ven afectados por el dominio cruzado (no solo eso, también encontramos que todas las etiquetas con el atributo 'SRC' tienen capacidades de dominio cruzado, como <script>, <img>, <iframe>, etc.)
3. Se puede imaginar que en la actualidad, si desea acceder a datos a través de dominios a través de la web (controles activos, agentes del servidor, websockets HTML5, etc.), solo hay una posibilidad, es decir, el servidor cargará los datos en un archivo de formato JS para que el cliente llame y procese y procese
4. Transmisión de datos. Sabemos que un formato de datos de personajes puros llamado JSON puede describir concisamente estructuras de datos complejas, y JS también es compatible de forma nativa. Puede procesar fácilmente los datos en este formato en el cliente.
5. La solución es clara de un vistazo. El lado web llama a los archivos JS generados dinámicamente en el servidor de dominio cruzado de la misma manera que el script de llamadas. La razón por la cual el servidor quiere generar archivos JS dinámicamente es obtener el nombre de la función de devolución de llamada del cliente y pasar los datos requeridos por el cliente en formato JSON (o String Pure).
6. Después de que el cliente llama con éxito el archivo JS, se obtienen los parámetros en la función de devolución de llamada. El resto es el procesamiento de los datos. Este método se ve muy similar a Ajax, pero no es el mismo (jQuery encapsula JSONP y AJAX juntos, y si no lo entiende, lo confundirá)
7. Para facilitar al cliente usar datos, se ha formado gradualmente un protocolo de transmisión informal. La gente lo llama JSONP. Uno de los puntos clave de este protocolo es permitir a los usuarios pasar un parámetro de devolución de llamada al servidor. Cuando el servidor devuelve datos, el parámetro de devolución de llamada se utilizará como nombre de función para envolver los datos JSON, para que el cliente pueda personalizar sus propias funciones para procesar automáticamente los datos de retorno.
Ok, no sé si entiendes JSONP. Si no, lo resumiré. Si no lo tienes, no me golpees.
De hecho, el principio es que el cliente solicita un enlace y agrega los parámetros requeridos. La devolución de llamada significa que es una solicitud JSONP (el front-end y el back-end pueden unificarse por sí mismos). El fondo analiza el enlace de solicitud y encuentra que es una solicitud JSONP. Luego genera un método de llamada y genera dinámicamente una cadena (puede ser JSON o una cadena pura) de acuerdo con los parámetros de solicitud. De esta manera, el cliente puede acceder a los datos y realizar el procesamiento posterior.
Habiendo dicho tanto, no es mi estilo no agregar código, estoy agregando código. .
función test (data) {console.log (data)} var url = "http://www.x.com/test?a=1&callback=test" // El parámetro un valor de 1 a x.com/test, y dígale que el nombre de la función a los que se les llame es "Test" // el fondo intercepta el valor de la llamada, sabiendo que un método de llamado es generado, el nombre de método es el nombre de los parámetros, y se analiza ", y los parámetros se transfieren. El procesamiento de antecedentes genera la siguiente prueba de prueba ("AAAAAAA") ({A: 1, B: 2}) // Luego el extremo frontal accede y lo ejecuta a través de la etiqueta de script, el script var script = document.createElement ('script'); script.setTribute ('src', url); // Agregar la etiqueta de script al encabezado y luego la llamada de llamadas de la llamada de llamadas de la llamada, y luego el script inicial document.getElementsByTagName ('Head') [0] .AppendChild (script); // Luego se llamará al método de prueba de página, que es el principio de implementación de JSONP.Sobre la realidad de JSONP en jQuery
$ .AJAX ({type: "get", url: "http: //xdcn/asych/adv.html? loc = 8 & callback =?", // dígale a los antecedentes que esta es una solicitud de JSONP, ¿qué método debe llamarse? Si es "?", Jq, lo generará automáticamente para usted (si usa JQ, es generalmente establecido con ", ¿por lo que se llama"? activado en el éxito) Tipo: "POST", // JSONP solo puede enviar solicitudes GET, incluso si estableció el tipo de solicitud en postdatatype: "jsonp", // decir jQuery que este es un datos de JSONP, debe generar etiquetas de script para cargar jsdata: {a: "1"},/*éxito: función (datos) {// métodos que jq será ejecutado después del éxito (si el calleter es el? $ ("Body"). Append (data);},*/error: function (xmlhttprequest, textStatus, errorthrown) {//alert(errorthrown); }).done(function(data) =$(" ).append(data);});Después de leer el código y los comentarios anteriores, creo que todos lo entienden. Aunque JQuery encapsula JSONP en AJAX, es esencialmente diferente.
El núcleo de AJAX es obtener contenido que no sea esta página a través de XMLHTTPRequest, mientras que el núcleo de JSONP es agregar dinámicamente etiquetas <script> para llamar a los scripts JS proporcionados por el servidor.
Por lo tanto, la diferencia entre AJAX y JSONP no es si se cruzan. AJAX también puede lograr el dominio cruzado a través del proxy del lado del servidor, y JSONP en sí no excluye la adquisición de datos en el mismo dominio.
Como se mencionó anteriormente, los formatos de datos de JSONP y AJAX no tienen que ser JSON, pero también pueden ser cadenas puras.
En resumen, JSONP no es un subconjunto de AJAX, e incluso si JQuery encapsula JSONP en AJAX, no puede cambiar esto.
Lo anterior es una explicación detallada del ejemplo de solicitud de dominio cruzado de JS JSOP que se le presenta. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!