ここに画像の説明を挿入

JS-コミュニケーション、AJAX

一、通信

1）同一生成元ポリシーと制限は何ですか

同一生成元ポリシーは、あるソースからロードされたドキュメントまたはスクリプトが別のソースのリソースと対話する方法を制限します。これは、潜在的に悪意のあるファイルを分離するために使用される主要なセキュリティメカニズムです。

* Cookie、LocalStorage、IndexDBを取得できません
* DOMを取得できません
* AJAXリクエストを送信できません

2）フロントエンドとバックエンド間の通信方法

* Ajax（同一生成元で使用）
* WebSocket（同一生成元ポリシーの制限なし）
* CORS（同一生成元、クロスドメイン通信をサポート）

3）Ajaxの作成方法

* XMLHttpRequestオブジェクトワークフロー
*互換性処理
*イベントトリガー条件
*イベントトリガーシーケンス
（1）XMLHttpRequestオブジェクトを作成する、つまり非同期呼び出しオブジェクトを作成する;
（2）新しいHTTPリクエストを作成し、HTTPリクエストメソッドURLと検証情報を指定する;
（ 3）HTTPリクエストステータスの変更に応答する関数を設定します;
（4）HTTPリクエストを送信します;
（5）非同期呼び出しによって返されたデータを取得します;
（6）JavaScriptとDOMを使用して部分的な更新を実現します。

var xhr = new XMLHttpRequest()
xhr.open("GET","/api",false)  //true。false是否异步执行
xhr.onreadystatechange = function() {
    
    
    if (xhr.readyState == 4) {
    
    
        if(xhr.status == 200) {
    
    
                alert(xhr.responseText)
        }
    }
}
xhr.send(null)

4）クロスドメイン通信のいくつかの方法

（そのうちの5つは言及する必要があり、他の人は原則を尋ねます）

JSONP

ハッシュ（ハッシュの変更はページを変更しません。検索の変更はページを変更します）

postMessage

WebSocket

CORS

二、AJAX

1知識ポイント

1.1 XMLHttpRequest

（つまり、AJAXの作成方法）

1.2ステータスコードの説明

readyState（状態値）：
0-（初期化されていない）send（）メソッドが呼び出されていない
1-（ロード中）send（）メソッドが呼び出され、リクエストが送信されている
2-（ロード完了）send（）メソッドが実行されました対応するすべてのコンテンツを受信しました
3-（インタラクティブ）レスポンシブコンテンツが解析されています
4-（完了）レスポンシブコンテンツが解析され、クライアントで呼び出す準備ができています

status（ステータスコード）：
2 **-リクエストが正常に処理されたことを示します。たとえば、200
3 **-リダイレクトする必要があり、ブラウザは直接
4 **にジャンプします-クライアント要求エラー。例：404
5 **-サーバーエラー

1.3クロスドメイン

1.3.1クロスドメインとは

ブラウザには同一生成元ポリシーがあり、ajaxは他のドメインインターフェースへのアクセスを許可されていません

http://www.yourname.com/page1.html
http://m.imooc.com/course/ajaxcourserecom?cid=459
跨域条件：协议、域名、端口，有一个不同就算跨域
（http默认端口80，https默认端口43）

クロスドメイン
可能な3つのタグ：リソースのクロスドメインロードを可能にする3つのタグがあります
img src = * >>
link href = ***>
script src = * >>

3つのタグのシーン：
img>は統計の管理に使用され、統計Webサイトは他のドメインの
リンク>スクリプト> CDNを使用でき、CDNは他のドメインの
スクリプト> JSONPに使用できます

クロスドメインの考慮事項：
すべてのクロスドメインリクエストは、情報プロバイダーによって承認される必要があります
。許可なく取得できる場合は、ブラウザーの同一生成元ポリシーの抜け穴です。

1.3.2 JSONP

JSONP実装の原則：
活用という特徴をSRCまたはhref属性が同一生成元ポリシーによって制限されていない、
データを取得するためにSRCに、動的にスクリプトタグを作成して割り当てリモートインタフェースを、
とするコールバック関数を介してデータを受信し、処理のクロスを達成-ドメインの目標。

var script = document.createElement('script');
script.type = 'text/javascript';

// 传参并指定回调执行函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);

// 回调执行函数
function onBack(res) {
    
    
    alert(JSON.stringify(res));
}

1.3.3サーバー側でhttpヘッダーを設定します