当前位置：编程学习 > JAVA >>
ajax+jsp实现 无刷新页面下注册时检测用户名是否已存在
如题：ajax+jsp实现无刷新页面下注册时检测用户名是否已存在
求大神们赐教啊！最好能有源代码参考，这样学得快、
自己找了一篇源代码，但是运行后完全没反应，没有被调用：
前台显示：index.jsp
varhttpRequest;
/**
下面这个函数可以返回一个适合任何浏览器的httpRequest，步子如下：
1.试着创建一个XMLHttpRequest()示例，该示例可适合于除了微软以外的所有浏览器
2.增加错误判断，如果当前浏览器是微软的，那么就创建适用于微软的浏览器
3.但微软的浏览器又有两个版本之分，不过据说微软已经在7.0中增加对XMLHttpRequest()的支持
4.但这样也需要对原来的浏览器支持，否则你写出来的程序那些用老版本浏览器的用户就是看不
到效果的。
*/
functioncreateRequest()
{
try{
request=newXMLHttpRequest();
}catch(trymicrosoft)
{
try{
request=newActiveXObject("Msxml2.XMLHTTP");
}catch(othermicrosoft)
{
try{
request=newActiveXObject("Microsoft.XMLHTTP");
}
catch(failed)
{
request=false;
}
}
}
if(!request)
{
alert("errHappend!");
returnnull;
}
returnrequest;
}
/**
这个函数就是用户的动作所有触发的函数，如下面的onblur()时，就会调用该函数
经过的步骤如下：
1.从HTML页面得到你需要的数据，可以采有document.getElementById("")方法。
2.建立需要的URL，该URL就和在FORM里面的method为get时并采用submit提交在地址栏
里面到的一样
3.打开与服务器的连接，这里面有三个必要的参数，虽然文档规定只有两个，但是我个
人觉得最好用三个，
第一个可以是GET,POST或者是POST，但常用的就是前面的两个，并且最好都用大写，因
为有些浏览器如FireFox可能会报错，
第二个就是打报的URL，这肯定你是必须的。
第三个就是下面的看到的true，这里可以是false。true表示同步处理，你提交后可以做
其它的事情，这就是AJAX里面的A，即asynchronous;如是false，那就得等到服务器的返
回才能够做其它的事情。
4.等到服务器完成，并且确定返回执行了正确执行的提示，我们就可以做下面我们想做的
事情。这些后面的事情就必须通过Javascript去完成了，因为XMLHttpRequest的唯一用途
就是发送请求及接收服务器的响应结果。
5.上面都完成了后，就可以采用send()方法向服务器发送你需要发送的信息了，它的参数
可以是任何类型，发送的数据格式必须为这样的格式：
name=value&anothername=othervalue&so=on，如果你想传送数据，你必须更改MIME类型：
httpRequest.setRequestHeader('Content-type','application/x-www-form-urnlencoded');
否则服务器将会丢弃发送的数据。
*/
functiongetBackInfo()
{
varusername=document.getElementById("username").value;
varurl='checkUser.jsp?username='+username;
request.open("GET",url,"true");
//下面相当于是一个隐性的循环，在函数中规定只有都接收完毕数据后才做处理
//onreadystatechange有5个值：
//0:未初始化
//1:初始化
//2:发送数据
//3:接收数据中
//4:数据接收完毕
//另外还要注意就是在注册回调函数onreadystatechange时，后面的函数不能够带参数
//如下disResult是一个函数，不能够带参。
reqeust.onreadystatechange=disResult;//隐性的循环
request.send(null);
}
functiondisResult()
{
/**
1.一定要确定readystate==4的完成状态才做下面的事，否则会在建立连接即readystate==1的
时候就开始，然后会在readystate==2，readystate==3，readystate==4的时候都会执行，不信
你可以alert("")一个提示信息试试。
2.服务器通知完成了，并且还要保证是正确完成的，得到的是我们需要的结果才能够继续，这里
常用响应码有：
200:成功执行
401:未授权
403:禁止
404:没有找到文件
*/
if(request.readystate==4)
{
if(request.status==200)
{
//一切都OK了，那就该用Javascript去执行你想要的动作了。
document.getElementById("disCheckResult").value=request.responseText;
alert('done');
}
else
{
alert('SomethingWronghasHappend!');
}
}
}
用于验证的JSP页面：checkUser.jsp
HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"
"/TR/html4/loose.dtd">
checkUser
Stringusername=request.getParameter("username");
DBMS_Connconn=newDBMS_Conn();
if(conn.checkUser(username))
out.println("用户名已经存在！");
//这个信息就是发送到前台去显示的信息，即服务器返回的信息
else
out.println("可以继续！");
%>
数据库连接JAVA程序：
packageproject1;
importjava.sql.Connection;
importjava.sql.DriverManager;
importjava.sql.ResultSet;
importjava.sql.SQLException;
importjava.sql.Statement;
publicclassDBMS_Conn{
Connectionconn;
Statementst;
publicDBMS_Conn(){
conn_init();
}
voidconn_init(){
setConnection();
setStatement();
}
publicvoidsetConnection(){
try{
//Class.forName("org.gjt.mm.mysql.Driver").newInstance();
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
//db.mdb有一个名为user表，至少有一个名为username的字段
Stringstrurl=
"jdbcdbc:driver={MicrosoftAccessDriver(*.mdb)};DBQ=E:\\db.mdb";
//conn=DriverManager.getConnection("jdbc:mysql://localhost/palfinger?
//user=root&password=admin&useUnicode=true&characterEncoding=8859_1");
conn=DriverManager.getConnection(strurl);
}catch(Exceptione){
e.printStackTrace();
}
}
/**
*设置Statement
*/
publicvoidsetStatement(){
try{
st=conn.createStatement(
ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
}catch(SQLExceptione){
e.printStackTrace();
}
}
/**
*根据用户名确定用户是否存在
*/
publicbooleancheckUser(Stringusername){
Stringsql="select*fromuserwhereusername='"+username+"'";
ResultSetrs;
try{
rs=st.executeQuery(sql);
if(rs.next())
{
conn.close();
returntrue;
}
}catch(SQLExceptione){
e.printStackTrace();
}
try{
conn.close();
}catch(SQLExceptione){
e.printStackTrace();
}
returnfalse;
}
}
jspajax
--------------------编程问答--------------------
vareok=false;
$(function(){
$('#email').focusout(function(){
$.ajax({
url:'${ctx}/user.do?method=check',
type:'post',
data:{'email':$('#email').val()},
success:function(data,statusText){
if(data=='fail')
$('#emailInfo').html('邮箱被占用');
else{
if($('#email').val()=="")
$('#emailInfo').html('邮箱不能为空');
else{
$('#emailInfo').html('可用');
eok=true;
}
}
}
});
});
});
functionf1(){
returneok;
}
jsp：
大概就是这样
--------------------编程问答--------------------
页面的问题自己慢慢调试吧，找起来比较麻烦
--------------------编程问答--------------------
AJAX
补充：Java , Web 开发
