プレゼンテーションシナリオ: スライド132

スライド132では、JavaScript AJAXについて説明します。

例

AJAXはXMLHttpRequestを使用してサーバーとデータを送受信します。

主なステップ:

• new XMLHttpRequest() → サーバーとデータを送受信するためのオブジェクトを作成します。

• xhttp.open("GET", "ajax_info.txt", true) → ajax_info.txtファイル（変更する必要がある内容を含む）へのGETリクエストを定義します。

• xhttp.send() → サーバーにリクエストを送信します。

• xhttp.onload → サーバーが結果を返すと、この関数が実行されます。

  • this.responseTextはサーバーから返されたデータ（ajax_info.txtファイルの内容）です。
  • document.getElementById("demo").innerHTML = ... → <div id="demo">内のすべての内容を、受信したデータに置き換えます。

結果:

• 初期状態："Original content"というテキストが表示されます。
• ボタンをクリック後：ajax_info.txt内の内容（例："Hello! This content was loaded using AJAX."）が、ページをリロードせずに古いテキストを置き換えます。

注意: AJAXは古い技術で、現在では通常、コードが簡潔で読みやすいためFetch API（スライド127-128）が代わりに使用されます。ただし、AJAXはJavaScriptがサーバーと通信する方法を理解するために依然として重要です。

以上で、AJAXとXMLHttpRequestを使用してサーバーからデータを読み込む方法についての説明を終わります。