クロスドメインのソリューションJSONP

JSONPクロスドメインソリューション同一生成元ポリシーJSONPを導入JSONPの基本原則のパラメータを追加する要求Baiduの検索のヒント：小さな運動を

同一生成元ポリシー

同一生成元ポリシー（同一生成元ポリシー）、それは同一生成元ポリシーの欠如、ブラウザの通常の機能が影響を受ける可能性がある場合は、ブラウザのコアは、また、最も基本的なセキュリティ機能です、慣例です。ウェブは、同一生成元ポリシーに基づいて構築されると言うことができますが、ブラウザが実現元ポリシーに向けられています。

よく知られたNetscapeのセキュリティポリシーによって提示された同一生成元ポリシー、。

これで、すべてJavaScript対応のブラウザでは、この戦略を使用します。いわゆる相同ドメイン、プロトコル、同一のポートを指します。

例えば：

そして両方http://www.baidu.com http://www.baidu.com:8080異なるソース。
http://www.baidu.com https://www.baidu.comとも異なるソース。

データの異なるソースのための要求は、ブラウザがコンソールに報告される場合は例外、および迅速なアクセスが拒否されます。元ポリシーは、データを受信し、つまり、リクエストが送信されて戻って汚染をデータを取得するためのJavaScriptコードではありませんので、傍受が要求元クライアントに送信され、サーバーが応答することはできませんが、ローカルデータを保護するために、ブラウザの動作ですブラウザが受け取ります。

JSONPはじめに

JSONP（JSONパディング付き）JSONは、主要なブラウザ、クロスドメインデータアクセスの問題を解決するために使用することができる「使用モード」です。同一生成元ポリシーので、一般的には、server1.example.comないserver1.example.comと通信するウェブサーバ上に配置することができず、HTML要素は例外です。オープンポリシーの要素を使って、ページが動的に他のソースから生成されたJSONデータを取得することができ、そしてこのモデルは、いわゆるJSONPを使用することです。JSONPを使用したデータは、JavaScriptインタープリタの実行ではなく、JSONパーサーを解析していないJSONはなく、任意のJavaScriptを、キャッチ。

基本原理JSONP

上記の単純な理解JSONP機能した後、以下の具体的な用途は、JSONPの少しを理解します。

まず、経由script指定されたファイルのラベルの導入。

例えば1.TXTは配列を持っています。

["こんにちは世界"]

この配列を使用するために、我々は、使用して、JSONPロジックを通過しscript、この文書のタグの導入を

<スクリプトSRC = "01.txt"> </ SCRIPT>

けれども、私たちは、上記の文書を導入しているが、その後我々は導入しないと使用する方法ことがわかりました。データは変数名を追加することである前に、我々は、以下の行為に似て行っている前に。次のように：

するvar A = [ "こんにちは"、 "世界"]

私たちは、内部のページのファイルにデータを使用できるように。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
    <メタ文字セット= "UTF-8">
    <タイトル>ドキュメント</ TITLE>
    <スクリプトSRC = "01.txt"> </ SCRIPT>
    <スクリプト>
        警告（a）は、 
    </ SCRIPT>
</ head>の
<身体>
    
</ BODY>
</ HTML>

上記のコードは、データファイルを正常に読み込まれます。

しかし、我々はまた、上記と同様の文言を取るがあれば、プログラム開発は公害変数を引き起こす可能性があります。

私たちが、関数の形をとることができ、読み取りデータの問題を解決する必要があるが、また、変数の汚染を避けるために。

以下のフォームに01.txt：

FN（[ "こんにちは"、 "世界"]）

ページの文書を次のように

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
    <メタ文字セット= "UTF-8">
    <タイトル>ドキュメント</ TITLE>
</ head>の
<身体>
    <スクリプト>
        関数FN（データ）{
            警告（データ）;
        }
    </ SCRIPT>
    <スクリプトSRC = "01.txt"> </ SCRIPT>
</ BODY>
</ HTML>

上記のコード、ファイルが来るようにロードされたとき、それが私たちの定義された関数fnを呼び出すことに相当し、データファイルも自動的に関数に渡されています。

上記ロジックはJSONPコアロジックです。

リクエストパラメータを追加します。

上記のコードでは、単純JSONPの基本的なロジックを体験します。のは、それをアップグレードパラメータを追加するために私たちの要求を行うための基本的な方法を使用してみましょう。

たとえば、私たちは今、サーバー側の配列の2セットを持って、それは、映画のセットは、異なるデータを表示するには、別のボタンをクリックし、名前を格納している格納されている曲のセットです。

まずは、htmlコードを完了してみましょう：

< ボタンID = "BTN1" >音乐排行</ ボタン> 
< UL ID = "LIST1" >
    
</ UL > 
< ボタンID = "BTN2" >电影排行</ ボタン> 
< UL ID = "LIST2" >
    
</ UL >

