Ajaxとは―読み方からしっかり、サンプルコードと入門基礎説明。

Ajaxとは何か、読み方からしっかり、サンプルコードと入門基礎説明をテーマに情報をまとめました。

▲記事トップへ

1. Ajaxとは―読み方や概要説明

Ajaxとは、非同期通信を利用してデータを取得したり、動的にウェブページの内容を書き換える技術のことです。 Ajaxを取り入れるとたとえば、ページを切り替えないで必要な部分だけ書き換えることができます。

Ajaxの読み方は「エイジャックス」です。また、Ajaxは、Asynchronous JavaScript + XML の略です。

Ajax の名前にも含まれている通り、中心的な技術は JavaScriptです。

非同期通信は JavaScript の XMLHttpRequest によって行なわれます。非同期でサーバーと通信して、ファイルの内容を取得したり、PHPなどのプログラムの出力結果をテキストやXMLなどで受け取ることができます。

2. Ajax入門編―簡単なAjaxのサンプルコード

Ajax入門編です。簡単なAjaxのサンプルコード、Hello Worldを見ていきます。

一番簡単なAjaxプログラム

できるだけ簡単なAjaxプログラムを示すため、 IE限定でサーバ側からのレスポンス受信時のステータスの判定などを取り除いたプログラムを作成してみました。

クライアント側(sample.html)

<html>
<head>
<meta http-equiv="content-type"
                        content="text/html; charset=UTF-8">

<script type="text/javascript">
var xmlhttp;

/* ボタンのonclick属性に登録する関数 */
function onButtonClick() {
    // IE版のXMLHttpRequestオブジェクトを生成する。
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

    // イベント発生(データ受信)時の処理を登録する。
    xmlhttp.onreadystatechange = httpHandler;

    // リクエスト先のURLや送信するデータを設定する。
    xmlhttp.open("POST", "hello.php");

    // サーバ側に要求を送る。
    xmlhttp.send(null);
}

/* XMLHttpRequestのonreadystatechangeに登録する関数 */
function httpHandler() {
    // サーバ側の応答内容をidがaのタグに設定する。
    document.getElementById("a").innerHTML=xmlhttp.responseText;
}
</script>

</head>
<body>

<p id="a">ここに文字列が出力します。</p>

<input type="button" value="ボタン" onclick="onButtonClick()"/>

</body>
</html>

サーバ側(hello.php)

<?php
// 文字列を表示するだけ。
print "Hello World!!";
?>

補足

コメントが書かれていない部分についての補足です。

文字化けを起こさないために、文字コードをUTF-8に統一しています。

<meta http-equiv="content-type"
                        content="text/html; charset=UTF-8">

このサンプルでは、ボタンクリックというイベントを処理するためイベントハンドラを使っています。イベントハンドラを使うときは、以下のmetaタグを記述します。

<meta http-equiv="Content-Script-Type" content="text/javascript">

フォームのボタンがクリックされたときのイベントハンドラを「onclick」といいます。以下のように記述するとイベント処理が実行されます。

onclick="＜イベント処理＞">

document.getElementById()メソッドで、idがaのpタグのエレメントを取り出して、このタグのinnerHTMLプロパティに「Hello World!!」というテキスト内容を設定しています。

3. Ajax基礎編―クロスブラウザやライブラリなどの基礎

Ajax基礎編です。クロスブラウザやライブラリなどサンプルコードを見ながら基礎を身に着けていきます。

クロスブラウザ対応版のHello World

入門編で扱ったHello World!!のサンプルコードを改造して、複数のブラウザに対応したクロスブラウザ対応版の Hello Worldにしていきます。

サンプルコード

クロスブラウザ対応版のHello World!!(Ajaxアプリケーション)です。コメントを詳しく書きましたので、説明はコメントを参照してください。

クライアント側(sample.html)

<html>
<head>
<meta http-equiv="content-type"
      content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type"
      content="text/javascript">

<script type="text/javascript">
/** 要求送信とデータ受信を行う関数 */
function loadData() {
    // ローカル変数を宣言する。
    var xmlhttp;

    // XMLHttpRequestオブジェクトを生成する。
    try {
        /// IE7、FireFox、Opera前提にオブジェクトを生成する。
        xmlhttp = new XMLHttpRequest();

    } catch(e) {
        try {
            /// オブジェクト生成に失敗したらIE6を前提に試みる。
            xmlhttp = new ActiveXObject("Msxml12.XMLHTTP");

        } catch(e) {
            /// 再度、失敗したらIE5、IE5.5を前提に試みる。
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    // 受信用コールバック関数を定義＆登録する。
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status== 200) {
            chengeInnerText(xmlhttp);
        }
    }

    // 要求先のURLなどを設定する。
    xmlhttp.open("POST", "hello.php");

    // サーバ側に要求を送る。
    xmlhttp.send(null);
}

/** サーバ側の応答内容をidがaのタグに設定する関数 */
function chengeInnerText(xmlhttp) {
    document.getElementById("a").innerHTML
                                 =xmlhttp.responseText;
}
</script>

</head>
<body>
<p id="a">ここに文字列が出力します。</p>
<input type="button" value="ボタン" onclick="loadData()"/>
</body>
</html>

サーバ側(hello.php)

<?php
// 文字列を表示するだけ。
print "Hello World!!";
?>

単純なJSON形式のデータを受信するAjax

単純なJSON形式のデータを受信するAjaxのサンプルコードについて見ていきます。 eval関数を利用するとJSONデータをそのまま配列に代入できます。

