コントラストXHRクロスドメインのリソース共有（CORS）と同様にJSONP：AJAXの研究ノート2

1はじめに：

まず著者は記事を参照してくださいありがとう、あなたのレッスンは、あまりにも多くのリソースを提供するために、新しい私たちのものに学びました。
私は論理的にコーマこの論文アドレスCORS AJAXの問題、まず、システムが原点をまとめたもの--- CORS生成元ポリシーの問題を、第二に、クロスドメインJSONPをこの方法が唯一のGET要求をサポートすることができますし、比較のためCORS、及び最終的に、溶液は、XDR溶液にXHR CORSとIEを説明HTTPリクエスト・オブジェクトの作成に基づいてクロスブラウザ機能のためのツールを提供します。

ソース--- 2クロスドメイン由来の政策課題

JavaScriptやActionScriptのようなクライアント・サイドのプログラミング言語では、同一生成元ポリシーは非常に重要なセキュリティ概念であり、その目的は、データを盗むために悪質なサイトを防ぐために、ユーザー情報のセキュリティを確保することです。
このような状況を想像し：ウェブサイトは、銀行で、ユーザがログインした後、他のサイトを訪問するために行ってきました。他のサイトAのウェブサイトはクッキーを読むことができるならば、何が起こるのだろうか？

クッキーはプライバシーを（例えば、総預金など）が含まれている場合、明らかに、この情報が漏洩します。さらに恐ろしいものである、クッキーは多くの場合、ユーザがログアウトしない場合は、他のサイトがユーザーを偽装することができ、ユーザーのログイン状態を保存するために使用され、彼らがやりたいです。ブラウザは、フォームが無制限相同方針を提出していることを提供していますので。このように、「同一生成元ポリシーは、」話すためにはセキュリティを持っていない、そうでない場合はクッキーは、インターネット、共有することができ、必要とされます。

（同種）同じドメインで何をして、異なるドメイン（異なるソース）それは何ですか？2つのドメインが同じプロトコル（HTTPなど）、同じポート（例えば80）、（例えばwww.example.orgなど）と同じホストを持っている場合は、その後、我々は、彼らが同じドメインであることを信じることができます。たとえば、HTTP：//www.example.org/index ....（デフォルトのポート番号80を省略することができる）とのhttp：//www.example.org/sub/in ...同じドメイン、およびのhttp：// www.example.org、 https://www.example.org、http://www.example.org:8080、 http://sub.example.orgのいずれか2つがクロスドメインを構成するであろう。
注：のみ、プロトコル、ドメイン名は、ポート番号は、対応するIPとドメイン名がチャート次のように、異なるドメインであっても、そうでない場合は、まったく同じドメインである（忘れて、この画像を集め、そして作者に感謝します）
画像のキャプション

現在、非相同的ならば、三幕の合計が制限されています。

（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。

フロントエンドの開発者として、私たちがしなければならない多くの時間がこの制限を破るです。

追加：同一生成元ポリシーはまた、当該契約に基づくスクリプトファイルへのアクセスの制限など、いくつかの特別な場合、処理を行う必要があります。ハードディスク上の他のファイルへのファイルプロトコルアクセスを通じてスクリプトは、そのようなAの危険性があるセキュリティ上のリスク、現在のIE8があるだろう場合は、ブラウザでローカルHTMLファイルは、ファイルプロトコルを使用して開かれました。

3クロスドメインの実施形態JSONP [特許文献1]

JSONPは、パディング速記でJSONであるソースサーバーとクライアントアプリケーションJSONの実装を介して通信するための一般的な方法です。最大の特徴は、すべての古いブラウザでサポートされ、適用するための簡単で、サーバの改革は非常に小さいです。

基本的な考え方は、サーバへのJSONデータの要求を、<script>要素を追加することによって、そのウェブページで、このアプローチは、同一生成元ポリシーの制限はありません。サーバーは要求を受信し、指定されたコールバック関数パスバックでのデータの名前。
JSOPは、2つの部分から構成：コールバック関数とデータ、コールバック関数は、通常、クエリ文字列を追加することによって、呼び出されるべき到着に応答関数であり、データは、正確には、JSONオブジェクト着信JSONデータコールバック関数です、直接アクセス。

例：

//访问跨域src并将数据填入到script标签中的函数
    function addScriptTag(src) {
      var script = document.createElement('script');
      script.setAttribute("type","text/javascript");
      script.src = src;
      document.body.appendChild(script);
    }
