使用ajax时,首先创建一个xmlhttprequest
function GetXMLHTTPREQUEST()
{
var req = false;
try
{
req = new XMLHttpRequest();
}
catch (err)
{
try
{
req = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (err)
{
try
{
req = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (err)
{
req = false;
}
}
}
return req;
}
创建好xmlhttprequest后,然后是根据已有的xmlhttprequest 进行有服务器通信
function GetServerTime()
{
var thepage = "ajax.php";
var myrand = parseInt(Math.random()*9999999);
var TheUrl = thepage+"?rand="+myrand;
myReq.open("GET",TheUrl,true);
myReq.onreadystatechange = theHttpResponse;
myReq.send(null);
}
返回信息并显示
function theHttpResponse()
{
if(myReq.readystate==4)
{
if(myReq.status==200)
{
var timestring=myReq.responseXML.getElementsByTagName("timestring")[0];
document.getElementById('outer').innerHTML = timestring.childNodes[0].nodeValue;
}
else
{
document.getElementById("outer").innerHtml="nothing";
}
}
}
服务器端 代码返回一个XML格式的数据。
<?php
header("Content-type:text/xml");
echo "<?xml version=/"1.0/" ?>";
echo "<stock><timestring>It is";
echo date("H:i:s")."on".date("Y:m:d");
echo " </timestring></stock>";
?>
以上是主要代码部分,现在是UI html部分
<link rel="stylesheet" type="text/css" href="test.css"/>
<script src="ajaxfun.js" type="text/javascript"></script>
<script type="text/javascript">
var myReq = GetXMLHTTPREQUEST();
</script>
</head>
<body>
<div id="page" >
<p>这是一个ajax测试,获取服务器的时间。
</p>
<div id="nav">
<div style="height:200px;width:200px;background-color:#ff3234" id="outer"> </div>
<input id="out" type="button" value="获取时间" οnclick="javascript:GetServerTime();"/>
</div>
</div>
</body>
</html>
里面test.css部分代码是:
body, p, blockquote
{
margin:0px auto;
text-align:center;
}
#page
{
background-color:#99CCFF;
height:300px;
width:998px;
border:#0000FF;
border-width:medium;
}
#nav
{
background-color:#00FF33;
width:998px;
height:200px;
}
最后是结果图: