- 浏览: 62767 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
页面自动查询
网上找的代码,修改了一下,代码不好:但是基本体现了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.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 >
<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();
}
%>
网上找的代码,修改了一下,代码不好:但是基本体现了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.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 >
<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();
}
%>
发表评论
-
前端开发
2014-08-18 09:42 532对于已有的系统,没有源代码,易用性不好!想获得较好的前端体验 ... -
前端的一些技巧
2014-04-21 11:33 409很久没有写博客了。 主要是针对chrom浏览器的技巧 放一些链 ... -
Redirect与forward
2014-03-18 12:27 300直接上干货Demo: <% String [] test ... -
DOM的使用
2014-03-11 10:43 295DOM把html解析为一颗树结果,闲话少说看文档: DOM关键 ... -
js生成一个没有工具栏状态栏的窗口
2014-03-03 14:07 357<A HREF="#"onClick ... -
json的解析
2013-12-20 16:30 446最近用了一个组件,自动根据格式生成报表。 觉得生成jso ...
相关推荐
使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤
**AjaxRequest(Ajax使用包)** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AjaxRequest是实现Ajax功能的一个工具包,它...
本教程以一个简单的Ajax使用示例为基础,帮助初学者理解并掌握其基本概念和使用方法。 ### 1. Ajax的基本工作原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript向服务器发送HTTP请求,并接收...
在本项目中,“Ajax使用示例”提供了一个完整的Ajax应用实例,帮助开发者更好地理解和运用Ajax。 1. **Ajax的基本原理**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在不刷新整个页面的情况下与服务器进行...
本资料包详细介绍了四种不同版本的Ajax使用方法,以及解决相关问题的经验分享。 1. **jQuery的Ajax使用** jQuery是JavaScript的一个库,它极大地简化了JavaScript的使用,包括Ajax操作。使用`$.ajax()`函数是...
这份"aspnet ajax使用文档(AspNet_AJAX_Documentation)"涵盖了关于如何使用ASP.NET AJAX的核心概念、API以及最佳实践。 首先,ASP.NET AJAX的核心组件包括AJAX Control Toolkit和UpdatePanel。UpdatePanel是ASP.NET...
【北大青鸟Y2Ajax使用工具包】是一个专门为ASP.NET开发者设计的集合,它包含了用于增强Web应用程序交互性和用户体验的Ajax工具。这个压缩包中主要包括了三部分:AjaxControlToolkit、ASPAJAXExtSetup以及CodeSmith ...
《通过DOM和Ajax使用XML_从菜鸟到专家2006》是一本旨在帮助初学者深入理解并掌握XML、DOM以及Ajax技术的书籍。XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用于数据交换、配置文件、文档存储...
### JavaEE5学习笔记12-JSF集成AJAX使用经验总结 #### 1. JSF (JavaServer Faces) 概览 JavaServer Faces (JSF) 是 Java EE 的一个重要组成部分,它提供了一种构建用户界面的组件框架。JSF 允许开发者创建可重用的...
掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输
【ACCP 5.0 Y2Ajax使用工具包】是一个专为北大青鸟ACCP 5.0课程设计的JavaScript库,旨在简化Web应用程序中的异步通信,即Ajax技术的实现。这个工具包是为了帮助学员更好地理解和应用Ajax技术,提高Web开发效率。...
2. **JavaScript**:Ajax使用JavaScript来创建XMLHttpRequest对象,它是与服务器进行通信的关键。 3. **XML与JSON**:虽然名字中有XML,但现代Ajax应用更倾向于使用JSON(JavaScript Object Notation)作为数据交换...
ajax使用小例子 //作者:核武器 2010.01.26 qq:61357455 Email:Behappy1982@163.com 单击按钮的时候,显示按钮上的文字,效果是局部WEB刷新,增加用户体验
文档"ajax_xml运用.doc"可能包含了一个使用Ajax获取并解析XML数据的例子。通常,这个过程包括以下几个步骤: 1. **创建XMLHttpRequest对象**:在JavaScript中,通过`new XMLHttpRequest()`来创建一个实例。 2. **...
这个压缩包"AspNet_AJAX_Documentation(Samples)"很可能是包含了一系列ASP.NET AJAX的使用示例,帮助开发者深入理解和实践这一技术。 在ASP.NET AJAX中,主要涉及以下几个核心概念和技术: 1. **UpdatePanel**:...
客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器...
本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json。分享给大家供大家参考,具体如下: 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...