4.JavaScriptのAjax化

Ajax化する

送信データが決まり、受信データをどこで受け取るのかが決まったため、データ送信時の処理をAjaxの基本ルーチンに置き換えます。

fnGetRemoteScript('/cgi-bin/ajax/s1.cgi','uid=' + document.all('txtUid').value + '&act=' + iAct,'txtList');

ここではs1.cgiに、送信データを渡し、結果をtxtListに受け取るようにします。

その他の調整

データ受信用textareaは内部処理で使うための部品なので、この部品のスタイルに「display:none;」を指定しておくことで非表示にしておきます。

<textarea id="txtList" style="display:none;"></textarea>

JavaScriptを書く

以上を踏まえて、JavaScriptをAjax化します。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Ajax Game</title>
<style type="text/css">
<!--
*        { font-family: sans-serif; }
table    { border-collapse: collapse; }
td       { padding: 5px; }
table,td { border: 1px solid black; }
.btn     { width: 6em; }
-->
</style>
<script type="text/javascript">
<!--
function fnCreateXMLHttp(){
    if(window.ActiveXObject){
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                return null;
            }
        }
    } else if(window.XMLHttpRequest){
        return new XMLHttpRequest();
    } else {
        return null;
    }
}
function fnGetRemoteScript(strURL,strGet,strElm){
    //Cache Excape
    var dNow = new Date();
    var strReq = strURL + '?time=' + dNow.getTime();
    var strRes;
    
    //Adjust Request Param
    if (strGet != '') { strReq += '&' + strGet; }
    
    //XML HTTP Request
    var xmlhttp = fnCreateXMLHttp();
    if (xmlhttp) {
        xmlhttp.open('GET', strReq);
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                strRes = xmlhttp.responseText;
                document.getElementById(strElm).value = strRes;
            }
        }
        xmlhttp.send(null);
    }
}
function sbInit() {
    //Generate UserID
    document.all('txtUid').value = Math.floor(Math.random() * 1000000);
    
    //Init Text
    document.all('txtList').value = '';
    document.all('txtText').value = '';
    
    //Interval Start
    window.setInterval('sbInterval()',20);
    sbSend(-1);
}
var m_iMyLife = 0;
var m_iYuLife = 0;
var m_strText = '';
function sbInterval() {
    //Get
    var strList = document.all('txtList').value + "\n\n";
    var astrGet = strList.split("\n");
    
    var iMyLife = Number(astrGet[0]);
    var iYuLife = Number(astrGet[1]);
    var strText = astrGet[2].replace(/\\n/g,"\n");
    
    //Text
    var iIdx = m_strText.length;
    if (m_strText.substring(0,iIdx) == strText.substring(0,iIdx) && iIdx < strText.length) {
        m_strText = strText.substring(0,iIdx + 1);
        document.all('txtText').value = m_strText;
    } else if (m_strText.substring(0,iIdx) != strText.substring(0,iIdx)){
        m_strText = '';
        document.all('txtText').value = m_strText;
    } else {
        //Life
        if        (m_iMyLife < iMyLife) { m_iMyLife++;
        } else if (m_iMyLife > iMyLife) { m_iMyLife--; }
        var strLife = '';
        for (iIdx = 1; iIdx <= m_iMyLife; iIdx++) { strLife += '|'; }
        document.all('pnlMyLife').innerHTML = strLife;
        
        if        (m_iYuLife < iYuLife) { m_iYuLife++;
        } else if (m_iYuLife > iYuLife) { m_iYuLife--; }
        var strLife = '';
        for (iIdx = 1; iIdx <= m_iYuLife; iIdx++) { strLife += '|'; }
        document.all('pnlYuLife').innerHTML = strLife;
    }
    
    //Menu
    document.all('pnlMenu').style.visibility = (iMyLife > 0 && iYuLife > 0) ? 'visible' : 'hidden';
}
function sbSend(iAct) {
    fnGetRemoteScript('/cgi-bin/ajax/s1.cgi','uid=' + document.all('txtUid').value + '&act=' + iAct,'txtList');
}
// -->
</script>
</head>
<body onload="sbInit();">
<table>
<tr><td>自分 : <span id="pnlMyLife"></span></td></tr>
<tr><td>相手 : <span id="pnlYuLife"></span></td></tr>
<tr><td><textarea id="txtText" cols="60" rows="8" readonly="readonly"></textarea></td></tr>
<tr>
<td>
<span id="pnlMenu" style="visibility:hidden;">
<input type="button" class="btn" onclick="sbSend(0);" value="攻撃" />
<input type="button" class="btn" onclick="sbSend(1);" value="お昼寝" />
</span>
</td>
</tr>
</table>
<input id="txtUid" type="hidden" />
<textarea id="txtList" style="display:none;"></textarea>
</body>
</html>

4.JavaScriptのAjax化

一人用戦闘シーンの例

各手順の詳細

Ajax化する

その他の調整

JavaScriptを書く