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

最新推荐文章于 2023-12-01 14:15:17 发布

Anyan711

最新推荐文章于 2023-12-01 14:15:17 发布

阅读量1.1k

点赞数

文章标签：数据库 Ajax JSP SQL

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

size=large]

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

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