Ajax (Asynchronous JavaScript and XML)

非同期JavaScript、XML、JavaScriptを使用して非同期に これは、サーバとブラウザ間のデータ交換の一般的な方法を意味します。

非同期は、ブラウザがサーバと通信することによって任意の操作を実行し、他の操作を実行できることを意味します。 逆に、同期は、ネットワーク遅延が発生して待機することを意味する。

Ajaxは、WebブラウザとWebサーバが内部でデータ通信を行うことを可能にする。 その後、プログラミングによって変更の結果をWebページに反映し、Webページをロードします。 サービスを使用可能にする(非同期)。

XMLHttpRequest

ajax通信を行うためのAPI(オブジェクト)。 -XMLを使用して通信するだけではありません。JSONもよく使います

XMLHttpRequestオブジェクトを作成し、変数xhrに含めます。

オブジェクトはxhrでXMLHttpRequestに制御できます。 <script> var xhr = new XMLHttpRequest(); </script>

.open(「方法」>「URL」)接続するターゲットと方法を指定します。

最初のパラメータはformタグの方法に対応し,主にGET/POST方式を用いる.2番目のパラメータは、フォームタグの操作に相当する接続するサーバ側リソースのアドレスです。 −最初のパラメータは、サーバと通信する方法GETである。 サーバと通信するサーバ側のURLソースを2番目のパラメータとする. -./はhtmlファイルと同じディレクトリを表します。 <script> xhr.open('GET', './time.php');``` </script>

onreadystatechangeイベントハンドルを呼び出します。

サーバとの通信中に内部ステップがあり、各ステップ 応答状態の変化に応じてonreadystatechangeイベントハンドルを呼び出す。 <script> xhr.onreadystatechange = function(){ </script>

readyState通信の現在の状態をお知らせします readyStateプロパティは、HTTP通信の現在の状態を示します。4は、通信が完了したことを示します。 statusプロパティは、HTTP通信の結果を表します。 200は通信が成功したことを意味します -xhrオブジェクトは、通信状態および通信完了値を受信して表示します。 -responseTextプロパティには、サーバから送信されたデータが含まれます。 <script> xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ document.querySelector('#time').innerHTML = xhr.responseText; } } </script>

sendメソッドを呼び出します。

ajaxオブジェクトは、GET方式でこのアドレスで通信を開始する。 <script> xhr.send(); </script>