Maison > Article > interface Web > Méthode de requête inter-domaines via jQuery+JSONP (tutoriel détaillé)

Méthode de requête inter-domaines via jQuery+JSONP (tutoriel détaillé)

亚连original: 2018-06-01 10:46:101541parcourir

Après avoir compris jsonp, tout le monde doit également comprendre que jsonp est principalement utilisé pour obtenir des données inter-domaines. Aujourd'hui, nous allons discuter en détail de la façon d'appliquer jsonp dans la pratique pour obtenir des

JSONP inter-domaines (JSON avec. Padding) est un « mode d'utilisation » de JSON qui peut être utilisé pour résoudre le problème de l'accès aux données entre domaines dans les navigateurs grand public. En raison de la politique de même origine, de manière générale, les pages Web situées sur server1.example.com ne peuvent pas communiquer avec des serveurs autres que server1.example.com, à l'exception de l'élément HTML 3f1c4e4b6b16bbbd69b2ee476dc4f83a Grâce à cette politique ouverte de l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a, les pages Web peuvent obtenir des données JSON générées dynamiquement à partir d'autres sources, et ce modèle d'utilisation est appelé JSONP. Les données capturées avec JSONP ne sont pas du JSON, mais du JavaScript arbitraire, qui est exécuté avec un interpréteur JavaScript au lieu d'être analysé avec un 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éponse : Étant donné que les deux parties à la question ne sont pas sur le même serveur, jsonp doit être utilisé pour l'accès inter-domaines.

① Écriture du 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 demande ;

II. data : paramètres envoyés au serveur

III.

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 callback=? à la partie paramètre après que l'url soit automatiquement remplacée par le bon ? one. Nom de la fonction 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.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <ul id="nameList"></ul>

  <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript">
    $.getJSON("http://localhost:3561/User/GetAllNames?callback=?", function(json) {
      for (var i = 0; i < json.length; i++) {
        $("#nameList").append("<li>" + json[i] + "</li>");
      }
    });
  </script>
</body>
</html>

　② Écriture côté serveur

La logique côté serveur est principalement de sérialiser les données dans une chaîne json, puis de les encapsuler sous la forme de "callback (json)" .Le rappel est généré automatiquement par jQuery Et le nom de la fonction est transmis au 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 serveur a un rappel codé en dur (par exemple : return string.Format("moty({0})", json);), alors le client Comment l'écrire ?

Référence :

$.ajax("http://localhost:3561/User/GetAllNames", {
  jsonpCallback: "moty",
  dataType: "jsonp",
  success: function(json) {
    for (var i = 0; i < json.length; i++) {
      $("#nameList").append("<li>" + json[i] + "</li>");
    }
  }
});

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Utiliser ES6 pour résoudre le problème de fuite de mémoire via WeakMap (tutoriel détaillé)

Node.JS suppression de boucle Tous les fichiers dans les dossiers et sous-répertoires non vides

Explication détaillée de la relation entre prototype et __proto__ en Javascript

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Utilisation de la fonction de rappel JS (avec code)Article suivant：Utilisation de la fonction de rappel JS (avec code)

Articles Liés

Voir plus