Ajax的常用技巧---实现自动刷新页面.

Ajax的常用技巧---实现自动刷新页面.

网页自动刷新功能在web网站上已经屡见不鲜了，如即时新闻信息，股票信息等，都需要不断获取最新信息。在传统的web实现方式中，想要实现类似的效果，必须进行整个页面的刷新，在网络速度受到一定限制的情况下，这种因为一个局部变动而牵动整个页面的处理方式显得有些得不偿失。Ajax技术的出现很好的解决了这个问题，利用Ajax技术可以实现网页的局部刷新，只更新指定的数据，并不更新其他的数据。
   现在创建一个实例，以演示网页的自动刷新功能，该实例模拟火车侯票大厅的显示字幕。

1,服务器端代码

该实例服务器端代码的功能比较简单，即产生一个随机数，并以XML文件形式返回给客户端。打开记事本，输入下列代码：

<% @ page contentType = " text/html; charset=gb2312 "   %>
<%
response.setContentType( " text/xml; charset=UTF-8 " ); // 设置输出信息的格式及字符集
response.setHeader( " Cache-Control " , " no-cache " );
out.println( " <response> " ); 
for ( int  i = 0 ;i < 2 ;i ++ ){
    out.println( " <name> " + ( int )(Math.random() * 10 ) + " </name> " );
    out.println( " <count> "   + ( int )(Math.random() * 100 ) +   " </count> " );
}
out.println( " </response> " );
out.close();
%> 

 

保存上述代码，名称为auto.jsp。在该文件中，使用java.lang包中的Math类，产生一个随机数。

2,客户端代码

本实例客户端代码主要利用服务器端返回的数字，指定显示样式。打开记事本，输入下列代码

<% @ page language = " java "  import = " java.util.* "  pageEncoding = " GBK " %>
< head >
< META  http-equiv =Content-Type  content ="text/html; charset=gb2312" >
</ 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  =   " auto.jsp " ;
  XMLHttpReq.open( " GET " , 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( " cheh " ).innerHTML  =   " T- " + name + " 次列车 " ; 
    document.getElementById( " price " ).innerHTML  =  count + " 元 " ; 
 }


</ script > 
< body  onload  =sendRequest() >
< table  style ="BORDER-COLLAPSE: collapse"  borderColor =#5555555  cellSpacing =0  cellPadding =0  width =200      border =0 >

< TR >
    < TD  align =middle  bgColor =#abc2d0  height =19  colspan ="2" >< B >开往北京的列车 </ B >  </ TD >
</ TR >
< tr >
    < td  height ="20" > 车号： </ td >
    < td  height ="20"  id ="cheh" >  </ td >
</ tr >
< tr >
    < td  height ="20" > 价格： </ td >
    < td  height ="20"  id ="price" >  </ td >
</ tr >
</ table > 
</ body > 

 

将上述代码保存，名称为autoRefresh.jsp。在该文件中，createXMLHttpRequest()函数用于创建异步调用对象；sendRequest()函数用于发送请求到客户端；processResponse()函数用于处理服务器端的响应，在处理过程中调用DisplayHot()函数设定数据的显示样式。其中，setTimeout(“sendRequest()”,1000)函数的含义为每隔1秒的时间调用sendRequest()函数，该函数在Ajax页面刷新中起了一个主导作用。DisplayHot()函数主要用于从服务器端返回的XML文件进行解析，并获取返回数据，显示在当前页面。

更多信息请访问 java教程网 www.itchm.com