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

wanglihu

浏览: 918178 次
性别:
来自: 黑龙江

最近访客更多访客>>

noriri

leimingchao

liunancun

zzy_001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax技术

JSP Ajax 数据结构 SQL MySQL

   在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>  "+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 >
                          <font color="red" >${loginmessage } </font><form name="logform" action="/login.do" method="post">
                              用户名：<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 >
                                 
</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的数据，当该数据表中新增数据时，首页面将自动将之显示给用户，这样也为用户提供了方便，不用再刷新整个页面！

分享到：

使用JS设置文件上传输入框为只读属性 | jFreeChart连接oracle数据库数据实现顺序图 ...

2008-09-07 15:54
浏览 11892
评论(1)
查看更多

1 楼 NO.one 2009-05-27

刚看到，还没有去试验，在此真诚的说声谢谢
我正弄这块的内容呢

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论