转载 使用AJAX实现动态刷新页面功能

<span style="font-size: medium;">refresh.jsp

 

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<head><META http-equiv=Content-Type content="text/html; charset=UTF-8"></head>

<script language="javascript">

       var XMLHttpReq;

       //创建XMLHttpRequest对象       

      function createXMLHttpRequest() {

              if(window.XMLHttpRequest) { //Mozilla 浏览器

                     XMLHttpReq = new XMLHttpRequest();

              }

              else if (window.ActiveXObject) { // IE浏览器

                     try {

                          XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

                     } catch(e){

                       try {




     XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");




          } catch (e) {

    }

}

}




}

//发送请求函数

function sendRequest() {

createXMLHttpRequest();

var url = "refresh.do";

XMLHttpReq.open("POST", url, true);

XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

XMLHttpReq.send(null); // 发送请求

}

// 处理返回信息函数

function processResponse() {

if (XMLHttpReq.readyState == 4) { // 判断对象状态

if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息

DisplayHot();

setTimeout("sendRequest()", 1000);

} else { //页面不正常

window.alert("您所请求的页面有异常。");

}

}

}

// 显示更新数据信息的函数

function DisplayHot() {

var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;

var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;

document.getElementById("product").innerHTML = name;

document.getElementById("count").innerHTML = count;

}

</script>

</SCRIPT>

<body onload =sendRequest()>

<table  style="BORDER-COLLAPSE: collapse" borderColor=#111111 

                cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0>

    <TR>

         <TD align=middle height=4 colspan="2"><IMG height=4 

         src="images/promo_list_top.gif" width="100%" 

         border=0>

          </TD>

      </TR>

      <TR>

       <TD align=middle bgColor=#dbc2b0 

                      height=19 colspan="2"><B>正在热卖的笔记本</B>

       </TD>

    </TR>

    <tr>

        <td height="20">

                 型号:

          </td>

        <td height="20" id="product">

          </td>

    </tr>

    <tr>

        <td height="20">

                     销售数量:

          </td>

          <td height="20" id="count">

          </td>

    </tr>

</table>

</body>    

</html>

</span>

  

posted @ 2012-08-09 12:14  小0  阅读(412)  评论(0编辑  收藏  举报