//网页动态插入<script>元素，由它向跨源网址src发出请求，src中包含回调函数
    window.onload = function () {
      addScriptTag('http://example.com/ip?callback=foo');
    }
//回调函数的参数默认是返回的数据
    function foo(data) {
      console.log('Your public IP address is: ' + data.ip);
    };

/ 上記のコードは、動的にサーバexample.comに要求を行うことで、<script>要素を追加しています。リクエストのクエリ文字列がコールバックパラメータを持っていることを注意は、コールバック関数の名前を指定するために使用される、それはJSONPのために必要です。/

JSONPの欠点
だけGETを達成することができ、ないPOST;コードは、他のドメインからロードされたが、安全でない可能性がある。JSONPは困難な要求が失敗したかどうかを判断する（XHRがエラーイベントを持っている）、時間の思考を超えて、許可された応答時間を指定するためにタイマーを使用することが一般的です応答に失敗しました。CORS同じ目的を持つJSONPが、JSONPよりも強力で、それは、HTTPリクエストのすべての種類をサポートしています。JSONPの利点は、古いブラウザをサポートすることで、CORSサイトからデータを要求することができますサポートしていません。

ドメイン間で4 AJAX [参考文献2]

参考文献[2]は、複雑なHTTPリクエストは、本明細書では単にGETおよびPOSTリクエストを含有記載されています。
CORS、すなわち、起源リソース共有クロス（https://www.w3.org/TR/cors/）、クロスドメイン・リソースの共有は、どのようにブラウザとサーバの相互作用、リソースへのクロスドメインアクセスで定義する必要があります。基本的な考え方は、HTTPヘッダーがブラウザとサーバは成功と失敗の応答を決定するために通信できるようにカスタムを使用することです。したがって、クロスドメインXHRを理解するHTTPヘッダーを理解しなければなりません。

4.1 HTTPヘッダ

HTTPヘッダリクエストヘッダー、レスポンスヘッダ、XHRの送信要求に、リクエストヘッダを送信します。
受け入れ：コンテンツタイプのブラウザが処理することができます。
のAccept-文字セットを：ブラウザで表示できる文字セット。
受け入れエンコード：圧縮符号化ブラウザが処理することができます。
のAccept-言語：言語のブラウザは、現在設定されています。
接続：ブラウザとサーバ間の接続のタイプ。
クッキー：クッキー、現在のページのいずれかの設定。
ホスト：ドメインが要求されたページが配置されている発行。
リファラー：リクエストURIのページを発行します。注、HTTPヘッダーフィールド仕様は、この間違ったスペルますが、規範との整合性を確保するために、唯一間違って間違っていることができます。（英語の単語の正しいスペルはリファラでなければなりません。）
のUser-Agent：ブラウザのユーザーエージェント文字列。
コンテンツタイプ：アプリケーション/ X-WWW-フォーム-限ら三つの値 URLエンコード、マルチパート/フォームデータ、テキスト/平野

使用setRequestHeader（）セットカスタムリクエストヘッダ情報に方法。名前とヘッダフィールドのヘッダフィールドの値：この方法は2つの引数を取ります。成功したリクエストのヘッダ情報を送信するには、通話がsetRequestHeaderを呼び出す前に、open（）メソッド（）メソッドを呼び出した後に送信する必要があります（）。
request.open（trueに、 "https://sf-static.b0.upaiyun.com/v-57fcb48b/user/script/index.min.js"、 "GET"）;
xhr.setRequestHeader（ "myHeaderを"、 " MyValue「）;
request.send（NULL）;
ヘッダ情報ので、この定義には、その後の動作は、受信サーバに対応して行われてもよいです。

XHRオブジェクトを呼び出すgetResponseHeader（）フィールドの頭の名前にする方法とパスを、あなたは適切なレスポンスヘッダを取得することができます。起動getAllResponseHeaders（）メソッドは、すべてのヘッダ情報を含む長い文字列を達成することができ、そのようなフォーマットされた出力我々は簡単にすべての応答ヘッダフィールドの名前を確認することができます。

