ajax とクロスドメイン jsonp-jsチュートリアル-php.cn

ajax とクロスドメイン jsonp

php中世界最好的语言

リリース： 2018-04-17 14:14:09

オリジナル

1388 人が閲覧しました

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

りー

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

ajax とクロスドメイン jsonp

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

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

クロスドメインの問題を解決する一般的な方法は 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 サイトの他の関連記事を参照してください。