当前位置：编程学习 > JAVA >>

ajax+jsp实现 无刷新页面下注册时检测用户名是否已存在

如题：ajax+jsp实现 无刷新页面下注册时检测用户名是否已存在

求大神们赐教啊！最好能有源代码参考，这样学得快、

自己找了一篇源代码，但是运行后完全没反应，没有被调用：

前台显示：index.jsp

var httpRequest;

/**

下面这个函数可以返回一个适合任何浏览器的httpRequest，步子如下：

1.试着创建一个XMLHttpRequest()示例，该示例可适合于除了微软以外的所有浏览器

2.增加错误判断，如果当前浏览器是微软的，那么就创建适用于微软的浏览器

3.但微软的浏览器又有两个版本之分，不过据说微软已经在7.0中增加对XMLHttpRequest()的支持

4.但这样也需要对原来的浏览器支持，否则你写出来的程序那些用老版本浏览器的用户就是看不

到效果的。

*/

function createRequest()

{

try{

request=new XMLHttpRequest();

}catch(trymicrosoft)

{

try{

request=new ActiveXObject("Msxml2.XMLHTTP");

}catch(othermicrosoft)

{

try{

request=new ActiveXObject("Microsoft.XMLHTTP");

}

catch(failed)

{

request=false;

}

}

}

if(!request)

{

alert("err Happend!");

return null;

}

return request;

}

/**

这个函数就是用户的动作所有触发的函数，如下面的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');

否则服务器将会丢弃发送的数据。

*/

function getBackInfo()

{

var username=document.getElementById("username").value;

var url='checkUser.jsp?username='+username;

request.open("GET",url,"true");

//下面相当于是一个隐性的循环，在函数中规定只有都接收完毕数据后才做处理

//onreadystatechange有5个值：

// 0:未初始化

// 1:初始化

// 2:发送数据

// 3:接收数据中

// 4:数据接收完毕

//另外还要注意就是在注册回调函数onreadystatechange时，后面的函数不能够带参数

//如下disResult是一个函数，不能够带参。

reqeust.onreadystatechange=disResult;//隐性的循环

request.send(null);

}

function disResult()

{

/**

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('Something Wrong has Happend!');

}

}

}

这里用于在执行后显示结果的地方

用于验证的JSP页面：checkUser.jsp

HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

checkUser

String username=request.getParameter("username");

DBMS_Conn conn=new DBMS_Conn();

if(conn.checkUser(username))

out.println("用户名已经存在！");

//这个信息就是发送到前台去显示的信息，即服务器返回的信息

else

out.println("可以继续！");

%>

数据库连接JAVA程序：

package project1;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.sql.Statement;

public class DBMS_Conn {

Connection conn;

Statement st;

public DBMS_Conn() {

conn_init();

}

void conn_init() {

setConnection();

setStatement();

}

public void setConnection() {

try {

//Class.forName("org.gjt.mm.mysql.Driver").newInstance();

Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

//db.mdb有一个名为user表，至少有一个名为username的字段

String strurl =

"jdbcdbc:driver={Microsoft Access Driver (*.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 (Exception e) {

e.printStackTrace();

}

}

/**

* 设置Statement

*/

public void setStatement() {

try {

st = conn.createStatement(

ResultSet.TYPE_SCROLL_INSENSITIVE, ResultSet.CONCUR_READ_ONLY);

} catch (SQLException e) {

e.printStackTrace();

}

}

/**

* 根据用户名确定用户是否存在

*/

public boolean checkUser(String username) {

String sql="select * from user where username='"+username+"'";

ResultSet rs;

try {

rs = st.executeQuery(sql);

if(rs.next())

{

conn.close();

return true;

}

} catch (SQLException e) {

e.printStackTrace();

}

try {

conn.close();

} catch (SQLException e) {

e.printStackTrace();

}

return false;

}

}

jsp ajax

--------------------编程问答--------------------

var eok=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;

}

}

}

});

});

});

function f1(){

return eok;

}

jsp：

邮箱

大概就是这样

--------------------编程问答--------------------

页面的问题自己慢慢调试吧，找起来比较麻烦

--------------------编程问答--------------------

AJAX

补充：Java , Web 开发