ajax+jsp提取数据库记录并实现自动刷新页面

在web网站开发中,网页自动刷新的需求及功能已经屡见不鲜了,传统的用整体页面的刷新效果的实现对于网络速度受限的情况下显得就好些得不偿失了! 
   这里将介绍一种使用Ajax技术实现网页的局部刷新的功能,只更新局部数据,而非页面全部,详细的源代码请如下所示吧: 
其中,本人使用mysql数据库,news表的表结构为: 

size=large]

描述         名称      是否为空    是否主键 

新闻编号     newsId    NotNull    
新闻内容     newsName  NotNull     
备注         BZ       Null  
[size]     
首先:新建index.jsp如下: 
<%@ page contentType="text/html; charset=gbk"language="java" %> 
<html> 
<HEAD><TITLE>用户登录页面</TITLE> 
<scripttype="text/javascript"> 
var xmlHttp; 
var id; 
functiontrim(str)      
     
    var t =str.replace(/(^s*)|(s*$)/g, "");  //用正则表达式将前后空格        
    returnt.replace(/(^ *)|( *$)/g,"");       //用空字符串替代。      

function createXMLHttpRequest(){ 
  if(window.ActiveXObject){ 
    xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); 
  
   elseif(window.XMLHttpRequest){ 
     xmlHttp=new XMLHttpRequest(); 
  

function validate(){ 
  createXMLHttpRequest(); 
   varurl="Del1.jsp"; 
  xmlHttp.open("GET",url,true); 
  xmlHttp.onreadystatechange=callback; 
  xmlHttp.send(null); 

function callback(){ 
  if(xmlHttp.readyState==4){ 
  show(); 
      setTimeout("validate()",3600); 
  

function show(){ 
   varxmlDoc=xmlHttp.responseXML; 
   varyan=xmlDoc.getElementsByTagName_r("content"); 
   varta=""; 
     for(vari=0;i<yan.length;i++){ 
     var y=yan[i]; 
     var name=y.childNodes[0].firstChild.data; 
         ta+="<tr><tdWIDTH=100% height=20><tablewidth=100% height=100% cellpadding=0 cellspacing=0border=0><tr><td>&nbsp;&nbsp;"+name+"</td><tdwidth=20% nowrapalign=right></td></tr></table></td></tr>"; 

  document.getElementByIdx("res").innerHTML=ta; 




function startmarquee(lh,speed,delay) { 
validate(); 
  var p=false; 
  var t; 
  varo=document.getElementByIdx("res"); 
 o.innerHTML+=o.innerHTML; 
  o.style.marginTop=0; 
 o.οnmοuseοver=function(){p=true;} 
 o.οnmοuseοut=function(){p=false;} 

  function start(){ 
 t=setInterval(scrolling,speed); 
  if(!p)o.style.marginTop=parseInt(o.style.marginTop)-1+"px"; 
 

  function scrolling(){ 
  if(parseInt(o.style.marginTop)%lh!=0){ 
   o.style.marginTop=parseInt(o.style.marginTop)-1+"px"; 
   if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2)o.style.marginTop=0; 
   }else{ 
   clearInterval(t); 
   setTimeout(start,delay); 
  
 

  setTimeout(start,delay); 

</script> 
</head> 
<BODYonLoad="startmarquee(90-18,40,0)"> 
<table height=44 cellSpacing=0 cellPadding=0width=870 align=center bgColor=#ffffffborder=0> 
   <tr> 
     <td vAlign=centeralign=middle> 
       <table height=33 cellSpacing=1 cellPadding=0width=860 align=centerborder=0> 
         <tr> 
           <td vAlign=center> 
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="red" >${loginmessage }</font><formname="logform" action="/login.do"method="post"> 
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名:<Inputstyle="FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #cc6600;FONT-FAMILY: Verdana; BACKGROUND-COLOR: #f9f9f9" tabIndex=1 size=13name="username"> 
                 密码:<Input style="FONT-WEIGHT: bold; FONT-SIZE: 11px;COLOR: #cc6600; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #f9f9f9"tabIndex=1 type=password size=13 value=""name="password"> 
                  <Input class="button2" type="submit" value=口令登录name=B12 > 
                     <Input class="button2" type="reset" value=重置name=reset2 > 
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 </form> 
           </td> 
         </tr> 
       </table> 
     </td> 
   </tr> 
 </table> 
<divid="res"></div> 
</BODY> 
</html> 
然后,新建Conn.jsp,用于每个页面调用: 
<%@ page contentType="text/html; charset=utf-8"import="java.sql.*, javax.naming.Context,javax.naming.InitialContext" 
errorPage=""%> 
<%!Connection conn = null; 
Statement stmt = null; 
ResultSet rs = null; 

public void jspInit() { 
try { 
//Class.forName("com.mysql.jdbc.Driver"); 
//建立连接 
//conn = DriverManager.getConnection( 
// "jdbc:mysql://localhost:3306/SKY5", "root","123456"); 
Context initCtx = new InitialContext(); 
Context ctx = (Context)initCtx.lookup("java:comp/env"); 
//获取连接池对象 
Object obj = (Object)ctx.lookup("jdbc/javasky"); 
//类型转换 
javax.sql.DataSource ds = (javax.sql.DataSource)obj; 
conn = ds.getConnection(); 
stmt = conn.createStatement(); 
} catch (Exception ex) { 
System.out.println(ex.toString()); 



public void Exec(String sql) { 
jspInit(); 
try { 
stmt.executeUpdate(sql); 
} catch (Exception e) { 
System.out.print(e.toString()); 



public ResultSet getRs(String sql) throws SQLException{ 
jspInit(); 
try { 
rs = stmt.executeQuery(sql); 
return rs; 
} catch (Exception e) { 
System.out.print(e); 
return null; 



public ResultSet executeQuery(String sql) throws Exception{ 
jspInit(); 
try { 
sql = new String(sql.getBytes("GBK"),"ISO8859_1"); 
stmt = conn.createStatement( 
java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE, 
java.sql.ResultSet.CONCUR_READ_ONLY); 
rs = stmt.executeQuery(sql); 
} catch (SQLException ex) { 
System.out.println("sql.executeQuery:" +ex.getMessage()); 

return rs; 


public String getS(String Str) { 
try { 
byte b[] = Str.getBytes("ISO-8859-1"); 
Str = new String(b, "UTF-8"); 
} catch (Exception ee) { 
ee.printStackTrace(); 

return Str; 
}%> 
其次,新建Del1.jsp如下: 
<%@ page contentType="text/html; charset=utf-8"import="java.sql.*,java.util.*" errorPage=""%> 
<%@ include file="Conn.jsp"%> 
<% 
  try{ 
  ResultSet rs=getRs("select * from news order bynewsId desc"); 
  StringBuffer content=newStringBuffer(""); 
 response.setContentType("text/xml"); 
 response.setHeader("Cache-Control","no-cache"); 
  content.append("<?xmlversion="1.0"  encoding="UTF-8" ?>"); 
 content.append("<contents>"); 
   while(rs.next()){ 
    StringnewsName=rs.getString("newsName"); 
    content.append("<content>"); 
    content.append("<name>"+ newsName+"</name>"); 
    content.append("</content>"); 
    
  content.append("</contents>"); 
  out.print(content); 
 
catch(Exception e){ 
     e.printStackTrace(); 
  
%> 
最后在web.xml配置文件中加入如下内容: 
<welcome-file-list> 
   <welcome-file>index.jsp</welcome-file> 
 </welcome-file-list> 
这样就完成了自动刷新页面的功能,当访问index.jsp首页时,将自动显示news表中所有newsName的数据,当该数据表中新增数据时,首页面将自动将之显示给用户,这样也为用户提供了方便,不用再刷新整个页面!
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值