Ajax und domänenübergreifendes JSONP

Dieses Mal werde ich Ihnen Ajax und domänenübergreifendes JSONP vorstellen. Was sind die Vorsichtsmaßnahmen zu Ajax und domänenübergreifendem JSONP?

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>

Der Ausführungseffekt ist wie folgt. Wenn Sie auf „Anzeigen“ klicken, wird die lokale TXT-Datei über Ajax angefordert.

Der Code ist relativ einfach und mit Kommentaren wird er meiner Meinung nach leicht zu verstehen sein.

Bei der Arbeit fordern wir jedoch häufig Ressourcen in anderen Domänen an (aufgrund der Same-Origin-Richtlinie). Zu diesem Zeitpunkt stoßen wir auf domänenübergreifende Anforderungen (jeder Unterschied in Protokoll, Port und Domänenname wird als domänenübergreifend betrachtet).

Eine gängige Methode zur Lösung domänenübergreifender Probleme ist JSONP. Obwohl es Einschränkungen aufweist (unterstützt nur Get-Anfragen), besteht sein Vorteil darin, dass es mit alten Browsern kompatibel ist (aber nur wenige Leute scheinen sich jetzt für alte Browser zu interessieren).

Das Grundprinzip von JSONP besteht darin, Skript-Tags dynamisch zu erstellen. Der Quellcode des Skript-Tags unterliegt keinen domänenübergreifenden Einschränkungen.

Gehen Sie als Nächstes zu einer Seite, die dem Dropdown-Menü für die Baidu-Suche ähnelt

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

Der Code ist auch relativ einfach und muss leicht verständlich sein. x Andere umfassen Reverse-Proxy, CORS usw. Ich werde sie später klären lerne sie.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonAjax und domänenübergreifendes JSONP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!