クロスドメインJSONP Baiduの連想

クロスドメインシミュレーションBaiduは関連がクロスドメインのAjaxをサポートしていない単語を使用することはできません

クロスドメインの手段を解決するために、

1、フラッシュ

2、プロキシサーバーのトランジット

アクセスBaiduのに最初のサーバのプロキシサーバによって、ローカルサーバーにアクセスすることができ、クロスドメインアクセスを実現することができない制限付きブラウザの同一生成元ポリシーは、クロスドメインを完了するために、ローカルサーバーを経由してデータにアクセスするローカルブラウザへのデータバックを取得します

3、JSONPデータ交換プロトコルを動的に実現するためにスクリプトタグを作成します

4、document.domainを(同じドメイン名の基本ケース)

bj.58.com document.domainを= '58 .COM」

tj.58.com document.domainを= '58 .COM」

-------------------------------------------------- --------------------

JSONP原則

かどうか影響(それだけではなく、<スクリプト>導入のjsファイルでクロスドメインの1.Webページには、我々はまた、タグの「SRC」属性を持っている人のような、クロスドメインをする能力を持っていることを見つけたときの<script>、< IMG>、<iframe>の)

2.私たちは、サーバー上のデータを入れて、データはJSON形式であるので(あなたが簡単にJSONデータを扱うことができるので、JS)

3.私たちは、取引を行う必要があるので、我々は、データの取得は、<script>のsrc属性によって行われているかどうかを監視することはできませんので。

4.このような機能doJSON(データ)として取得したクロスドメインデータを処理するために定義された機能の実現{}。

前記取得されたデータは、srcパラメータのCB =「doJSON」このデータは、関数に渡される実引数の関数としてdoJSONのCb値に対応するコンテンツである(サーバ復帰にパラメータCBの値に応じてコンテンツを対応する)で添加した場合doJSONなどの文字の文字列(「データ」)

定着工程

Srcは、動的に作成されたスクリプトタグは、下半身のタブのパスに挿入されます設定しました

 

 

アヤックスとの本質的な違いは全体でJSONPアクセス

動的に作成したスクリプトタグでクロスドメインの動作を実現するためにJSONP

アヤックスのXMLHttpRequest()オブジェクトを作成することによって要求されたデータを達成するために

 

次の単語の関連付けを達成するためにBaiduの

<script>
        var inp = document.getElementById('inp');
        var ul = document.getElementById('ul');
        inp.oninput = function() {
            var value = this.value;
            var oscript = document.createElement('script');
            oscript.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1432,21123,29523,29721,29568,29220&wd=' + value + '&r&cb=show';
            //wd指的是搜索字段 cb指的是请求数据后回调函数
            $('body').append(oscript);
        }

        function show(data) {
            console.log(data);
            var str = '';
            var res = data.g;
            if ((res)) {
                res.forEach(ele => {

                    str += '<li> <a href="https://www.baidu.com/s?ie=UTF-8&wd=' + ele.q + '">' + ele.q + '</a></li>'
                    //wd指的是搜索字段 cb指的是请求数据后回调函数
                    //原理相同只是用的百度地址
                    ul.innerHTML = str;
                    ul.style.display = 'block'

                });
            } else {
                ul.style.display = 'none'
            }

        }
    </script>

 

公開された56元の記事 ウォンの賞賛1 ビュー1212

おすすめ

転載: blog.csdn.net/qq_40819861/article/details/101943727