ajax使用

页面自动查询
网上找的代码,修改了一下,代码不好:但是基本体现了ajax的原理,有时间再修正一下,整理

ajax关键是回调函数的写法,服务端要返回数据,以往服务端是返回一个页面

index.jsp
<%@ page contentType="text/html;charset=UTF-8" 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(){
//alert(xmlHttp.readyState);
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=10><table width=100% height=5% cellpadding=1 cellspacing=1 border=1><tr><td>  "+name+"</td><td width=20% nowrap align=right>11</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.ο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>
<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 >
<form name="loginform" 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("oracle.jdbc.driver.OracleDriver");
//建立连接
conn = DriverManager.getConnection(
"jdbc:oracle:thin:@1.1.1.1:1521:sid", "user", "pass");
//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();
}
%>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值