AJAX基本チュートリアル

AJAX XMLHttpRequest

AJAX 概要

AJAXは、バックグラウンドのWebサーバーとデータを交換することで「非同期」にウェブコンテンツを更新することができます。

これは、ページの一部を更新するのに整个ページを再読み込みする必要がないことを意味します。

AJAXを使用すると、以下ができます：

データをウェブサーバーに送信します（バックグラウンドで）
ウェブサーバーからデータを読み取ります（ページが読み込まれた後）
ページを再読み込みしないでウェブページを更新する

AJAXサンプル

以下のコードはAJAXの基本的なサンプルを示しています：

AJAXでこのテキストを変更します

コードを実行する

AJAXサンプル説明

上記の例には以下の部分が含まれています：

HTMLコード：

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAXでこのテキストを変更します</h2>
　　<button onclick="fetchDoc()" type="button">リクエストを送信</button>
　　</div>
　　
　　</html>

HTMLコードには、以下が含まれています：<div>部分（<h2>および<button>)

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

その<button>クリック時に呼び出される関数を呼び出します。

この関数はWebサーバーからデータを請求し、表示します（ページを再読み込みしません）：

関数fetchDoc()：

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

AJAX とは何ですか？

AJAX は “Asynchronous Javascript And XML”（非同期 JavaScript と XML）の略です。

AJAX はプログラミング言語ではなく、ウェブページからウェブサーバーにアクセスする技術です。

AJAX はページを再読み込みしないでサーバーにリクエストを送信することができます。

AJAX はページをリフレッシュせずにサーバーと通信し、データの交換とページの更新を行うことができます。

AJAX は JSON、XML、HTML、テキストファイルなどの様々な形式の情報を送信および受信できます。

要約すると、XMLHttpRequest オブジェクトを使ってサーバーと通信することです。

AJAX の二つの主要機能により、以下のような操作を実行できます：

ページを再読み込みしないでリクエストをサーバーに送信する方法
サーバーからデータの受信と処理

AJAX はどのように動作しますか？

AJAX 通信を実行するために、JavaScript は XMLHttpRequest オブジェクトを使ってサーバーに HTTP リクエストを送信し、データを応答として受け取ります。

すべての現代のブラウザ（Chrome、Firefox、IE）7 +、Safari、Opera）はこの XMLHttpRequest オブジェクトをサポートしています。

以下の図は、AJAX 通信がどのように動作するかを示しています：

AJAX 操作手順

ウェブページでイベントが発生しました（ページが読み込まれた場合やボタンがクリックされた場合など）
XMLHttpRequest オブジェクトは JavaScript で作成されます
XMLHttpRequest オブジェクトはリクエストをウェブサーバーに送信します
サーバーはリクエストを処理します
サーバーはレスポンスをウェブページに送信します
レスポンスは JavaScript で読み取られます
HTML DOM は JavaScript で更新されます

学ぶことができること

このチュートリアルの次の章では、以下を学びます：
XMLHttpRequest オブジェクトを作成する方法
ウェブサーバーにデータを送信する方法（バックグラウンドで）
ウェブサーバーからデータを読み取る方法（バックグラウンドで）
ページを再読み込みしないでウェブページを更新する方法

AJAX XMLHttpRequest