AJAX 簡介

AJAXは開発者の夢です。なぜなら、あなたは以下ができます：

  • ページをリフレッシュせずにウェブページを更新する
  • ページが読み込まれた後にサーバーからデータをリクエストする
  • ページが読み込まれた後にサーバーからデータを受け取る
  • バックグラウンドでサーバーにデータを送信する

AJAX インスタンス

以下のボタンをクリックして、Ajaxでこのテキストを変更してください：

実際に試してみる

AJAX 実例の説明

HTMLページ

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>AJAXでこのテキストを変更する</h2>
  <button type="button" onclick="loadDoc()">テキストを変更する</button>
</div>
</body>
</html>

このHTMLページには <div> と <button> が含まれています。

<div> サーバーからの情報を表示するために使用されます。

<button> 処理を呼び出す（クリック時に実行）。

この関数はウェブサーバーからデータをリクエストし、それを表示します：

Function 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 とは何ですか？

AJAX = Asynchronous JvaScript And XML.

AJAX はプログラミング言語ではありません。

AJAX は単に以下を組み合わせたものであり：

  • ブラウザ内の組み込み XMLHttpRequest オブジェクト（ウェブサーバーからデータをリクエスト）
  • JavaScript と HTML DOM（データを表示または使用する）

Ajax は誤解を招く名前です。Ajax アプリケーションはデータを XML で送信することができますが、データを純テキストや JSON テキストで送信することも一般的です。

Ajax は、バックグラウンドの Web サーバーとデータを交換することで、ウェブページを非同期に更新することができます。これは、ウェブページの一部を更新するだけで、全体を再読み込みする必要がないことを意味します。

AJAX はどのように機能するか

AJAX
  1. ウェブページでイベントが発生します（ページのロード、ボタンのクリックなど）
  2. JavaScript で XMLHttpRequest オブジェクトを作成します
  3. XMLHttpRequest オブジェクトがウェブサーバーにリクエストを送信します
  4. サーバーがリクエストを処理します
  5. サーバーが応答をウェブページに送信します
  6. JavaScript で応答を読み取ります
  7. JavaScript で正しいアクションを実行します（例えば、ページの更新）