ajax et jsonp inter-domaines

Cette fois, je vais vous présenter ajax et jsonp inter-domaines. Quelles sont les précautions concernant ajax et jsonp inter-domaines. Voici des cas pratiques, jetons un coup d'œil.

nbsp;html>


  <meta>
  <title>Title</title>
  <script>
    window.onload =function(){
      var oBtn = document.getElementById(&#39;btn&#39;);
      oBtn.onclick = function(){
        //创建XHR对象
        var xhr = new XMLHttpRequest();
        //请求的方式，地址，是否异步
        xhr.open(&#39;get&#39;,&#39;test.txt&#39;,true);
        //请求的确定操作，初始化，相当于搜索时，敲击的回车
        xhr.send(null);
        //请求的readyState每变化一次就执行一次onreadystatechange函数
        //其中readyState表示的是：请求/响应过程的当前活动阶段
        //readyState有如下取值
        /*
        *  0：未初始化，尚未调用send()方法
        *  1: 启动
        *  2：发送
        *  3：接收
        *  4：完成
        */
        xhr.onreadystatechange =function(){
          if(xhr.readyState ==4){
            alert(xhr.responseText);
          }
        }
      };
    };
  </script>


<input>

L'effet d'exécution est le suivant. En cliquant sur Afficher, vous demanderez le fichier .txt local via ajax.

Le code est relativement simple et avec des commentaires, je pense qu'il sera facile à comprendre.

Mais au travail, nous demandons souvent des ressources dans d'autres domaines (en raison de la politique de même origine). À l'heure actuelle, nous rencontrons des problèmes inter-domaines (toute différence de protocole, de port et de nom de domaine est considérée comme inter-domaine).

Jsonp est un moyen courant de résoudre les problèmes inter-domaines. Bien qu'il ait des limites (ne prend en charge que les requêtes get), son avantage est qu'il est compatible avec les anciens navigateurs (mais peu de gens semblent se soucier des anciens navigateurs maintenant).

Le principe de base de jsonp est de créer dynamiquement des balises de script. Le src de la balise de script n'a aucune restriction entre domaines.

Ensuite, accédez à une page similaire à la liste déroulante de recherche Baidu

nbsp;html>


  <meta>
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    input{
      width:300px;
      height:30px;
      border:1px solid lightgray;
      margin-top: 150px;
      margin-left: 200px;
      padding-left: 5px;
    }
    ul{
      width:307px;
      list-style: none;
      margin-left: 200px;
      display: none;
    }
    li{
      height:30px;
      border: 1px solid lightgray;
      line-height: 30px;
      padding-left: 5px;
    }
  </style>
  <script>
    function callbackD(response){
      var oUl = document.getElementById(&#39;ulList&#39;);
      var html=&#39;&#39;;
      if(response.s.length !=0){
        oUl.style.display=&#39;block&#39;;
        for(var i = 0;i<response.s.length;i++){
          html+=&#39;<li>&#39;+response.s[i]+&#39;&#39;
        }
      }
      oUl.innerHTML = html;
    }
  </script>
  <script>
    window.onload = function(){
      //获取dom元素
      var oData = document.getElementById(&#39;inputSearch&#39;);
      var oUl = document.getElementById(&#39;ulList&#39;);
      //键盘按下后抬起触发事件(onkeyup)
      oData.onkeyup = function(){
        if(oData.value != &#39;&#39;){
          //创建标签(createElement)
          var script = document.createElement("script");
          //添加地址
          script.src=&#39;http://unionsug.baidu.com/su?wd=&#39;+this.value+&#39;&p=3&cb=callbackD&#39;;
          //添加给body的(成为body包涵的孩子)
          document.body.appendChild(script);
        }else{
          oUl.style.display=&#39;none&#39;;
        }
      }
    };
  </script>


<input>

  
• 123

Le code est également relativement simple. Avec les commentaires du code, il doit être facile à comprendre. C'est un moyen courant de résoudre les problèmes inter-domaines. x D'autres incluent le proxy inverse, CORS, etc. apprenez-les.

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 :

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!