ajxatest.php:
<
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
>
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" src ="ajxatest.js" >
</script>
< style type ="text/css" >
.displaybox{
width:150px;
background-color:#ffffff;
border:2px solid #000000;
padding:10px;
font:24px normal verdana,helvetica,arial,sans-serif;
}
</style>
</head>
< body bgcolor ="#cccccc" onload ="getServerTime()" >
< h1 >ajax demon </h1>
< h2 >get the server time without page refresh </h2>
< form >
< input type ="button" value ="get server time" onclick ="getServerTime()" > </input>
</form>
< div class ="displaybox" id ="showtime" > </div>
</body>
</html>
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title >Insert title here </title>
< script type ="text/javascript" src ="ajxatest.js" >
</script>
< style type ="text/css" >
.displaybox{
width:150px;
background-color:#ffffff;
border:2px solid #000000;
padding:10px;
font:24px normal verdana,helvetica,arial,sans-serif;
}
</style>
</head>
< body bgcolor ="#cccccc" onload ="getServerTime()" >
< h1 >ajax demon </h1>
< h2 >get the server time without page refresh </h2>
< form >
< input type ="button" value ="get server time" onclick ="getServerTime()" > </input>
</form>
< div class ="displaybox" id ="showtime" > </div>
</body>
</html>
ajxatest.js:
function getXMLHTTPRequest(){
var req = null;
try{
req = new XMLHttpRequest(); //e.g firefox
}
catch(err1){
try{
req = new ActiveXObject( "Msxml2.XMlHTTP"); // some versions IE
}
catch(err2){
try{
req = new ActiveXObject( "Microsoft.XMlHTTP"); // some versions IE
}
catch(err3){
req = false;
}
}
}
return req;
}
var http = getXMLHTTPRequest();
function getServerTime(){
var myurl = 'http: //127.0.0.1/js/getdate.php';
myRand = parseInt(Math.random()*99999999999999999);
var modurl = myurl + "?rand=" + myRand;
//document.write(modurl);
http.open( "GET",modurl, true);
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">';
}
}
}
var req = null;
try{
req = new XMLHttpRequest(); //e.g firefox
}
catch(err1){
try{
req = new ActiveXObject( "Msxml2.XMlHTTP"); // some versions IE
}
catch(err2){
try{
req = new ActiveXObject( "Microsoft.XMlHTTP"); // some versions IE
}
catch(err3){
req = false;
}
}
}
return req;
}
var http = getXMLHTTPRequest();
function getServerTime(){
var myurl = 'http: //127.0.0.1/js/getdate.php';
myRand = parseInt(Math.random()*99999999999999999);
var modurl = myurl + "?rand=" + myRand;
//document.write(modurl);
http.open( "GET",modurl, true);
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">';
}
}
}
getdate.php:
<?php
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?><timenow>" . date('H:i:s')."</timenow>";
?>
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?><timenow>" . date('H:i:s')."</timenow>";
?>
里面用到一个图片,附件中有
这个例子非常简单,但很实用,对于初学者学习ajax有相当的意义。可以通过个例子了解ajax的工作原理。
转载于:https://blog.51cto.com/daven/195641