試験例：

  //创建请求对象
  var request = createRequest();
  if (request == null) {
    alert("Unable to create request");
    return;
  }
  request.onreadystatechange = showSchedule;
  //使用DOM0级方法添加event handler，因为不是所有浏览器都支持DOM2；没有event对象，直接使用request对象
  request.open("GET", selectedTab + ".html", true);//返回HTML片段
  request.send(null);
}
function showSchedule() {
  if (request.readyState == 4) {
    if ((request.status >= 200 && request.status <= 300)|| request.status == 304) {
    //返回响应头部
    document.getElementById("content").innerHTML = request.getAllResponseHeaders();
    }else
    {
      document.getElementById("content").innerHTML =request.status;
    }
  }
}

：結果が出力レスポンスヘッダーのすべてのことが示された
のLast-Modified：火,. 2016年10月11日には午前9時44分48秒GMTのコンテンツタイプ：ファイルアプリケーション/ X-のJavaScriptのCache-Control：MAX-2592000年齢は=有効期限：木、10 - 2016年11月9日に：45：10 GMT

4.2 CORSをカバーヘッド

上記のIE10と、Firefoxの3.5+、Safari 4以降、クロム、iOS版のSafariとWebKitのAndroidのプラットフォームのバージョンは、XMLHttpRequestオブジェクトを経由してCORSのネイティブサポートが実装されています。CORSは、絶対配置が長いURL open（）メソッドのように達成することができる使用します。同じドメイン内の相対URLを使用してドメイン間で絶対URLを使用することをお勧めします。CORS通信処理の全体は、ブラウザはユーザーの介入なしに、自動的に行われます。開発者にとって、それがあったとおりに、通信CORSは、同種と通信差のAJAXは存在しません。AJAXブラウザ、クロスオリジンリクエストしたら、それは自動的にいくつかの追加のヘッダー情報を追加し、時にはそれ以上の追加時間の要求よりも、しかし、ユーザーが感情を持っていません。そのため、通信がCORSサーバを達成するための鍵です。サーバーは、インターフェイスを実装としてCORSが長く、あなたがソースを介して通信することができます。

シンプルなリクエスト（GETとPOST）の場合は、ブラウザが直接CORSリクエストを送信しました。具体的には、原点を記述するためのフィールドを追加して、ヘッダ情報の一つである：この要求からソース（+プロトコル名+ポート）。この値は、要求を許可するかどうかの決定に基づいてサーバー。
原産地はないライセンスの範囲内で、ソースを指定した場合、サーバーは、通常のHTTPレスポンスを返します。ブラウザは、あなたが間違っている知っている、（下記参照）、このレスポンスヘッダ情報は、アクセス制御-許可-起源のフィールドが含まれていない見つかったので、エラーをスローし、キャプチャへのXMLHttpRequest ONERRORコールバック関数です。HTTPレスポンスのステータスコードが200になる可能性があるため、このエラーコードは、状態によって認識されないことに注意してください。
ドメイン名が起源許容範囲で指定した場合は、次のように、サーバは、応答、いくつかの余分なヘッダフィールドを返します。

Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

上記ヘッダ情報、CORSの三は、関連分野を要求は、アクセス管理-始めています。次のように詳細に説明：
アクセス・コントロール・起源を許可（1）
このフィールドが必要です。その値は、いずれかのフィールドの起源要求のいずれか*、ドメイン名の受け入れのための要求の値です。
（2）アクセス制御-許可 -credentials
このフィールドはオプションです。その値は、クッキーの送信を許可するかどうかを示すブール値です。デフォルトでは、クッキーCORSは、要求に含まれていません。trueに設定し、それがサーバー明示的な許可は、クッキーがサーバに送信された要求に含まれ得ることを意味します。この値は、サーバーがブラウザのクッキーによって送信されない場合、あなたはフィールドを削除することができ、trueに設定することができます。
（3）アクセス制御、公開 -headers
このフィールドはオプションです。Cache-Control、コンテンツ言語：要求がCORS、getResponseHeader XMLHttpRequestオブジェクト（）のみ6つの基本的なフィールドを取得するためのメソッドである場合は、Content-Typeの、有効期限、のLast-Modified、プラグマを。あなたが他のフィールドを取得したい場合は、アクセス・コントロール・公開・ヘッダの内部で指定する必要があります。上記の例の指定は、getResponseHeader（「FooBarの」）は値FooBarのフィールドを返すことができます。

4.3テストケース

以下に示すようにopen（）メソッド内の実施形態は、別のドメイン内のJavaScriptファイルへのURL点は、試験結果は、ファイルが正常にロードされていることを示す、変更されます。
localhostをローカルホスト上の//テストファイル
request.open（ "GET"、 "https://sf-static.b0.upaiyun.com/v-57fcb48b/user/script/index.min.js"/ selectedTab +" .htmlを「 trueに/、）;

