Ajax技术

来源：互联网发布：蕙兰瑜伽知乎编辑：程序博客网时间：2024/06/03 19:37

///////////////////////////////////////////////////////////////////////////////////////////////

<%@ page language="java" import="java.util.*" pageEncoding="GB18030" %>
<%
String[] userList={"明日科技","mr","mrsoft","wgh"};//创建一个一维数组
String user=new String(request.getParameter("user").getBytes("ISO-8859-1"),"GB18030");//获取用户名
Arrays.sort(userList);//对数组排序
int result=Arrays.binarySearch(userList,user);//搜索数组
if(result>-1){
out.println("很抱歉，该用户名已经被注册！");//输出检测结果
}else{
out.println("恭喜您，该用户名没有被注册！");//输出检测结果
}
%>

<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>检测用户名是否唯一</title>
<script language="javascript">
function createRequest(url) {
http_request = false;
if (window.XMLHttpRequest) { // 非IE浏览器
http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象
} else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
} catch (e) {}
}
}
if (!http_request) {
alert("不能创建XMLHttpRequest对象实例！");
return false;
}
http_request.onreadystatechange = getResult; //调用返回结果处理函数
http_request.open('GET', url, true); //创建与服务器的连接
http_request.send(null); //向服务器发送请求
}
function getResult() {
if (http_request.readyState == 4) { // 判断请求状态
if (http_request.status == 200) { // 请求成功，开始处理返回结果
document.getElementById("toolTip").innerHTML=http_request.responseText;//设置提示内容
document.getElementById("toolTip").style.display="block";//显示提示框
} else { // 请求页面有错误
alert("您所请求的页面有错误！");
}
}
}
function checkUser(userName){
if(userName.value==""){
alert("请输入用户名！");userName.focus();return;
}else{
createRequest('checkUser.jsp?user='+userName.value);
}
}

</script>
<style type="text/css">

</style>
</head>
<body style="margin: 0px;">
<form method="post" action="" name="form1">

<table width="509" height="352" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg.gif">
<tr>
<td height="54"> </td>
</tr>
<tr>
<td height="253" valign="top">
<div style="position:absolute;">

<table width="100%" height="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="18%" height="54" align="right" style="color:#8e6723 "><b>用户名：</b></td>
<td width="49%"><input name="username" type="text" id="username" size="32"></td>
<td width="33%"><img src="images/checkBt.jpg" width="104" height="23" style="cursor:hand;" onClick="checkUser(form1.username);"></td>
</tr>
<tr>
<td height="51" align="right" style="color:#8e6723 "><b>密码：</b></td>
<td><input name="pwd1" type="password" id="pwd1" size="35"></td>
<td rowspan="2">  <div id="toolTip"></div></td>
</tr>
<tr>
<td height="56" align="right" style="color:#8e6723 "><b>确认密码：</b></td>
<td><input name="pwd2" type="password" id="pwd2" size="35"></td>
</tr>
<tr>
<td height="55" align="right" style="color:#8e6723 "><b>E-mail：</b></td>
<td colspan="2"><input name="email" type="text" id="email" size="45"></td>
</tr>
<tr>
<td> </td>
<td colspan="2"><input type="image" name="imageField" src="images/registerBt.jpg"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>

</form>

</body>
</html>

///////////////////////////////////////////////////////////////////////////////////////////////

<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="java.sql.*" %>
<jsp:useBean id="conn" class="com.wgh.core.ConnDB" scope="page"></jsp:useBean>
<ul>
<%
ResultSet rs=conn.executeQuery("SELECT title FROM tb_bbsInfo ORDER BY id DESC");//获取公告信息
if(rs.next()){
do{
out.print("<li>"+rs.getString(1)+"</li>");
}while(rs.next());
}else{
out.print("<li>暂无公告信息！</li>");
}
%>

</ul>

///////////////////////////////////////////////////////////////////////////////////////////////

