AJAXの紹介
AJAXは、次のことができるため、開発者の夢です。
- Webサーバーからデータを読み取る-ページが読み込まれた後
- ページをリロードせずにWebページを更新する
- バックグラウンドでWebサーバーにデータを送信する
AJAXの例
Let AJAX change this text
AJAXの例の説明
HTMLページ
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
HTMLページには、<div>セクションと<button>が含まれています。
<div>セクションは、サーバーからの情報を表示するために使用されます。
<ボタン>は関数を呼び出します（クリックされた場合）。
この関数は、Webサーバーにデータを要求し、それを表示します。
関数loadDoc（）
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
AJAXとは何ですか？
AJAX =同期JavaScriptおよびXML 。_ _
AJAXはプログラミング言語ではありません。
AJAXは、次の組み合わせを使用します。
- ブラウザ組み込み
XMLHttpRequestオブジェクト（Webサーバーからのデータを要求するため） - JavaScriptおよびHTMLDOM（データを表示または使用するため）
AJAXは誤解を招く名前です。AJAXアプリケーションはXMLを使用してデータを転送する場合がありますが、データをプレーンテキストまたはJSONテキストとして転送することも同様に一般的です。
AJAXを使用すると、バックグラウンドでWebサーバーとデータを交換することにより、Webページを非同期で更新できます。これは、ページ全体をリロードすることなく、Webページの一部を更新できることを意味します。
AJAXのしくみ
- 1. Webページでイベントが発生します（ページが読み込まれ、ボタンがクリックされます）
- 2.XMLHttpRequestオブジェクトはJavaScriptによって作成されます
- 3.XMLHttpRequestオブジェクトはWebサーバーにリクエストを送信します
- 4.サーバーがリクエストを処理します
- 5.サーバーは応答をWebページに送り返します
- 6.応答はJavaScriptによって読み取られます
- 7.適切なアクション（ページの更新など）はJavaScriptによって実行されます
最新のブラウザ（Fetch API）
最新のブラウザでは、XMLHttpRequestオブジェクトの代わりにFetchAPIを使用できます。
Fetch APIインターフェースを使用すると、WebブラウザーはWebサーバーに対してHTTP要求を行うことができます。
XMLHttpRequestオブジェクトを使用する場合、Fetchは同じことをより簡単な方法で行うことができます。