FirefoxのFirebugのは、要求に応じて、上述したプロセスを使用して観察し、対応するリクエストヘッダは：起源であるのhttp：// localhostを

レスポンスヘッダ：アクセス・コントロール・許可起源：*任意のソースにアクセスすることができますを示しています。

クロスドメインXHRオブジェクトは、アクセス状況に使用することができ、STATUSTEXT属性、これはあまり使用されないが、同時要求をサポートしています。セットカスタムヘッダにあなた（setRequestHeaderを制限するために使用できません）;クッキーは送信および受信することができない。getAllResponseHeadersを呼び出す（）メソッドは常に空の文字列を返します。

5特別なIE：XDRクロスドメインオブジェクト

XHR2については、サポートIEブラウザIE10は終わりました。しかし、初期のIE IE8で唯一のアウト置き換えられた、IE10に使用されているXDomainRequestオブジェクトのクロスドメイン操作を開始しました。だから、IE8、IE9は、達成するためにXDomainRequest（XDR）を使用する必要があります。XDRは、以下の特徴を有する：
1）クッキーは応答が返されないと、要求と共に送信されません。（同じクロスドメインXHR）
のみヘッダ情報設定要求のContent-Typeフィールド2）。
3）応答ヘッダにアクセスすることはできません。（そして、同じクロスドメインXHR）
4）のみGETとPOSTリクエストをサポートしています。

使用XDRオブジェクトとXHRオブジェクトは非常に類似しているが、またXDomainRequest、オープン（）を呼び出しメソッドのインスタンスを作成し、send（）メソッドを呼び出します。しかし、オープンXHRオブジェクト（）の異なる方法、リクエストとURLの種類：オープンXDRオブジェクト（）メソッドは、2つのパラメータのみを受信します。
すべてのXDR要求は非同期で実行されている、あなたは同期要求（XHRの異なると同じ）を作成するためにそれを使用することはできません。トリガとなる復帰を要求した後、ロードイベントを、それが失敗した場合（アクセス制御-許可-起源ヘッダ内の応答の欠如を含む）、（およびXHR付き）トリガーするエラーイベントを。また、保存されたデータに応じて、responseTextプロパティのを。

var xdr = new XDomainRequest();
xdr.onload = function(){
alert(xdr.responseText);
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.send(null);

要求リターンを呼び出す前にアボート（）メソッドは、要求を終了することがあります。

xdr.abort(); //终止请求

XHRと同じように、XDRもサポートするオブジェクトタイムアウトプロパティおよびイベントハンドラOnTimeoutパスを。
POSTリクエストをサポートするために、XDRオブジェクトが提供contentType属性は、伝送データのフォーマットを示すために使用されます。属性ヘッダ情報は、後の（）開いて、センド（）使用前に、影響を与えることができます。このプロパティはされて被検体による唯一の方法XDRヘッダー情報に影響を与えます。

クロスブラウザのための6クロスドメインソリューション

ブラウザがCORSのサポートの度合いがない場合でも同じですが、すべてのブラウザは、単純な（非プリフライトと資格情報なし）要求をサポートし、クロスブラウザのソリューションを実装する必要があります。XHR CORS最も簡単な方法をサポートするかどうかを検出することwithCredentialsプロパティがあるかどうかを確認することです。複合XDomainRequestはあなたがすべてのブラウザの世話をすることができ、オブジェクトが存在するかどうかを検出します。

function createCORSRequest(method, url){
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr){
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined"){
    vxhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    xhr = null;
  }
  return xhr;
}

Firefoxの、XDomainRequest類似オブジェクトのXMLHttpRequestオブジェクトIEのSafari、およびクロムでは、次のように一般的なプロパティ/メソッドは提供：
ABORT（）：進行中の停止を要求するために。
ONERROR：エラーを検出する代わりに使用onreadystatechangeに。
onloadイベント：成功の代替を検出するためのonreadystatechangeに。
responseText：応答の内容を取得します。
）（送信：リクエストを送信します。
より多くのメンバーは、すべてのブラウザで通常入手可能）（createCORSRequest関数の戻りにオブジェクトが含まれています。

var request = createCORSRequest("get", "http://www.somewhere-else.com/page/");
if (request){
    request.onload = function(){
        //对 request.responseText 进行处理
    };
    request.send();
}