Explication détaillée des étapes d'utilisation des requêtes inter-domaines jQuery+JSONP

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de jQuery+ Requête inter-domaines JSONP Quelles sont les précautions pour l'utilisation de jQuery+JSONP cross-. demande de domaine ? Voici quelques cas pratiques.

JSONP(JSON avec Padding) est un « modèle d'utilisation » de JSON qui peut être utilisé pour résoudre le problème de l'accès aux données inter-domaines par les navigateurs grand public. En raison de la politique de même origine, généralement située dans La page Web de server1.example.com ne peut pas communiquer avec un serveur autre que server1.example.com et HTML L'élément Grâce à cette politique ouverte de l'élément , les pages Web peuvent obtenir des scripts générés dynamiquement à partir d'autres sources. Données JSON, et ce modèle d'utilisation est appelé JSONP. Les données capturées à l'aide de JSONP ne sont pas du JSON, mais un JavaScript arbitraire. L'interpréteur JavaScript s'exécute au lieu d'analyser avec l'analyseur JSON.

Le paragraphe ci-dessus provient de l'Encyclopédie Baidu. Les concepts sont toujours aussi abstraits et difficiles à comprendre. L'expression la plus intuitive consiste à regarder des exemples. Après avoir vu trop d’exemples et compris ce point, vous apprendrez naturellement à le décrire de manière abstraite. C'est pourquoi on dit souvent que « l'apprentissage des connaissances est un processus allant de mince à épais, et d'épais à mince ». Bon, allons trop loin. Regardons directement un exemple.

Problème : Il existe une page locale demo.html qui doit obtenir des données de http://localhost:3561/User/GetAllNames et les afficher.

① Rédaction client

Le client utilise la méthode $.getJson fournie dans jQuery pour l'accès inter-domaines. getJson a 3 paramètres :

I. url : adresse de la demande

II. données : paramètres envoyés au serveur

III. rappel : fonction de rappel en cas de succès.

La méthode d'utilisation de getJson est fondamentalement la même que la méthode $.get ordinaire. La différence est que getJson doit ajouter la partie fixe callback=? Sera-t-il remplacé automatiquement ? est le nom de fonction correct pour exécuter la fonction de rappel. Ensuite, exploitez l'objet json renvoyé par le domaine étranger dans la fonction de rappel, et le paramètre de rappel de la fonction de rappel est l'objet json.

$.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) { for (var i = 0; i " + json[i] + " "); } }); ② Écriture côté serveur

La logique du serveur est principalement de sérialiser les données en json string , puis de les encapsuler sous la forme de "callback(json)". serveur. Ce qui suit est implémenté en C# :

public class UserController : Controller { public string GetAllNames(string callback) { string[] names = new string[] { "张三丰", "张无忌", "令狐冲", "杨过", "郭靖" }; JavaScriptSerializer jss = new JavaScriptSerializer(); string json = jss.Serialize(names); return string.Format("{0}({1})", callback, json); } } À ce stade, le problème a été résolu avec succès.

Réflexion : si le rappel a été écrit en dur sur le serveur (par exemple : return string.Format("moty({0})", json);), alors comment le client doit-il l'écrire ?

Référence :

$.ajax("http://localhost:3561/User/GetAllNames", { jsonpCallback: "moty", dataType: "jsonp", success: function(json) { for (var i = 0; i " + json[i] + " "); } } }); Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée de l'utilisation des modules node's process et child_process

vue2.0 boucle à travers et charge toutes les images Méthode