JSONP クロスドメインシミュレーション Baidu 検索

1. JSONPとは何か

JSONPはJSON with padding padding の略で、JSON を適用する新しい方法です。最近の Web サービスでは非常に人気があります。JSONP は JSON に似ていますが、次のように関数呼び出しに含まれる JSON です。

コールバック({"name": "王欢"});

SONP は、コールバック関数とデータの 2 つの部分で構成されます。コールバック関数は、応答が来たときにページ内で呼び出される関数です。コールバック関数の名前は通常、リクエストで指定されます。データはコールバック関数に渡される JSON データです。以下は典型的な JSONP リクエストです。

https://freegeoip.net/json/?callback=handleResponse

この URL はJSONPジオロケーションサービスを要求しています。上記の URL に示すように、クエリ文字列を通じて JSONP サービスのコールバックパラメータを指定するのが一般的です。ここで指定されているコールバック関数の名前は、 handleResponse()です。
JSONP は動的な<script>要素を通じて使用され、src 属性にクロスドメイン URL を指定できます。他のドメインからリソースを制限なく読み込むことができます。JSONP は有効なJavaScriptコードであるため、リクエストが完了した直後、つまり JSONP 応答がページに読み込まれた直後に実行されます。

2. JSONPクロスドメインリクエスト

同一生成元ポリシーはブラウザのセキュリティメカニズムであることはご存じのとおりです。いわゆるソースとは、プロトコル、ドメイン名、ポート番号を指します。スクリプトの実行中、ブラウザは実行するスクリプトと取得するデータが HTML ページと同じかどうかを検出します。同じであれば、それらは同じ生成元であり、リクエストは成功します。ソースが異なる場合は、クロスドメインリクエストです。デフォルトでは、ブラウザはクロスドメインリクエストをサポートしていません。では、クロスドメインリクエストを行う場合はどうすればよいでしょうか?
scriptタグは同一生成元ポリシーによって制限されません。つまり、スクリプトを要求する場合、HTML が配置されているサーバー上にあるか、他のサーバー上にあるかに関係なく要求できます。そのため、 scriptタグのこのプロパティを使用して、データのクロスドメイン要求を行います。 JSONPクロスドメインリクエストを実行する方法を見てみましょう。
まず、 scriptコードを要求します。指定した関数を呼び出して、実際のパラメーターとしてデータを渡すことができる場合は、この関数を定義して仮パラメーターを定義している限り、仮パラメーターは実際のパラメーターを受け取ってデータを取得します。例えば：
スクリプトにgetData(data)が定義されているとします。スクリプトが要求された場合、スクリプトは getData() 関数を呼び出して、実際のパラメータとしてデータを渡すことができます。その後、仮パラメータによって受信されたデータは、それに応じて処理されます。

<スクリプト>
        関数 getData(データ){
            コンソールにログ出力します。
        }
        var スクリプト = document.createElement('script');
        スクリプトID = 'jsonp';
        スクリプトをロードします。
        document.body.appendChild(スクリプト);
    </スクリプト>

フロントエンドがバックエンドに関数名を伝えていると仮定すると、バックエンドはgetData()を呼び出して情報を渡すことができます。 jsonp.htmlでは、次のjsonp.jsファイルをリクエストできます。

取得データ({
    名前: 'シャオ・ワン'、
    年齢: 20
})

実行結果は次のとおりです。

渡したデータであるObjectオブジェクトを取得します。
では、 getData()関数を使用するようにサーバーに指示するにはどうすればよいでしょうか?常にgetData(),開発が非常に硬直化し、他の関数名を定義できなくなります。実際、get リクエストを使用して、パラメータを通じてフロントエンドで定義された関数の名前をバックエンドに伝えることができ、バックエンドはそのようなスクリプトファイルを動的に生成し、関数呼び出しに返します。
Baidu にはそのようなインターフェースがあるので、見てみましょう。
ブラウザで Baidu ページを開き、デバッグツールを開いて、 NETworkラベルの下を調べ、ブラウザからサーバーに送信されたすべての http 要求を監視してデータを表示します。

検索ボックスに「b」と入力すると、リクエストは次のようになります。

