ajax とクロスドメイン jsonp

今回は、ajax とクロスドメイン jsonp について説明します。ajax とクロスドメイン jsonp の 注意事項 は何ですか。以下は実際的なケースです。見てみましょう。

りー

実行の効果は次のとおりです。「表示」をクリックすると、ajax を通じてローカルの .txt ファイルが要求されます。

コードは比較的シンプルで、コメントも付いているので理解しやすいと思います。

しかし、仕事では、他のドメインのリソースを要求することがよくあります (同一生成元ポリシーのため)。このとき、クロスドメインが発生します (プロトコル、ポート、ドメイン名の違いはクロスドメインとみなされます)。

クロスドメインの問題を解決する一般的な方法は jsonp です。制限はありますが (get リクエストのみをサポートします)、その利点は古いブラウザーと互換性があることです (しかし、現在では古いブラウザーを気にする人はほとんどいないようです)。

jsonp の基本原理は、スクリプト タグを動的に作成することです。スクリプト タグの src にはクロスドメインの制限がありません。

次に、Baidu 検索ドロップダウンのようなページに移動します

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>

コードのコメントも比較的単純なので、これはクロスドメインの問題を解決する一般的な方法です。後で整理します。それらを学びましょう。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がajax とクロスドメイン jsonpの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。