私たちの需要は以下は、サーバーコードで、それぞれ、異なるデータを表示するために2つのボタンをクリックすることです：

<？PHPの 
 ヘッダ（ "コンテンツタイプ：text / htmlの、文字セット= UTF-8" ）。

// 受信データ
$ PARM = $ _GET [ 'PARM']？$ _GET [ 'PARM']： '音楽' ;
 $コールバック = $ _GET [ 'コールバック' ];

// シミュレーションのデータベース・ストレージ・アレイ
$ arr_music = [「残酷な月光」、「単体」、「戻ってきて」、「雨でロマンス」、「償還」];
 $ arr_movie = [「ショーシャンクの空に」、「レンジャーズ地球「」インセプション「」私は医学の神ではないよ「」フォレストガンプ" ];

//は、どのようなデータ伝送を決定
IF（$ PARMが === "音楽" ）{
     $データ = $ arr_music 。
} 他{
     $データ = $ arr_movie 。
}

// データ送信は
エコー $コールバック "（" json_encode（.. $データ）。 "）"; // JSON前に、データ伝送に変換します

JSコード：

// データを要求します   
LET oBtn1 =のdocument.getElementById（ 'BTN1'を）。
聞かせてoBtn2 =のdocument.getElementById（ 'BTN2' ）;

// コールバック作成
機能getdata1（データを）{
     // 要素の割り当てを取得します 
    List1を=のdocument.getElementById（ 'List1を'をしましょう）。
    HTML = '' ;
    以下のために（; iはdata.lengthを<; I = 0せiは++ ）{
        HTML + = "<LI>" +データ[I] + "</ LI>" 。
    }
    list1.innerHTML = htmlの。

}
関数getdata2（データ）{
     // 要素の割り当てを取得します 
    LIST2 =のdocument.getElementById（ 'LIST2'をしましょう）。
    HTML = '' ;
    以下のために（; iはdata.lengthを<; I = 0せiは++ ）{
        HTML + = "<LI>" +データ[I] + "</ LI>" 。
    }
    list2.innerHTML = htmlの。

}

oBtn1.onclick =（）=> {
     // scriptタグを動的に挿入作成 
    LETスクリプト=のdocument.createElement（ 'スクリプトが'）; // 作成し 
    たlet URL = "？PARM = 02.jsonp.php音楽＆getdata1コールバック=" ;
    script.src = URL;
    document.getElementsByTagName（ 'ボディ'）[0 ] .appendChild（スクリプト）。
}。

oBtn2.onclick =（）=> {
     // 挿入し、動的にスクリプトタグを作成 
    LETスクリプト=のdocument.createElement（ 'スクリプトを'）; // 作成し 
    たlet URL = "PARM =映画＆02.jsonp.phpは=コールバックをgetdata2？" 。
    script.src = URL;
    document.getElementsByTagName（ 'ボディ'）[0 ] .appendChild（スクリプト）。
}。

したがって、我々は戻って、フォームのJSONPへのファイルデータをお読みください。

JSONP src属性によって、あなただけのデータ伝送を得ることができますので。

小演習：Baiduの検索のヒント

まず、私たちは、達成するために、次のBaiduのインタフェースを使用することができます。

http://suggestion.baidu.com/su

私は2つのパラメータを設定するには、このインターフェイスを使用します：

内容WD検索するには
CBのコールバック関数を

私たちは、どのページで入力ボックスを実現するために開始します：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタのcharset = "UTF-8" > 
    < タイトル> Baiduの</ タイトル> 
</ ヘッド> 
< 身体> 
    < INPUTのタイプ= "テキスト" ID = "Q" プレースホルダ= "入力してくださいコンテンツが検索される" >   < ボタンのID = "BTN" >検索</ ボタン> 
    <ULのID = "リスト" >
        
    </ UL > 
</ ボディ> 
</ HTML >

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

関数FN（データ）{
    
        VAR OUL =のdocument.getElementById（ 'リスト' ）;
        VARのhtml = '' ;
        もし（data.s.length）{
            oUl.style.display =「ブロック」。
            ため（VAR i = 0; iはdata.s.lengthを<; iは++ ）{
                HTML + = '<LI>の<a target="_blank"のhref="http://www.baidu.com/s?wd='+data.s[i]+'">' + data.s [I ] + '</a>の</ LI>' ;
            }
            oUl.innerHTML = htmlの。
        } 他{
            oUl.style.display =「なし」。
        }

    }
    聞かせてQ =のdocument.getElementById（ 'Q' ）;
    聞かせてOUL =のdocument.getElementById（ 'リスト' ）;

    q.onkeyup = 関数（）{
         場合（この .VALUE = '！' ）{
             VAR oScript =のdocument.createElement（ 'スクリプト' ）。
            oScript.src = 'http://suggestion.baidu.com/su?wd='+ この .VALUE +' ＆CB = FN」;
            document.body.appendChild（oScript）。
        } 他{
            oUl.style.display =「なし」。
        }
    }