クロスドメインAJAXの問題を解決するためのソリューションのためのパディングとの完全な名前JSON、。

同一生成元ポリシーの制約ため、ブラウザのXMLHttpRequest要求は、リソースの電流源（ドメイン名、プロトコル、ポート）を可能にするが、リクエストスクリプトリソースに制限はありません。スクリプトタグを要求するクロスドメイン要求することによって達成し、サーバーとJSONコールバック関数にデータを出力する、この実施形態は、クロスドメインデータJSONPと呼ばれます。

原則

まず、などwindowオブジェクト上に配置されたクライアント登録コールバックメソッド、、。

callbackFunction (json) {
    console.log(JSON)
}

その後、サーバーへのコールバック名（callbackFunction）。

JOSNデータへの2氏がサーバ。

直接参照モードに3 JOSNデータは、関数は、このようにクライアントに、JS構文ドキュメント（例えばcallbackFunction（JOSN））を生成し、配置されています。

4.クライアント・ブラウザ、JSタグをDOMに挿入された戻り、スクリプトタグを解析し、callbackFunction（JOSN）を行います。

この方法では、クロスドメインのデータを取得することができます。

{} JSONPインポート'./JSONP'から
 // 呼び出し
JSONP（{ 
  URLを： 'URL' 、
  データ：{   
    KEY1： 'KEY1'   
  }、   
  コールバック（データ）{   
    // データがサーバのデータから返されます   
  }   
}）

// JSONP.jsは、 
JSONPは=（設定= {}）=>みましょう{ 
  } {データ、URL、コールバックしましょう = コンフィグ
   // 拼接请求のURL 
  であれば（！URL）スロー 新しい（ 'URLが必要です！'エラーを）
  聞かせて名前を = `ID _ $ {（新しい。日付（））getTime（）} _ $ {。。Math.random（）のtoString（）SUBSTR（2 ）}` 
  てみましょうsrcUrl = getSrcUrl（URL、{ 
    データ、
    コールバック：名
  }）
  // 插入スクリプト标签 
  せスクリプト=のdocument.createElement（ 'スクリプト' ）
  script.type = 'テキスト/ javascriptの' 
  script.src = srcUrl
  script.id = 名
   // ウィンドウにコールバック・オブジェクト、コールが破棄 
  ウィンドウ[名] = 関数（JSON）{
     // 関数を破壊するために、この関数を実行した後 
    、ウィンドウを[名] = 不定
     // 要素は、スクリプトを取得します
    するvar elemは= のdocument.getElementById（名）
     //は、全体のDOM汚染ああ影響を与えない、三段階の順序でスクリプトの内部に挿入ヘッド、削除
    removeElemを（ELEM）
     //を機能を実行渡された 
    コールバックを&& typeofをコールバック=== "関数'&& コールバック（JSON）
  } 
  VARのヘッド= document.getElementsByTagName（'頭' ）
   IF（ヘッドヘッド&& [0 ]）{
    ヘッド[ 0 ] .appendChild（スクリプト）
  } 
} 
getSrcUrlせ => =（URL、データを）{ 
  せ_url = URL +（url.indexOf（）=== -1 '？'？ '？'： '＆' ）
  RETせて '='
   であれば（typeof演算用データ=== '列' ）{ 
    RET = データを
  } そう であれば（typeof演算用データ=== 'オブジェクト' ）{
     ため（キーせにおけるデータ）{ 
      RET + = '＆' +キー+ '='+ encodeURIComponentで（データ[キー]）
    } 
  } 
  RET = ret.substr（1SUBSTR（1 ）
  リターン _url + RETは
} 
removeElemましょう =（ELEM）=> { 
  親ましょう = elem.parentNodeを
   もし（親&& parent.nodeType！== 11 ）{ 
    parent.removeChild（ELEM）
  } 
} 
輸出デフォルト JSONP

注意を払います

でjQueryのでは、JSOPは内にカプセル化されている $.ajax() プロセスが、原則の彼の実現と ajax 完全に異なります。
JSONPの互換性が優れている、より多くの古代のブラウザなしのXMLHttpRequestまたはActiveXのサポートを実行することができます。
JSONPしかサポートしてHTTP POSTリクエストの他の種類せずに要求をGETサポートしています。
JSONPコールはHTTPステータスコード（対処方法：エラー訂正を行うために、エラーのJSONP要求自体がキャッチされていないが、タイムアウトパラメータを追加しますが、最終的にはタイムアウトのため）の様々なを返しません失敗したとき。
JSONP JSONPを使用している場合、サービスはセキュリティが信憑性でなければならないことを確認するために使用する必要があります。提供JSONPページインジェクションの脆弱性が存在しているサービスの場合には、それは彼らが非常に危険である注入された場合にはJavaScriptが実行されます返します。

JSONP原理と単純な実装

原則

注意を払います

おすすめ