私が読んでいる Ajax の本の例に従っています。
指示どおりにコードをまとめました。アイデアは、php サーバーの時間を取得し、ボタンがクリックされたときにそれを表示することです。
出版物は 2006 年でしたが、私が書いたものが古く、おそらくサポートされていないために壊れているかどうかはわかりません。
ご指導いただきありがとうございます。
AJAX ページ
<!DOCTYPE html>
<html>
<head>
<title>Ajax Demonstration</title>
<style>
.displaybox{
width: 150px;
margin:0 auto;
background-color: #fff;
border: 2px solid #000;
padding: 10px;
font:24px normal verdana, helvetica, arial, sans-serif;
}
</style>
<script language="JavaScript" type="text/javascript">
function getXMLHTTPRequest(){
try{
reg = new XMLHttpRequest();
}
catch(err1){
try{
req = new ActiveXObject("Msxm12.XMLHTTP");
}
catch(err2){
try{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(err3){
req = false;
}
}
}
}
var http = getXMLHTTPRequest();
function getServerTime(){
var myurl = 'telltimeXML.php';
myRand = parseInt(Math.random()* 999999999999999);
//add random number to URL to avoid cache problems
var modurl = myurl+"?rand="+myRand;
http.open("GET", modurl, true);
//set up the callback function
http.onreadystatechange = useHttpResponse;
http.send(null);
}
function useHttpResponse(){
if(http.readyState == 4){
if(http.status == 200){
var timeValue = http.responseXML.getElementsByTagName("timenow")[0];
document.getElementById('showtime').innerHTML = timeValue.childNodes[0].nodeValue;
}
}
else{
document.getElementById('showtime').innerHTML = '<img src="anim.gif">';
}
}
</script>
</head>
<body style="background-color:#ccc; text-align:center" onLoad="getServerTime()">
<h1>Ajax Demonstration</h1>
<h2>Getting the server time without page refresh</h2>
<form>
<input type="button" value="Get Server Time" onClick="getServerTime()" />
</form>
<div id="showtime" class="displaybox"></div>
</body>
PHP ページ
<?php
header('Content-Type: text/xml');
echo "<?xml version='1.0' ?><clock1><timenow>".date('H:i:s')."</timenow></clock1>";
?>