要求されたキーワードは次のとおりです。

ここに画像の説明を挿入

ここでのcallback関数は、実際には jQuery によって生成されたグローバル関数です。このURLを取得したら、その有用な情報を保存し、コールバック関数を別の関数に置き換えることができます。

https://www.baidu.com/sugrec?pre=1&wd=b&req=2&csor=1&cb=getData();

アドレスバーに次のように入力してテストします:

このコールバック関数が設定したものになることがわかります。

3. Baidu検索をシミュレートする

このインターフェースを使用して JSON を生成し、Baidu 検索ページをシミュレートできるようになりました。
グローバル変数をデータ受信関数として定義します。データは受信データですgetdata()関数が呼び出されると、Jsonp 関数が送信されたことを意味します。このとき、 removeChild()を介してスクリプトタグを削除できます。これにより、リクエストを送信するたびに、データを受信した後にscriptタグが削除されます。データを処理するときに、 getData（） 、文字列を含む配列に対応するキーワード g を持つオブジェクトを返します。最初にこの配列をトラバースし、各要素に応じて li を生成して、入力の下の ul に追加します。最初に ul 内の html をクリアします。このようにして、要求された各 li は真新しいものになります。keyup keyup出てくると、最初に現在のinput値を取得してgetdata()関数を呼び出し、wd を渡すと、jsonp データ送信プロセスが実現されます。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        div {
            位置: 相対的;
            幅: 600ピクセル;
            高さ: 40px;
        }
        入力{
            幅: 500ピクセル;
            高さ: 40px;
            境界線: 2px 実線 #4E6EF2;
        }
        ボタン{
            位置: 絶対;
            左: 411ピクセル;
            上: 0;
            幅: 95px;
            高さ: 44px;
            背景色: #4E6EF2;
            境界線: なし;
            フォントサイズ: 18px;
            色: 白;
        }
        ul{
            位置: 相対的;
            左: -40px;
            上: -10px;
            幅: 411ピクセル;
            高さ: 400px;
            
        }
        li{
            高さ: 40px;
            幅: 411ピクセル;
            行の高さ: 40px;
            フォントサイズ: 16px;
            リストスタイル: なし;

        }
    </スタイル>
</head>
<本文>
   <div>
    <input type="text" 値 =''>
    <button>Baiduで検索</button>
   </div>
    <ul></ul>
    <script src="jquery.js"></script>
    <スクリプト>
     //
        関数 getData(データ){
            var スクリプト = document.querySelector('#jsonp');
            スクリプトの親ノードを削除します。
            $('ul').html('');
            for(var i =0;i<data.g.length;i++){
                $('<li>'+data.g[i].q +'</li>').appendTo('ul');
            }
        }
        //スクリプトを動的に生成する function getList(wd){
            var スクリプト = document.createElement('script');
            スクリプトID = 'jsonp';
            script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&req=2&csor=1&cb=getData&wd='+wd;
           
            document.body.appendChild(スクリプト);
        }
  //var ipt = document.querySelector('input');
        ipt.addEventListener('keyup',function(){
            var wd = this.value;
            getList(wd);
            コンソールログ(wd);
        })
    </スクリプト>
</本文>
</html>

効果は次のとおりです。

JSONPの欠点

JSONP は非常にシンプルで使いやすいため、開発者の間で非常に人気がありますが、次の 2 つの欠点もあります。

まず、 JSONPは別のドメインから実行可能コードを読み込むことです。相手側のドメインが安全でない場合は、レスポンスに悪意のあるコードが含まれている可能性があります。現時点では、JSONP 呼び出しを完全に放棄する以外に調査する方法はありません。
其次，要確定JSONP請求是否失敗并不容易。雖然HTML5給、まだどのブラウザーでもサポートされていません。これを行うには、開発者はタイマーを使用して、指定された時間内に応答が受信されたかどうかを検出する必要があります。しかし、結局のところ、すべてのユーザーが同じインターネット速度と帯域幅を持っているわけではないので、操作は満足のいくものではありません。

JSONP クロスドメインシミュレーション Baidu 検索に関するこの記事はこれで終わりです。JSONP クロスドメインシミュレーション Baidu 検索に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: