Hello World(一番簡単なAjax)

このページでは、Hello World(一番簡単なAjax)プログラムを紹介しています。

一番簡単なAjaxプログラム

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

クライアント側(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!!」というテキスト内容を設定しています。

戻る

Loarding…