Ajax実践の巻 - 「ほのなの」の日記

やっとの思いで読みきった技術書は「読んだだけじゃ良くわからん！」という結論でまとめましたが↓
http://d.hatena.ne.jp/hononano/20060702/p1
「言ったらやらないと駄目よねぇ・・・。」という事で、やってみました！！！

本当ならAjaxにする必要は無く、JavaScriptで十分なものなんですが、まぁまぁそこはお勉強ということで大目に見ていただいて・・・・・。
んじゃあ早速はじめましょう。

【仕様】

・ブラウザで動作する超簡易電卓
・基本的に一般の電卓と同じ動作を行う。
・小数点入力、メモリー機能（Ｍ＋・Ｍ−・ＭＣ・ＭＲ・ＧＴ）は無し

【配置】

”ルートディレクトリ/Calc/”以下に下記ファイルを配置する
・index.html
・test.js
・test.php

【ＨＴＭＬ】

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=SJIS">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <title>ajax test</title>
  <script type="text/javascript" src="./test.js"></script>
 </head>
 <form name="frm">
 <body onload="Clear()">
  <table border="1">
   <tr>
    <td bgcolor="silver" width="100" height="20" colspan="4" align="right">
     <div id="disp"></div>
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" id="btn07" onclick="ClickBTN('7')" value="７">
    </td>
    <td>
     <input type="button" id="btn08" onclick="ClickBTN('8')" value="８">
    </td>
    <td>
     <input type="button" id="btn09" onclick="ClickBTN('9')" value="９">
    </td>
    <td>
     <input type="button" id="btn14" onclick="ClickPTN('DIVIDE')" value="÷">
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" id="btn04" onclick="ClickBTN('4')" value="４">
    </td>
    <td>
     <input type="button" id="btn05" onclick="ClickBTN('5')" value="５">
    </td>
    <td>
     <input type="button" id="btn06" onclick="ClickBTN('6')" value="６">
    </td>
    <td>
     <input type="button" id="btn13" onclick="ClickPTN('MULTIPLY')" value="×">
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" id="btn01" onclick="ClickBTN('1')" value="１">
    </td>
    <td>
     <input type="button" id="btn02" onclick="ClickBTN('2')" value="２">
    </td>
    <td>
     <input type="button" id="btn03" onclick="ClickBTN('3')" value="３">
    </td>
    <td>
     <input type="button" id="btn12" onclick="ClickPTN('SUBTRACT')" value="−">
    </td>
   </tr>
   <tr>
    <td>
     <input type="button" id="btn99" onclick="Clear()" value="Ｃ">
    </td>
    <td>
     <input type="button" id="btn00" onclick="ClickBTN('0')" value="０">
    </td>
    <td>
     <input type="button" id="btn98" onclick="Calc()" value="＝">
    </td>
    <td>
     <input type="button" id="btn11" onclick="ClickPTN('ADD')" value="＋">
    </td>
   </tr>
  </table>
  <input type="hidden" id="Total">
  <input type="hidden" id="CalcPtn">
  <input type="hidden" id="ViewFlg">
  <input type="button" id="dbgbtn" onclick="debug()" value="debug">
  <div id="debug"></div>
 </body>
 </form>
</html>

動作説明：
　　"C"ボタン押下でClear()を呼び出す
　　"0"〜"9"ボタン押下でClickBTN()を呼び出す（引数は押下されたボタンの数字とする）
　　"÷"、"×"、"−"、"＋"ボタン押下でClickPTN()を呼び出す（引数は押下されたボタンのスペルとする）
　　"＝"ボタン押下でCalc()を呼び出す

【ＪａｖａＳｃｒｉｐｔ】

// HTTP通信用、共通関数
function createXMLHttpRequest(cbFunc){
 var XMLhttpObject = null;
 try{
  XMLhttpObject = new XMLHttpRequest();
 }catch(e){
  try{
   XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
   try{
    XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e){
    return null;
   }
  }
 }
 if (XMLhttpObject){
  XMLhttpObject.onreadystatechange = cbFunc;
  return XMLhttpObject;
 }
}

function Clear(){
 document.getElementById('disp').innerHTML="0";
 document.getElementById('Total').Value="0";
 document.getElementById('CalcPtn').Value="";
 document.getElementById('ViewFlg').Value="0";
}

function ClickPTN(ptnName){
 if (document.getElementById('CalcPtn').Value != ""){
  tmpTXT="?Value="+document.getElementById('disp').innerHTML;
  tmpTXT=tmpTXT+"&Total="+document.getElementById('Total').Value;
  tmpTXT=tmpTXT+"&Pattern="+document.getElementById('CalcPtn').Value;
  httpObj = createXMLHttpRequest(displayData);
  if (httpObj){
   httpObj.open("GET","test.php"+tmpTXT,false);
   httpObj.send(null);
  }
 }
 document.getElementById('CalcPtn').Value=ptnName;
 document.getElementById('Total').Value
  =document.getElementById('disp').innerHTML;
 document.getElementById('ViewFlg').Value="0";
}

function ClickBTN(btnName){
 if (document.getElementById('ViewFlg').Value == "0"){
  document.getElementById('disp').innerHTML=btnName;
  document.getElementById('ViewFlg').Value="1";
 }else{
  document.getElementById('disp').innerHTML
   =document.getElementById('disp').innerHTML+btnName;
 }
}

function Calc(){
 if (document.getElementById('CalcPtn').Value != ""){
  tmpTXT="?Value="+document.getElementById('disp').innerHTML;
  tmpTXT=tmpTXT+"&Total="+document.getElementById('Total').Value;
  tmpTXT=tmpTXT+"&Pattern="+document.getElementById('CalcPtn').Value;
  httpObj = createXMLHttpRequest(displayData);
  if (httpObj){
   httpObj.open("GET","test.php"+tmpTXT,true);
   httpObj.send(null);
  }
 }
}

function displayData(){
 if ((httpObj.readyState == 4) && (httpObj.status == 200)){
   document.getElementById('disp').innerHTML=httpObj.responseText;
   document.getElementById('Total').Value
    =document.getElementById('disp').innerHTML;
   document.getElementById('ViewFlg').Value="0";
   document.getElementById('CalcPtn').Value="";
 }
}

動作説明：
　　Clear()　：　保持情報をクリアする
　　ClickBTN(btnName)　：　押下された数字を表示する
　　ClickPTN(ptnName)　：　押下されたボタン情報を保持する（"÷"、"×"、"−"、"＋"ボタンが既に押されている場合は計算する）
　　Calc()　：　計算する
　　createXMLHttpRequest(cbFunc)　：　ブラウザを判断し、XMLHttpObjectを生成する
　　displayData()　：　非同期通信でえられたデータを処理する（表示処理）

【ＰＨＰ】

<?php
$value = $_GET['Value'];
$total = $_GET['Total'];
$pattern = $_GET['Pattern'];

if ($pattern == "DIVIDE"){
  $result = $total / $value;
}elseif($pattern == "MULTIPLY"){
  $result = $total * $value;
}elseif($pattern == "SUBTRACT"){
  $result = $total - $value;
}elseif($pattern == "ADD"){
  $result = $total + $value;
}

echo $result;
?>

動作説明：
表示情報、結果情報、計算パターン情報をブラウザから受け取り、パターンを判断して計算を行った後、計算結果をブラウザに返す

まぁまぁ上手くできたと思われます。
興味のある方は是非参考にしてください・・・。
ｍ（＿　＿）ｍ
　