AJAXの紹介
AJAXは、次のことができるため、開発者の夢です。
- ページをリロードせずに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() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
上記の例で使用されている「ajax_info.txt」ファイルは単純なテキストファイルであり、次のようになります。
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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によって実行されます