サンプルコード

JSON形式のデータを受信して、idがaとbのタグのテキスト内容を変更するサンプルコードです。

クライアント側(sample.html)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script type="text/javascript">
/** 要求送信とデータ受信を行う関数 */
function loadData() {
    // ローカル変数を宣言する。
    var xmlhttp;

    // XMLHttpRequestオブジェクトを生成する。
    try {
        /// IE7、FireFox、Opera前提にオブジェクトを生成する。
        xmlhttp = new XMLHttpRequest();

    } catch(e) {
        try {
            /// オブジェクト生成に失敗したらIE6を前提に試みる。
            xmlhttp = new ActiveXObject("Msxml12.XMLHTTP");

        } catch(e) {
            /// 再度、失敗したらIE5、IE5.5を前提に試みる。
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    // 受信用コールバック関数を定義＆登録する。
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status== 200) {
            chengeInnerText(xmlhttp);
        }
    }

    // 要求先のURLなどを設定する。
    xmlhttp.open("POST", "hello.php");

    // サーバ側に要求を送る。
    xmlhttp.send(null);
}

/** サーバ側の応答内容をidがaのタグに設定する関数 */
function chengeInnerText(xmlhttp) {
    // 受信データを連想配列に格納する。
    var rcvdata = eval("(" + xmlhttp.responseText + ")");

    // $関数を利用してタグのテキスト内容を変更する。
    document.getElementById("a").innerHTML=rcvdata.a;
    document.getElementById("b").innerHTML=rcvdata.b;
}
</script>

</head>
<body>
<div id="a">ここに文字列aが出力します。</div>
<div id="b">ここに文字列bが出力します。</div>
<input type="button" value="ボタン" onclick="loadData()"/>
</body>
</html>

サーバ側(hello.php)

<?php
print "{a:\"コンテンツA\",b:\"コンテンツB\"}";
?>

Ajaxでリクエスト本文を送信する方法

XMLHttpRequest.sendメソッドにリクエスト本文の文字列を渡すことでリクエスト本文を送信することができます。

サンプルコード

サンプルコードです。上のテキストエリアにリクエスト本文を入力して送信ボタンを押すと、本文を設定したリクエストが送信され、サーバで同じ内容を本文に設定したレスポンスが返され、その内容を下のテキストエリアに設定します。

sample.js

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
/** 要求送信とデータ受信を行う関数 */
function loadData() {
    // ローカル変数を宣言する。
    var xmlhttp;

    // XMLHttpRequestオブジェクトを生成する。
    try {
        /// IE7、FireFox、Opera前提にオブジェクトを生成する。
        xmlhttp = new XMLHttpRequest();

    } catch(e) {
        try {
            /// オブジェクト生成に失敗したらIE6を前提に試みる。
            xmlhttp = new ActiveXObject("Msxml12.XMLHTTP");

        } catch(e) {
            /// 再度、失敗したらIE5、IE5.5を前提に試みる。
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }

    // 受信用コールバック関数を定義＆登録する。
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status== 200) {
            chengeInnerText(xmlhttp);
        }
    }

    // 要求先のURLなどを設定する。
    xmlhttp.open("POST", "hello.php");
    
    var body = document.getElementById("reqBody").value;

    // サーバ側に要求を送る。
    xmlhttp.send(body);
}

/** サーバ側の応答内容をidがresBodyのタグに設定する関数 */
function chengeInnerText(xmlhttp) {
    document.getElementById("resBody").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
リクエストボディ：<textarea id="reqBody" rows="4" cols="40"></textarea><br />
<input type="button" value="送信" onclick="loadData()"/><br />
レスポンスボディ：<textarea id="resBody" rows="4" cols="40"></textarea>
</body>
</html>

サーバ側(hello.php)

<?php
$requestBody = file_get_contents('php://input');
print $requestBody;
?>

jQueryのAjaxを使用してHTTP通信でテキストファイルのデータを取得する方法

jQueryのAjaxを使用してHTTP通信でテキストファイルのデータを取得するサンプルコードについて見ていきます。

説明

jQueryの$.ajax関数でHTTP通信でデータを取得することができます。

サンプルコード

ページを開くと、idがaというpタグ(<p id="a">)のテキストの色を「#ff9999」に変更するサンプルコードを記述しています。 (表示結果→index.html)。

sample.js

function sample(colorfile) {
    $.ajax({
        type: 'GET',
        url: colorfile,
        dataType: 'text',
        success: function(data) {
            $('#a').css({'color':data});
        },
        error:function() {
            alert('エラーです。');
        }
    });
}

index.html

<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript">$(sample("color.txt"));</script>
</head>
<body>
<p id="a">このテキストのピンク色に変わります。</p>
</body>
</html>

color.txt

#ff9999

4. Ajaxリファレンス編―Ajax関連のAPI

Ajax関連のAPIについてです。

XMLHttpRequest

XMLHttpRequestは、サーバーと対話するために使用されるオブジェクトです。ページ全体を更新する必要なしに、データを受け取ることができます。これでユーザーの作業を中断させることなく、ウェブページの一部を更新することができます。

XMLHttpRequest.setRequestHeaderメソッド

XMLHttpRequestのsetRequestHeaderメソッドは、HTTPリクエストヘッダーの値を設定します。 setRequestHeader()は、 open()の呼び出しの後、 send()の呼び出しの前に呼び出さなければなりません。同じヘッダーについてこのメソッドを複数回呼び出された場合は、複数の値が単一のリクエストヘッダーにマージされます。