`
wanglihu
  • 浏览: 909556 次
  • 性别: Icon_minigender_1
  • 来自: 黑龙江
社区版块
存档分类

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

JSPAjax数据结构SQLMySQL
阅读更多
   在web网站开发中，网页自动刷新的需求及功能已经屡见不鲜了，传统的用整体页面的刷新效果的实现对于网络速度受限的情况下显得就好些得不偿失了！
    这里将介绍一种使用Ajax技术实现网页的局部刷新的功能，只更新局部数据，而非页面全部，详细的源代码请如下所示吧:
其中，本人使用mysql数据库，news表的表结构为：
size=large]描述          名称       是否为空     是否主键
新闻编号      newsId    Not Null     P
新闻内容      newsName  Not Null    
备注          BZ        Null  [size]    
首先：新建index.jsp如下：
<%@ page contentType="text/html; charset=gbk" language="java" %>
<html>
<HEAD><TITLE>用户登录页面</TITLE>
<script type="text/javascript">
var xmlHttp;
var id;
function trim(str)     
{     
    var t = str.replace(/(^\s*)|(\s*$)/g, "");  // 用正则表达式将前后空格       
    return t.replace(/(^　*)|(　*$)/g, "");        // 用空字符串替代。     
}
function createXMLHttpRequest(){
   if(window.ActiveXObject){
     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XMLHttpRequest){
      xmlHttp=new XMLHttpRequest();
   }
}
function validate(){
   createXMLHttpRequest();
   var url="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(){
   var xmlDoc=xmlHttp.responseXML;
   var yan=xmlDoc.getElementsByTagName("content");
   var ta="";
      for(var i=0;i<yan.length;i++){
      var y=yan[i];
      var name=y.childNodes[0].firstChild.data;
          ta+="<tr><td WIDTH=100% height=20><table width=100% height=100% cellpadding=0 cellspacing=0 border=0><tr><td>&nbsp;&nbsp;"+name+"</td><td width=20% nowrap align=right></td></tr></table></td></tr>";
}
   document.getElementById("res").innerHTML=ta;
}



function startmarquee(lh,speed,delay) {
validate();
  var p=false;
  var t;
  var o=document.getElementById("res");
  o.innerHTML+=o.innerHTML;
  o.style.marginTop=0;
  o.onmouseover=function(){p=true;}
  o.onmouseout=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>
<BODY onLoad="startmarquee(90-18,40,0)">
<table height=44 cellSpacing=0 cellPadding=0 width=870 align=center bgColor=#ffffff border=0>
    <tr>
      <td vAlign=center align=middle>
        <table height=33 cellSpacing=1 cellPadding=0 width=860 align=center border=0>
          <tr>
            <td vAlign=center >
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <font color="red" >${loginmessage } </font><form name="logform" action="/login.do" method="post">
                   &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;用户名：<Input style="FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #cc6600; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #f9f9f9" tabIndex=1 size=13 name="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>
<div id="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 by newsId desc");
  StringBuffer content=new StringBuffer("");
  response.setContentType("text/xml");
  response.setHeader("Cache-Control","no-cache");
  content.append("<?xml version=\"1.0\"   encoding=\"UTF-8\" ?>");
  content.append("<contents>");
    while(rs.next()){
    String newsName=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的数据，当该数据表中新增数据时，首页面将自动将之显示给用户，这样也为用户提供了方便，不用再刷新整个页面！
分享到：
| jFreeChart连接oracle数据库数据实现顺序图 ...
评论
1 楼 NO.one 2009-05-27  
刚看到，还没有去试验，在此真诚的说声  谢谢
我正弄这块的内容呢
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JAVA上百实例源码以及开源项目

    　用JAVA开发的一个小型的目录监视系统，系统会每5秒自动扫描一次需要监视的目录，可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...

    java源码包---java 源码 大量 实例

    　用JAVA开发的一个小型的目录监视系统，系统会每5秒自动扫描一次需要监视的目录，可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...

    JAVA上百实例源码以及开源项目源代码

    　用JAVA开发的一个小型的目录监视系统，系统会每5秒自动扫描一次需要监视的目录，可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历,...

    java源码包2

    　用JAVA开发的一个小型的目录监视系统，系统会每5秒自动扫描一次需要监视的目录，可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历...

    java源码包3

    　用JAVA开发的一个小型的目录监视系统，系统会每5秒自动扫描一次需要监视的目录，可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历...

    java源码包4

    　用JAVA开发的一个小型的目录监视系统，系统会每5秒自动扫描一次需要监视的目录，可以用来监视目录中文件大小及文件增减数目的变化。 Java日期选择控件完整源代码 14个目标文件 内容索引:JAVA源码,系统相关,日历...

    成百上千个Java 源码DEMO 4(1-4是独立压缩包)

    数字证书：从文件中读取数字证书，生成文件输入流,输入文件为c:/mycert.cer，获取一个处理X.509证书的证书工厂…… Java+ajax写的登录实例 1个目标文件 内容索引:Java源码,初学实例,ajax,登录 一个Java+ajax写的...

    成百上千个Java 源码DEMO 3(1-4是独立压缩包)

    数字证书：从文件中读取数字证书，生成文件输入流,输入文件为c:/mycert.cer，获取一个处理X.509证书的证书工厂…… Java+ajax写的登录实例 1个目标文件 内容索引:Java源码,初学实例,ajax,登录 一个Java+ajax写的...

    Spring in Action(第2版)中文版

    16.5spring中带有dwr的支持ajax的应用程序 16.5.1直接web远程控制 16.5.2访问spring管理的beandwr 16.6小结 附录a装配spring a.1下载spring a.1.1研究spring发布 a.1.2构建自己的类路径 a.2把spring添加为一...

    Spring in Action(第二版 中文高清版).part2

    16.5 Spring中带有DWR的支持Ajax的应用程序 16.5.1 直接Web远程控制 16.5.2 访问Spring管理的Bean DWR 16.6 小结 附录A 装配Spring A.1 下载Spring A.1.1 研究Spring发布 A.1.2 构建自己的类路径 A.2 把...

    Spring in Action(第二版 中文高清版).part1

    16.5 Spring中带有DWR的支持Ajax的应用程序 16.5.1 直接Web远程控制 16.5.2 访问Spring管理的Bean DWR 16.6 小结 附录A 装配Spring A.1 下载Spring A.1.1 研究Spring发布 A.1.2 构建自己的类路径 A.2 把...

Magicbox
Global site tag (gtag.js) - Google Analytics