Avec le développement rapide de l'Internet mobile, de plus en plus de sites Web commencent à utiliser l'API Web pour fournir des services de données. Lorsque nous utilisons l'API Web pour obtenir des données sur le front-end, nous utilisons généralement AJAX pour effectuer des requêtes asynchrones. Cependant, en raison des restrictions de la politique de même origine du navigateur, AJAX ne peut demander des données qu'au serveur de même origine, ce qui limite la capacité du frontal à obtenir des données.
Afin de résoudre des problèmes inter-domaines, la technologie jsonP a vu le jour. Apprenons-en davantage sur l'application de jsonP dans l'acquisition de données frontales.
1. Principe JSONP
JSONP (JSON avec remplissage) est une méthode de transmission de données inter-domaines et obtient des données JSON en ajoutant dynamiquement des balises de script. Le principe d'utilisation de JSONP dans le front-end est le suivant :
Tout d'abord, le front-end initie une requête JSONP au serveur, et l'adresse de la requête est une adresse inter-domaines. L'URL de la requête JSONP doit contenir un paramètre de rappel. Le backend génère les données JSON de réponse basées sur ce paramètre et les renvoie au frontend sous la forme d'un appel de fonction. Le frontend analyse et traite ensuite les données de réponse.
Le processus spécifique est illustré dans la figure ci-dessous :
2. Le serveur répond à la requête JSONP
La fin actuelle initie une requête JSONP et le serveur doit répondre correctement à la requête. Pour les requêtes JSONP, le serveur doit renvoyer une fonction JavaScript avec un nom spécifié et appeler les données JSON générées par le serveur lorsque la fonction est appelée. Voici un exemple de réponse JSONP :
Pour résumer, le serveur doit implémenter les points suivants :
3. Traitement frontal de la réponse JSONP
Lorsque le serveur répond correctement à la requête JSONP, le front-end doit traiter correctement les données de réponse. Ce que le front-end doit faire est la suivante :
Ce qui suit est un exemple de traitement JSONP :
Enfin, une chose que nous devons noter est que lors d'une requête JSONP, puisque les données de réponse seront renvoyées sous forme de JavaScript, si les données renvoyées contiennent des instructions JavaScript , alors le traitement d'échappement est requis, sinon cela affectera l'exécution du code frontal. Les fonctions d'échappement courantes incluent la fonction $.parseJSON() de jQuery et la fonction JSON.parse() de JavaScript.
A suivre...
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!