Maison >interface Web >js tutoriel >Explication détaillée des étapes de mise en œuvre du POST inter-domaines JS

Explication détaillée des étapes de mise en œuvre du POST inter-domaines JS

php中世界最好的语言original: 2018-05-12 11:18:132359parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes de mise en œuvre du POST inter-domaines JS. Quelles sont les précautions pour la mise en œuvre du POST inter-domaines JS Voici des cas pratiques, jetons un coup d'œil. .

javascript Le cross-domain est un problème très courant, parmi lequel jsonp est la méthode la plus couramment utilisée, mais jsonp ne prend en charge que get, pas post, donc si vous souhaitez publier des données via jsonp , la tête est grosse.

Post est implémenté ici en générant un formulaire dans une iframe et renvoie la valeur à l'appelant via postMessage.

Dans la première étape, nous implémentons d'abord un code back-end qui accepte jsonp Quant au langage à utiliser pour l'implémentation, vous décidez vous-même.

Le code c# est :

protected void Page_Load(object sender, EventArgs e)
    {
      StringBuilder sbRet = new StringBuilder();
      sbRet.Append("<script>");
      sbRet.Append(Request["jsoncallback"]);
      sbRet.Append("({");
      foreach (string k in Request.Form) {
        if (k == "jsoncallback") continue;
        sbRet.Append("'"+k+"':'"+Request.Form[k]+"'");
      }
      
      sbRet.Append("});");
      sbRet.Append("</script>");
      Response.Write(sbRet.ToString());
      Response.End();
    }

Par exemple, ce que vous souhaitez me renvoyer est { userName:'user1', password:'pass1' } , lorsque j'appelle http : //localhost /test?jsoncallback=callme

Vous retournez en fait <script>callme({ userName:'user1', password:'pass1' })</script>.

La deuxième étape consiste à créer une page de post-test dans le dossier local, telle que d:test.html

<form action="http://localhost/test" method="post">
　　<input type="text" name="userName" value="user1" />
　　<input type="text" name="password" value="pass1" />
  <input type="text" name="jsoncallback" value="callme" />
  <input type="submit" value="提交" />
</form>

La troisième étape consiste à parcourir et à cliquer sur Soumettre pour voir si le renvoyé <script>callme({ userName:'user1', password:'pass1' })</script> signifie qu'il n'y a aucun problème avec le programme back-end.

La quatrième étape, nous écrivons un code général pour implémenter le code HTML ci-dessus.

<!doctype html>
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>测试一哈</title>
  </head>  
  <body>   
  <script>
  //源码 开始
   function postJSONP(url, data, callback) {
    var template = '<form action="{{url}}" method="post" id="form1">';   
    for (var k in data) {
     template = template
       + ' 　<input type="text" name="&#39;+k+&#39;" value="&#39;+data[k]+&#39;" />'
    }
      template = template 
      + '　　<input type="text" name="jsoncallback" value="function callback(data) { parent.postMessage(data, \&#39;*\&#39;); } callback" />'
      + '</form>'
      + '<&#39;+&#39;script>'
      + 'document.getElementById("form1").submit();'
      + '</&#39;+&#39;script>';      
   template = template.replace("{{url}}", url);      
   var p = document.createElement("p");
   p.style.display = 'none';  
   p.innerHTML = '<iframe src=""></iframe>';
   document.body.appendChild(p);   
   var ifrm = p.children[0];
   var cwin = ifrm.contentWindow;
   cwin.document.write(template);   
   window.onmessage = function(e) {
   if (callback) callback(e.data);
   }
   }
   //源码 结束  
  //使用测试
   window.onload = function() {
   postJSONP('http://localhost:59898/WebForm1.aspx', { userName: '张静', password: '就不告诉你' }, function(data) {
    console.log(11, data);
   });
   postJSONP('http://localhost:59898/WebForm1.aspx', { 仓库: '1号大仓', 面积: '2万平米' }, function(data) {
    console.log(22, data);
   });
  }
 </script>
  </body>
</html>

La cinquième étape, les problèmes de sécurité,

window.onmessage = function(e) {
  //可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。
  if (callback) callback(e.data);
}

Je crois que vous avez lisez-le Vous maîtrisez la méthode dans le cas de 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 :

Résumé d'utilisation de React-navigation (avec code)

Ajout, suppression, modification et requête courants opérations des éléments JS DOM Explication détaillée

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：Explication détaillée des étapes pour implémenter les données d'arborescence dans VueArticle suivant：Explication détaillée des étapes pour implémenter les données d'arborescence dans Vue

Articles Liés

Voir plus