AJAXの概要
AJAXは、次のことができるため、開発者にとって夢のようなものです。
- ページが読み込まれた後Webサーバーからデータを読み取る
- ページをリロードせずにWebページを更新する
- バックグラウンドでデータをWebサーバーに送信する
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>セクションは、サーバーからの情報を表示するために使用されます。
<button>は関数を呼び出します(クリックされた場合)。
この関数は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およびHTML DOM(データを表示または使用するため)
AJAXは誤解を招く名前です。AJAXアプリケーションは XMLを使用してデータを転送する場合がありますが、プレーン テキストまたはJSONテキストとしてデータを転送することも同様に一般的です。
AJAXを使用すると、バックグラウンドでWebサーバーとデータを交換することにより、Webページを非同期に更新できます。つまり、ページ全体をリロードすることなく、Webページの一部を更新できます。
AJAXのしくみ
- 1. Webページでイベントが発生する(ページが読み込まれる、ボタンがクリックされる)
- 2. JavaScriptでXMLHttpRequestオブジェクトを作成する
- 3. XMLHttpRequestオブジェクトがリクエストをWeb サーバーに送信します
- 4. サーバーがリクエストを処理する
- 5. サーバーがWebページに応答を返します
- 6. 応答はJavaScriptによって読み取られます
- 7. 適切なアクション(ページの更新など)はJavaScriptによって実行されます
最新のブラウザー(Fetch API)
最新のブラウザーは、XMLHttpRequestオブジェクトの代わりにFetch APIを使用できます。
Fetch APIインターフェースにより、WebブラウザーはWeb サーバーに対してHTTPリクエストを行うことができます。
XMLHttpRequestオブジェクトを使用すると、Fetchは同じことをより簡単な方法で行うことができます。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。