クロスブラウザ対応版のHello World!!(prototype.js利用版)Ajaxアプリケーション

このページでは、クロスブラウザ対応版のHello World!!(prototype.js利用版)Ajaxアプリケーションについて説明しています。

prototype.jsのAjax.Requestメソッドを利用することでAjaxのコードが簡単に記述できます。また、$関数を使用するとdocument.getElementByIdメソッドの記述が短くなります。

サンプルコード

クロスブラウザ対応版のHello World!!(prototype.js利用版)Ajaxアプリケーションのサンプルプログラムです。 (表示結果→sample.html)。

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


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

    // 要求送信とデータ受信を行う。
    new Ajax.Request("hello.php", {
        method:"post",
        onSuccess: function(xmlhttp) {
            chengeInnerText(xmlhttp);
        }
    });
}

/**
 * サーバ側の応答内容をidがaのタグに設定する関数
 */
function chengeInnerText(xmlhttp) {
    // $関数を利用してタグのテキスト内容を変更する。
    $("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!!";
?>

戻る

Loarding…