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

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

サンプルコード

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

クライアント側(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!!";
?>

戻る

Loarding…