迷失的风
就这样活着
随笔 - 1, 文章 - 1, 评论 - 1, 引用 - 0
数据加载中……
Ajax做的小例子
学习Ajax好多天了,终于做出一个小例子。
环境
eclipse3.2
tomcat6.0
jdk1.5
下面简单介绍下关于Ajax的主要实现部分
index.jsp
<%
@ page contentType
=
"
text/html; charset=gb2312
"
language
=
"
java
"
import
=
"
java.sql.*
"
errorPage
=
""
%>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
title
>
用户注册
</
title
>
<
style
type
="text/css"
>
<!--
.STYLE1
{
}
{
font-family
:
"新宋体"
;
font-size
:
18px
;
font-weight
:
bold
;
}
-->
</
style
>
<
script
src
="prototype.js"
type
="text/javascript"
></
script
>
<
script
src
="validation_cn.js"
type
="text/javascript"
></
script
>
<
link
rel
="stylesheet"
type
="text/css"
href
="style_min.css"
/>
<
script
language
="JavaScript"
type
="text/javascript"
>
var
request
=
false
;
try
{
request
=
new
XMLHttpRequest();
}
catch
(microsoftIE)
{
try
{
request
=
new
ActiveXObject(
"
Msxml2.XMLHTTP
"
);
}
catch
(microsoftOldIE)
{
try
{
request
=
new
ActiveXObject(
"
Microsoft.XMLHTTP
"
);
}
catch
(failed)
{
request
=
false
;
}
}
}
if
(
!
request)
{
alert(
"
初始化XMLHttpRequest对象失败
"
);
}
function
sendUsername()
{
var
username
=
document.getElementById(
"
username
"
).value;
if
(username
!=
null
&&
username
!=
""
)
{
var
url
=
"
/MeetingAction.do?mode=isexist&username=
"
+
escape(username);
request.open(
"
get
"
,url,
true
);
request.onreadystatechange
=
updatepage;
request.send(
null
);
}
}
function
updatepage()
{
if
(request.readyState
==
4
)
{
if
(request.status
==
200
)
{
document.getElementById(
"
reusername
"
).innerHTML
=
request.responseText;
//
document.getDocumentById("reusername").innerText = request.responseText;
}
else
if
(request.status
==
404
)
{
alert(
"
找不到页面!
"
);
}
else
{
alert(
"
错误代码:
"
+
request.status);
}
}
}
function
clearMessage()
{
document.getElementById(
"
reusername
"
).innerHTML
=
""
;
}
</
script
>
</
head
>
<
body
>
<
form
id
="form1"
name
="form1"
method
="post"
action
="/MeetingAction.do?mode=insertuser"
>
<
div
align
="center"
>
<
p
class
="STYLE1"
>
新用户注册
</
p
>
<
table
width
="339"
height
="197"
border
="1"
bgcolor
="#FFCCFF"
>
<
tr
>
<
td
>
用户名
<
input
type
="text"
name
="username"
onblur
="sendUsername()"
onfocus
="clearMessage()"
/></
td
>
<
td
width
="40%"
id
="reusername"
></
td
>
</
tr
>
<
tr
>
<
td
>
密 码
<
input
type
="password"
class
='required
equals-$otherInputId' name
="password1"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
确 认
<
input
type
="password"
class
='required
equals-$otherInputId' name
="password2"
/>
</
td
>
</
tr
>
<
tr
>
<
td
height
="34"
>
邮 箱
<
input
type
="text"
class
='required
validate-email'
name
="email"
/></
td
>
</
tr
>
<
tr
>
<
td
>
<
div
align
="center"
><
input
type
="submit"
name
="Submit"
value
="提交"
/></
div
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
form
>
</
body
>
</
html
>
在index.jsp中 var url = "/MeetingAction.do?mode=isexist&username="+escape(username);
这个请求URL是查询用户输入的用户名在数据库里面是否存在;
在action里面这样
String username
=
request.getParameter(
"
username
"
);
//
从index.jsp里面得到用户输入的用户名
Boolean exist
=
this
.getIMeetingService().isExist(username);
//
执行SQL语句
request.setAttribute(
"
exist
"
, exist);
SQL语句为select count(*) from userinf where username in(?)
exist.jsp
<%
@ page language
=
"
java
"
pageEncoding
=
"
UTF-8
"
%>
<
link
rel
="stylesheet"
type
="text/css"
href
="style_min.css"
/>
<%
Boolean
exist
=
(
Boolean
)request.getAttribute(
"
exist
"
);
//
System.out.println(
"
username:
"
+
username);
if
(exist){
out.println(
"
<font color='red'>用户名已经注册</font>
"
);
}
else
{
out.println(
"
<font color='green'>用户名可以用</font>
"
);
}
%>
通过action处理后返回到exist.jsp来展现具体内容。
posted on 2008-03-20 09:12
迷失的风
阅读(133)
评论(0)
编辑
收藏
新用户注册
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
博客园
IT新闻
知识库
C++博客
博问
管理
Powered by:
BlogJava
Copyright © 迷失的风
导航
BlogJava
首页
新随笔
联系
聚合
管理
<
2024年11月
>
日
一
二
三
四
五
六
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
常用链接
我的随笔
我的评论
我的参与
最新评论
留言簿
(1)
给我留言
查看公开留言
查看私人留言
随笔档案
2008年6月 (1)
文章档案
2008年3月 (1)
搜索
最新评论
1. re: PostMethod获取post提交的页面代码[未登录]
评论内容较长,点击标题查看
--Chris