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 で正しいアクションを実行します（ページの更新など）