php里面使用ajax的基本过程

使用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;
}

 

最后是结果图:

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值