Maison > Article > interface Web > 5 solutions pour les compétences js cross-domain request_javascript

5 solutions pour les compétences js cross-domain request_javascript

WBOYoriginal: 2016-05-16 15:52:001132parcourir

Les solutions pour les données de requêtes inter-domaines incluent principalement les solutions suivantes :

JSONP方式
表单POST方式
服务器代理
Html5的XDomainRequest
Flash request

Instructions séparées :

1.JSONP :

Compréhension intuitive :

Il s'agit d'enregistrer dynamiquement une fonction sur le client

fonction a(data), puis transmettez le nom de la fonction au serveur, et le serveur renvoie un a({/*json*/}) au client à exécuter, appelant ainsi le

du client

fonction a(data), réalisant ainsi un cross-domain.

Historique de naissance :

1. Ajax demande directement des fichiers ordinaires, ce qui pose le problème de l'accès entre domaines sans autorisation, qu'il s'agisse d'une page statique, d'une page Web dynamique, d'un service Web ou d'un WCF, tant qu'il s'agit d'un accès croisé. demande de domaine, cela ne fonctionnera pas.

2. Cependant, lors de l'appel de fichiers js sur la page Web, cela n'est pas affecté

3. Pour plus de promotion, nous avons constaté que toutes les balises avec des attributs Src ont des capacités inter-domaines, telles que : 3f1c4e4b6b16bbbd69b2ee476dc4f83aa1f02c36ba31691bcfe87b2722de723bd5ba1642137c3f32f4f4493ae923989c

4. Par conséquent, si vous souhaitez actuellement accéder aux données inter-domaines via le côté Web pur (les contrôles ActiveX, les proxys côté serveur, les Websockets appartenant au futur HTML5, etc. ne sont pas inclus), vous ne pouvez utiliser que le méthode suivante : sur le serveur distant Essayez de charger les données sous forme de texte au format js pour l'appel du client et un traitement ultérieur.

5. JSON est un format de données de caractères purs et peut être pris en charge nativement par js.

6. Voici la solution : le client Web appelle le fichier au format js généré dynamiquement (généralement avec json comme suffixe) sur le serveur inter-domaines exactement de la même manière qu'il appelle le script.

7. Une fois que le client a appelé avec succès le fichier json, il obtiendra les données requises et le reste devra les traiter selon ses propres besoins.

8 Afin de faciliter l'utilisation des données par le client, un protocole de transmission informel s'est progressivement formé, appelé jsonp. Un point clé de ce protocole est de permettre aux utilisateurs de transmettre un paramètre de rappel au serveur, puis lorsque le serveur renvoie des données, il utilisera ce paramètre de rappel comme nom de fonction pour envelopper les données json, afin que le client puisse personnaliser son propre fonction pour traiter les données renvoyées.

Mise en œuvre détaillée :

Qu'il s'agisse de jQuery, d'extjs ou d'autres frameworks prenant en charge jsonp, le travail qu'ils effectuent en coulisses est le même. Laissez-moi vous expliquer étape par étape l'implémentation de jsonp sur le client :

1. Nous savons que même si le code est dans le fichier js inter-domaines (qui est bien sûr conforme à la politique de sécurité du script web), la page web peut être exécutée sans condition.

Il existe un code de fichier remote.js dans le répertoire racine du serveur distant remoteserver.com comme suit :

alert('Je suis un fichier distant');

Le serveur local localserver.com a un code de page jsonp.html comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

Il ne fait aucun doute qu'une fenêtre d'invite apparaîtra sur la page, indiquant que l'appel inter-domaines a réussi.

2. Maintenant, nous définissons une fonction sur la page jsonp.html, puis l'appelons en transmettant les données dans remote.js.

Le code de la page jsonp.html est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  var localHandler = function(data){
    alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
  };
  </script>
  <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
</head>
<body>

</body>
</html>

Le code du fichier remote.js est le suivant :

localHandler({"result":"Je suis les données apportées par les js distants"});
Vérifiez les résultats après l'exécution. La page affiche avec succès une fenêtre d'invite, indiquant que la fonction locale a été appelée avec succès par le js distant inter-domaines et que les données apportées par le js distant ont également été reçues. Je suis très heureux que l'objectif de l'acquisition de données à distance inter-domaines ait été pratiquement atteint, mais une autre question se pose : comment faire connaître au js distant le nom de la fonction locale qu'il doit appeler ? Après tout, les serveurs jsonp doivent faire face à de nombreux objets de service, et les fonctions locales de ces objets de service sont différentes ? Regardons en bas.

3. Les développeurs intelligents peuvent facilement penser que tant que le script js fourni par le serveur est généré dynamiquement, l'appelant peut passer un paramètre pour dire au serveur "Je veux un code js qui appelle la fonction XXX, veuillez le renvoyer to me", afin que le serveur puisse générer des scripts js et répondre en fonction des besoins du client.

Regardez le code de la page jsonp.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script type="text/javascript">
  // 得到航班信息查询结果后的回调函数
  var flightHandler = function(data){
    alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。');
  };
  // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码）
  var url = "http://flightQuery.com/jsonp/flightResult.aspx&#63;code=CA1998&callback=flightHandler";
  // 创建script标签，设置其属性
  var script = document.createElement('script');
  script.setAttribute('src', url);
  // 把script标签加入head，此时调用开始
  document.getElementsByTagName('head')[0].appendChild(script); 
  </script>
</head>
<body>

</body>
</html>

Cette fois, le code a beaucoup changé. Il n'écrit plus directement le fichier js distant, mais des codes pour implémenter la requête dynamique. C'est également la partie centrale de l'implémentation du client jsonp. L'accent est mis dans cet exemple sur la façon de terminer. l'ensemble du processus d'appel jsonp.

Nous voyons qu'un paramètre de code est passé dans l'URL appelante, indiquant au serveur que ce que je veux vérifier, ce sont les informations du vol CA1998, et le paramètre de rappel indique au serveur que ma fonction de rappel locale s'appelle FlightHandler, alors s'il vous plaît transmettre les résultats de la requête Appelez cette fonction.

flightHandler({
  "code": "CA1998",
  "price": 1780,
  "tickets": 5
});

我们看到，传递给flightHandler函数的是一个json，它描述了航班的基本信息。运行一下页面，成功弹出提示窗口，jsonp的执行全过程顺利完成！

4、到这里为止的话，相信你已经能够理解jsonp的客户端实现原理了吧？剩下的就是如何把代码封装一下，以便于与用户界面交互，从而实现多次和重复调用。

什么？你用的是jQuery，想知道jQuery如何实现jsonp调用？好吧，那我就好人做到底，再给你一段jQuery使用jsonp的代码（我们依然沿用上面那个航班信息查询的例子，假定返回jsonp结果不变）：

OK，服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
   <title>Untitled Page</title>
   <script type="text/javascript" src=jquery.min.js"></script>
   <script type="text/javascript">
   jQuery(document).ready(function(){ 
    $.ajax({
       type: "get",
       async: false,
       url: "http://flightQuery.com/jsonp/flightResult.aspx&#63;code=CA1998",
       dataType: "jsonp",
       jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
       jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"&#63;"，jQuery会自动为你处理数据
       success: function(json){
         alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
       },
       error: function(){
         alert('fail');
       }
     });
   });
   </script>
   </head>
 <body>
 </body>
 </html>

是不是有点奇怪？为什么我这次没有写flightHandler这个函数呢？而且竟然也运行成功了！哈哈，这就是jQuery的功劳了，jquery在处理jsonp类型的ajax时（还是忍不住吐槽，虽然jquery也把jsonp归入了ajax，但其实它们真的不是一回事儿），自动帮你生成回调函数并把数据取出来供success属性方法来调用，是不是很爽呀？

以上所述就是本文的全部内容了，希望大家能够喜欢。

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：JavaScript implémente une méthode pour que l'affichage par défaut de l'image d'arrière-plan dans la zone de texte disparaisse après avoir obtenu le focusArticle suivant：JavaScript implémente une méthode pour que l'affichage par défaut de l'image d'arrière-plan dans la zone de texte disparaisse après avoir obtenu le focus

Articles Liés

Voir plus