アヤックス、すなわち「非同期JavaScriptとXML」（非同期JavaScriptとXML）は、インタラクティブなWebアプリケーションを作成するために、Web開発技術を指します。

これは新しい技術ではなく、古い技術の多くは、新しいアイデアを生成するために、一緒にもたらします。JavaScriptやXML、HTML、DOM、XMLHttpRequestのなど：それは技術があるが含まれています。

ネイティブのAjaxへの4つのステップ

オブジェクトAJAXを作成します。1.

1	VaRの XHR = 新しい XMLHttpRequestを（）;

図2に示すように、コールバック関数を結合AJAXステータスモニタの変化は、データ取得サーバ応答、AJAX状態が4に等しい判定する

xhr.onreadystatechange = 関数（） { 場合（この .readyState == 4 && この .status == 200）{ VAR responseData = この .responseText。コンソールの.log（responseData）。VaRの結果= JSON .parse（responseData）。VaRの STR = `大名：$ {result.username} -芳龄：$ {result.age} `。文書 .getElementById（"情報"）.innerHTML = strの。  } }。

3、HTTP接続を確立します

1	xhr.open（"GET" 、"インターフェイスアドレス"、真の）;

4、httpリクエストを送信します

1	xhr.send（NULL）。

GETとPOSTリクエストの違い

図1に示すように、パラメータを使用してGET要求ではなくPOSTリクエストがHTTPメッセージの内容のエンティティとしてWEBサーバに送信され、URLで渡されます。

他の人がそのような口座番号やパスワードなど、これらのデータのブラウザの履歴から、それを読むことができるように、図2に示すように、GET方式は、データを要求したブラウザまでキャッシュされます。いくつかのケースでは、GETは深刻な安全上の懸念を生じさせます。POSTメソッドは、比較的に言えば、これらの問題を回避します。

クロスドメインの問題

ドメイン名、プロトコル、ポートが異なるクロスドメインを持っています

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

図1に示すように、クロスドメインCORSの方法によって

CORS（クロスドメインのリソース共有、クロスオリジンリソースの共有）のクロスドメインアクセスのためのメカニズムを定義し、AJAXは、クロスドメインアクセスを行うことができます。CORSは、Webアプリケーションが別のドメインAJAXクロスドメインリクエストに一つのドメインで提出できます。この関数は、単にサーバへの応答ヘッダによって要求された設定、達成することは非常に簡単です。
1

ヘッダ（「アクセス制御-許可起源：*」）。

2、JSONP方法

JSONPが主な理由は、クロスドメインのプログラムを解決することができて<script>追加することにより、スクリプトはクロスドメイン機能を持つクライアントのWebページ<script>サーバーへの要素の要求JSONデータを、このアプローチは、同一生成元ポリシーの制限ではありません

。1 
2 
3 
4 
5 
6 
7 
8つの
大きい列   Ajaxとクロスドメインクラス= "行"> 9 
10 
11 
12は
13であり、
14

慰めaddScriptTag（SRC）{ VARのスクリプト= 文書 .createElement（'スクリプト'）。  script.setAttribute（"タイプ"、"テキスト/ javascriptの"）;   script.src = SRC; 文書 .body.appendChild（スクリプト）; }
  


  


ウィンドウ .onload = 機能（） { 
  addScriptTag（'http://example.com/ip?callback=foo' ）。
}

機能（データ） {コンソールの.log（ 'レスポンスデータ：' + JSON .stringify（データ））。}。

3、フォワードプロキシ
4、ノードミドルウェアプロキシクロスドメイン

使用ノード+は、プロキシサーバーアップ+ HTTPプロキシ・ミドルウェアのセットを表現します

フロントエンドコード

VaRの XHR = 新しい XMLHttpRequestを（）;


xhr.withCredentials = 真 ;


xhr.open（"GET" 、"http://www.domain1.com:3000/login?user=admin" 、真の）; 
xhr.send（）;

背景コード

VaRは発現= 必要とする（「発現します」）。
VaRのプロキシ=が必要です（「HTTPプロキシ・ミドルウェア」）; 
VaRのアプリ=表現（）;

app.use（"/" 、  プロキシ（{ //プロキシ宛先インターフェイスクロスドメイン     対象："http://www.domain2.com:8080" 、    changeOrigin：trueに、
  

    



    //レスポンスヘッダを変更し、クロスドメインクッキー許容
     onProxyResを：関数（proxyRes、REQ、RES） { 
      res.header（「アクセス制御-許可原点」、「http://www.domain1.com」）; 
      res.header（「アクセス制御-許可-資格」、「真の」）; 
    }

    //ドメイン更新応答クッキー情報
     cookieDomainRewrite："www.domain1.com"  //変更しないで示す、偽です
   ）} 
）;

app.listen（3000）。
コンソールの.log（「プロキシサーバーがポート3000で聴いています...」）;

そして、クロスドメインのAjax

ネイティブのAjaxへの4つのステップ

GETとPOSTリクエストの違い

クロスドメインの問題

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

おすすめ