<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
/******************错误处理的方法*******************************/
function onerror(){
alert("您的操作有误！");
}
/******************实例化Ajax对象的方法*******************************/
function getInfo(){
var loader=new net.AjaxRequest("getInfo.jsp?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
/************************回调函数**************************************/
function deal_getInfo(){
document.getElementById("showInfo").innerHTML=this.req.responseText;
}
window.onload=function(){
getInfo(); //调用getInfo()方法获取公告信息
window.setInterval("getInfo()", 600000);//每隔10分钟调用一次getInfo()方法
}
</script>

<title>实时显示公告信息</title>
</head>
<body>
<div style="border: 1px solid;height: 50px; width:200px;padding: 5px;">
<marquee direction="up" scrollamount="3">
<div id="showInfo"></div>
</marquee>
</div>
</body>
</html>

///////////////////////////////////////////////////////////////////////////////////////////////

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
<head>
<title>级联下拉列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
//获取省份和直辖市
function getProvince(){
var loader=new net.AjaxRequest("ZoneServlet?action=getProvince&nocache="+new Date().getTime(),deal_getProvince,onerror,"GET");
}
function deal_getProvince(){
provinceArr=this.req.responseText.split(",");//将获取的省份名称字符串分隔为数组

for(i=0;i<provinceArr.length;i++){//通过循环将数组中的省份名称添加到下拉列表中
document.getElementById("province").options[i]=new Option(provinceArr[i],provinceArr[i]);
}
if(provinceArr[0]!=""){
getCity(provinceArr[0]);//获取市县
}
}
window.onload=function(){
getProvince();//获取省份和直辖市
}
/*************************************************************************************************************/
//获取市县
function getCity(selProvince){
var loader=new net.AjaxRequest("ZoneServlet?action=getCity&parProvince="+selProvince+"&nocache="+new Date().getTime(),deal_getCity,onerror,"GET");
}
function deal_getCity(){
cityArr=this.req.responseText.split(",");//将获取的市县名称字符串分隔为数组
document.getElementById("city").length=0;//清空下拉列表
for(i=0;i<cityArr.length;i++){//通过循环将数组中的市县名称添加到下拉列表中
document.getElementById("city").options[i]=new Option(cityArr[i],cityArr[i]);
}
}
function onerror(){} //错误处理函数
</script>
</head>

<body style="font-size: 9pt;">
请选择：
<select name="province" id="province" onChange="getCity(this.value)">
</select>
-
<select name="city" id="city">
</select>
</body>
</html>

///////////////////////////////////////////////////////////////////////////////////////////////

<%@page contentType="text/html" pageEncoding="GB18030"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>错误提示</title>
</head>
<body>
<h1>${error}</h1>
<input name="btn_return" type="button" value="返回" onClick="history.back(-1);">
</body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
<head>
<title>带进度条的文件上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link href="CSS/style.css" rel="stylesheet">
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
//此处需要加&nocache="+new Date().getTime()，否则将出现进度不更新的情况
function getProgress(){
var loader=new net.AjaxRequest("showProgress.jsp?nocache="+new Date().getTime(),deal_p,onerror,"GET");
}
function onerror(){
alert("上传文件出错！");
}
function deal_p(){
var h=this.req.responseText;
h=h.replace(/\s/g,""); //去除字符串中的Unicode空白符
document.getElementById("progressPercent").style.display="";//显示百分比
progressPercent.innerHTML=h+"%";//显示完成的百分比
document.getElementById("progressBar").style.display="block";//显示进度条
document.getElementById("imgProgress").width=h*(255/100);//显示完成的进度
}
function deal(form){
form.submit();//提交表单
timer=window.setInterval("getProgress()",500);//每隔500毫秒获取一次上传进度
}
</script>
</head>
<body>
<form name="form1" enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">
<table width="500" height="289" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg.jpg">
<tr>
<td width="61" rowspan="2"> </td>
<td width="439" align="center">
<table width="80%" height="190" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"> </td>
</tr>
<tr>
<td height="34" style="color:#FFFFFF">请选择上传的文件：</td>
</tr>
<tr>
<td height="42"><input name="file" type="file" size="42"></td>
</tr>
<tr>
<td height="50" style="color:#FFFFFF"> 注：文件大小请控制在50M以内。</td>
</tr>
<tr>
<td height="29" align="center" style="color:#FFFFFF"><div id="progressBar" class="prog_border" align="left"><img src="images/progressBar.jpg" width="0" height="13" id="imgProgress"></div>
<span id="progressPercent" style="width:40px;display:none">0%</span></td>
</tr>
<tr>
<td height="29" align="center"><img src="images/shangchuan.gif" width="61" height="23" onClick="deal(form1)">
<img src="images/chongzhi.gif" width="61" height="23" onClick="form1.reset();"> 
</td></tr>
</table> </td>
</tr>

</table>
</form>
</body>
</html>

<%@page contentType="text/html" pageEncoding="GB18030"%>
${progressBar}

<%@page contentType="text/html" pageEncoding="GB18030"%>
<html>
<head>
<title>文件上传</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<link href="Css/style.css" rel="stylesheet">
</head>
<body>
<script language="javascript">
alert("文件上传成功！");
window.location.href="index.jsp";
</script>
</body>
</html>

///////////////////////////////////////////////////////////////////////////////////////////////

<%@ page contentType="text/html; charset=GBK" language="java" import="java.text.*" errorPage="" %>
<%
String datestyle="yyyy-MM-dd HH:mm:ss";
SimpleDateFormat format=new SimpleDateFormat(datestyle);
java.util.Date nowtime=new java.util.Date();
String strnowtime=format.format(nowtime);
out.println(strnowtime);
%>

<%@ page contentType="text/html; charset=GBK" language="java" errorPage="" %>
<html>
<head>
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
function getSysTime(){
var loader=new net.AjaxRequest("deal.jsp?nocache="+new Date().getTime(),deal,onerror,"GET");

}
function deal(){
document.getElementById("clock").innerHTML="现在是："+this.req.responseText;
}
function onerror(){
alert("出错了");
}
timer = window.setInterval("getSysTime();",1000);
</script>
</head>

<body onLoad="getSysTime()" style="margin:0px">
<table width="901" height="128" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bg.jpg">
<tr>
<td height="96"> </td>
</tr>
<tr>
<td style="padding-left:20pt;;font-size:9pt;"><div id="clock">系统时间</div></td>
</tr>
</table>

</body>
</html>

///////////////////////////////////////////////////////////////////////////////////////////////

<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="java.sql.*" %>
<jsp:useBean id="conn" class="com.wgh.core.ConnDB" scope="page"></jsp:useBean>
<ul>
<%
ResultSet rs=conn.executeQuery("SELECT content,title FROM tb_news ORDER BY addTime DESC");//获取新闻信息
if(rs.next()){
do{
out.print("<li title='"+rs.getString(1)+"'>"+rs.getString(2)+"</li>");
}while(rs.next());
}else{
out.print("<li>暂无公告信息！</li>");
}
%>

</ul>

<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
/******************错误处理的方法*******************************/
function onerror(){
alert("您的操作有误！");
}
/******************实例化Ajax对象的方法*******************************/
function getNews(){
var loader=new net.AjaxRequest("getNews.jsp?nocache="+new Date().getTime(),deal_getNews,onerror,"GET");
}
/************************回调函数**************************************/
function deal_getNews(){
document.getElementById("showNews").innerHTML=this.req.responseText;
}
window.onload=function(){
getNews(); //调用getNews()方法获取公告信息
window.setInterval("getNews()", 600000);//每隔10分钟调用一次getNews()方法
}
</script>

<title>实时显示新闻信息</title>
</head>
<body style="font-size:9pt;">
<div id="showNews"></div>
</body>
</html>

///////////////////////////////////////////////////////////////////////////////////////////////

<%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" %>
<jsp:useBean id="conn" scope="page" class="com.wgh.core.ConnDB"/>
<%
String id=request.getParameter("id");
String sql="select introduce from tb_book where id="+id;
ResultSet rs=conn.executeQuery(sql);
if(rs.next()){
out.print(rs.getString(1));
}
%>

///////////////////////////////////////////////////////////////////////////////////////////////

<%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" %>
<jsp:useBean id="conn" scope="page" class="com.wgh.core.ConnDB"/>
<%
ResultSet rs=conn.executeQuery("select ID,bookName,author,picture from tb_book order by bookName");
int new_ID=0;
String new_bookname="";
String new_author="";
String new_picture="";
%>
<html>
<head>
<title>创建工具提示</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
td,body{
font-size:12px;
}
a:hover {
font-size: 9pt;color: #FF6600;
}
a {
font-size: 9pt;text-decoration: none; color: #FF0000;
noline:expression(this.onfocus=this.blur);
}
</style>
<script language="javascript" src="JS/AjaxRequest.js"></script>
<script language="javascript">
var offsetE; //定义一个全局变量，用于保存偏移量的对象
function getData(element,id){
offsetE=element;//将当前的偏移量对象保存到全局变量中
var loader=new net.AjaxRequest("getTip.jsp?id="+id+"&nocache="+new Date().getTime(),deal,onerror,"GET");

}
function deal(){
document.getElementById("toolTip").style.left=(offsetE.offsetLeft+150)+"px";//设置工具提示的左边距
document.getElementById("toolTip").style.top=offsetE.offsetTop+"px";//设置工具提示的上边距
document.getElementById("bookIntroduce").innerHTML=this.req.responseText;//显示工具提示
document.getElementById("toolTip").style.display="block";//显示工具提示
}
function clearTip(){
document.getElementById("toolTip").style.display="none";//隐藏工具提示
}
function onerror(){
alert("出错了");
}
</script>
</head>
<body>
<table width="346" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="571" valign="top" bgcolor="#FFFFFF"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="94" valign="top">
<div style="position:absolute">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="CFCFCF">
<%int s=0;
while (rs.next()){
new_ID=rs.getInt(1);
new_bookname=rs.getString(2);
new_author=rs.getString(3);
new_picture=rs.getString(4);
if(s%2==0){
%>
<tr>
<td align="center" onMouseOver="getData(this,<%=new_ID%>)" onMouseOut="clearTip()"><table width="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="95" align="center"><img src="images/book/<%=new_picture%>" width="143" height="200" border="1"></td>
</tr>
<tr>
<td height="22" align="center"><a href="#"> <%=new_bookname%></a></td>
</tr>
<tr>
<td height="20" align="center">作者：<%=new_author%></td>
</tr>
</table></td>
<%}else{%>
<td align="center" onMouseOver="getData(this,<%=new_ID%>)" onMouseOut="clearTip()"><table width="0" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="95" align="center"><img src="images/book/<%=new_picture%>" width="143" height="200" border="1"></td>
</tr>
<tr>
<td height="22" align="center"><a href="#"> <%=new_bookname%></a></td>
</tr>
<tr>
<td height="20" align="center">作者：<%=new_author%></td>
</tr>
</table></td>
</tr>
<%}
s++;
}%>
</table>
<div id="toolTip" style=" background-image:url(images/tip.gif); width:206px; height:200px; display:none; position:absolute; z-index:100;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" height="28"> </td>
<td width="71%" valign="middle"> </td>
<td width="9%" valign="middle"> </td>
</tr>
<tr>
<td> </td>
<td valign="top" id="bookIntroduce">介绍</td>
<td valign="top"> </td>
</tr>
</table>
</div>
</div> </td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>
<%conn.close();%>

///////////////////////////////////////////////////////////////////////////////////////////////

0 0