Lorsqu'ils rencontrent des problèmes de domaine transversal dans le développement de projets, ils sont généralement résolus via JSONP. Mais qu'est-ce que JSONP et quel est le principe de mise en œuvre. Vous pouvez l'étudier attentivement pendant le temps libre du projet.
1. Qu'est-ce que JSONP?
Pour comprendre JSONP, je dois mentionner JSON, alors qu'est-ce que JSON?
JSON est un sous-ensemble de la notation littérale d'objet de JavaScript. Étant donné que JSON est un sous-ensemble de JavaScript, il peut être utilisé dans la langue sans muss ni agitation.
JSONP (JSON avec padding) est un protocole non officiel qui permet à l'intégration des balises de script du côté serveur de revenir au client, et l'accès à domaine croisé est réalisé via la forme de rappel JavaScript (ce n'est qu'une simple implémentation de JSONP).
2. À quoi sert JSONP?
En raison de la limitation de la politique d'origine homosexuelle, XMLHTTPRequest permet uniquement les ressources de la source actuelle (nom de domaine, protocole, port). Afin d'implémenter les demandes de domaine transversal, les demandes de domaine croisé peuvent être implémentées via des balises de script, puis la sortie des données JSON sur le serveur et exécuter les fonctions de rappel, résolvant ainsi les demandes de données du domaine croisé.
La génération de JSONP
1. Comme nous le savons tous, les ressources de demande AJAX sont limitées par le même domaine, qu'il s'agisse de ressources statiques, de pages dynamiques ou de services Web.
2. En même temps, nous avons constaté que lors de l'appel des fichiers JS sur la page Web, ils ne sont pas affectés par un domaine croisé (non seulement cela, nous avons également constaté que toutes les balises avec l'attribut 'src' ont des capacités inter-domaines, telles que <Script>, <Mg>, <frame>, etc.)
3. On peut imaginer que, à l'heure actuelle, si vous souhaitez accéder aux données entre les domaines via le Web (Contrôles ActiveX, agents de serveur, HTML5 WebSockets, etc.) Il n'y a qu'une seule possibilité, c'est-à-dire que le serveur chargera les données dans un fichier de format JS pour l'appel et le processus
4. Transmission de données. Nous savons qu'un format de données de caractère pur appelé JSON peut décrire de manière concise des structures de données complexes et est également soutenue nativement par JS. Il peut facilement traiter les données dans ce format sur le client.
5. La solution est claire en un coup d'œil. Le côté Web appelle les fichiers JS générés dynamiquement sur le serveur de domaine croisé de la même manière que le script d'appel. La raison pour laquelle le serveur souhaite générer des fichiers JS dynamiquement est d'obtenir le nom de la fonction de rappel du client et de passer les données requises par le client au format JSON (ou pure chaîne).
6. Après que le client ait appelé le fichier JS, les paramètres de la fonction de rappel sont obtenus. Le reste est le traitement des données. Cette méthode ressemble beaucoup à Ajax, mais ce n'est pas la même chose (JQuery résume JSONP et Ajax ensemble, et si vous ne comprenez pas, vous le confondez)
7. Afin de faciliter le client pour utiliser des données, un protocole de transmission informel a été progressivement formé. Les gens l'appellent JSONP. L'un des points clés de ce protocole est de permettre aux utilisateurs de transmettre un paramètre de rappel au serveur. Lorsque le serveur renvoie les données, le paramètre de rappel sera utilisé comme nom de fonction pour envelopper les données JSON, afin que le client puisse personnaliser ses propres fonctions pour traiter automatiquement les données de retour.
Ok, je ne sais pas si vous comprenez JSONP. Sinon, je vais le résumer. Si vous ne l’avez pas, ne me frappez pas.
En fait, le principe est que le client demande un lien et ajoute les paramètres requis. Le rappel signifie qu'il s'agit d'une demande JSONP (le front-end et le back-end peuvent être unifiés par eux-mêmes). L'arrière-plan analyse le lien de demande et constate qu'il s'agit d'une demande JSONP. Génère ensuite une méthode d'appel et génère dynamiquement une chaîne (peut être JSON ou une chaîne pure) en fonction des paramètres de demande. De cette façon, le client peut accéder aux données et effectuer un traitement ultérieur.
Cela dit, ce n'est pas mon style de ne pas ajouter de code, j'ajoute du code. .
Test de fonction (données) {console.log (data)} var url = "http://www.x.com/test?a=1&callback=test" // Passez le paramètre une valeur de 1 à x.com/test, et lui dire que le nom de la fonction à appeler est "test" // le nom de la méthode, sachant que la méthode d'appel est générée, le nom de la méthode, le pureté de concours est passé. Le traitement en arrière-plan génère le test suivant (Data Fictitetious) ("aaaaaa") Test ({a: 1, b: 2}) // puis le frontal accède et l'exécute via la balise de script, le script var ci-dessus = document.CreateElement ('script'); script.setAtTraut document.getElementsByTagName ('Head') [0] .APPEndChild (script); // La méthode de test de page sera alors appelée, qui est le principe de mise en œuvre de JSONP.À propos de la réalité de JSONP à jQuery
$ .ajax ({type: "get", URL: "http: //xdcn/asych/adv.html? loc = 8 & callback =?", // Dis l'arrière-plan qu'il s'agit d'une demande JSONP, quelle méthode doit être appelée? Si c'est généralement "?" déclenché sur le succès) Type: "Post", // JSONP ne peut envoyer que des demandes de get, même si je définis le type de demande sur postdatatype: "JSONP", // dire à jQuery $ ("Body"). APPEND (données);}, * / error: function (xmlhttprequest, textstatus, errorthrown) {//alert(errorthrown); }) :done(function(Data) {$("body" ..APPEND(DATA);});Après avoir lu le code et les commentaires ci-dessus, je crois que tout le monde le comprend. Bien que JQuery résume JSONP dans Ajax, il est essentiellement différent.
Le noyau de AJAX est d'obtenir un contenu autre que cette page via XMLHTTPREQUEST, tandis que le noyau de JSONP est d'ajouter dynamiquement les balises <cript> pour appeler les scripts JS fournis par le serveur.
Par conséquent, la différence entre Ajax et JSONP n'est pas de savoir s'il est un domaine croisé. AJAX peut également atteindre le domaine transversal via le proxy côté serveur, et JSONP lui-même n'exclut pas l'acquisition de données dans le même domaine.
Comme mentionné ci-dessus, les formats de données de JSONP et Ajax ne doivent pas être JSON, mais peuvent également être des cordes pures.
En bref, JSONP n'est pas un sous-ensemble d'Ajax, et même si JQuery résume JSONP en Ajax, il ne peut pas changer cela.
Ce qui précède est une explication détaillée de l'exemple de la demande de domaine croisé de JS JSOP qui vous a été présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!