简单使用Ajax实现异步查询用户名是否被占用

来源：互联网发布：js复选框取消选中事件编辑：程序博客网时间：2024/04/30 10:02

Hello!大家好，我是Eugene_Y。今天学了一招，是使用Ajax实现异步查询用户名是否被占用。

我是菜鸟，所以会以一个菜鸟的角度去阐述，希望各位小伙伴们看到了能有收获！

要做这个需要用到Servlet(或jsp)、数据库、JDBC、和简单的JavaScript&Html知识

1.Ajax是什么？： AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下

2.能做什么？：因为1的关系，这意味着我们可以在不刷新页面的情况下，“私下”去访问其他页面，

去连接数据库进行增删改查等等操作，而且这是异步的。

我们在注册用户的时候，填用户名时，自己喜欢的名称老是被提示“该用户已存在，

请试试别的用户名”？如右图所示------------->>

用户没有刷新页面，但当我们输完邮件地址后，网页是如何知道该邮箱地址已经有人用了呢？这是怎么做到的呢？

这就是使用Ajax技术做的。当我们输入邮件地址后，利用Ajax就可以去访问Servlet，去数据库中查询该邮件地址是否已被注册，

并返回结果，我们就可以根据结果使用JavaScript来提示用户，该邮件地址是否可用了！而这些操作都是异步的，“私下”的，这样

可以提升用户体验。

3.怎么做？：由于本文只关注Ajax实现，所以数据库JDBC方面小伙伴们自己实现，我们做一个注册页面。

注册页面

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>注册...</title><script type="text/javascript">//-------生成Ajax的XMLHttpRequest对象-------------var xmlhttp;var divUserNameState;var inpUserName;function nameAble() {inpUserName = document.getElementById("usernameId");divUserNameState = document.getElementById("usernameState");xmlhttp = null;if (window.XMLHttpRequest) {// code for all new browsersxmlhttp = new XMLHttpRequest();} else if (window.ActiveXObject) {// code for IE5 and IE6xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
//--------------------------------------------
if (xmlhttp != null) {var url = "Nameable?username=" + inpUserName.value.trim()+ "&time=" + new Date().getTime();//Nameable为验证名字是否可用的Servlet页面地址，后面为参数
xmlhttp.onreadystatechange = state_Change;//当状态改变时触发的函数//状态有0未初始化,1装载中,2装载完成,3正在交互,4收到返回。
xmlhttp.open("GET", url, true);//重要方法，open(提交方式，URL，是否异步默认TRUE)xmlhttp.send(null);//重要方法，用GET时，参数能为NULL
} else {alert("Your browser does not support XMLHTTP.");}}function state_Change() {//状态改变就会触发该函数，状态有0未初始化,1装载中,2装载完成,3正在交互,4收到返回。if (xmlhttp.readyState == 4) {// 4 = "loaded"  Ajax引擎收到返回，状态为4if (xmlhttp.status == 200) {// 200 = OK    网页正常返回200divUserNameState.innerHTML = xmlhttp.responseText;//用户名下的DIV内容设为返回的内容//xmlhttp.responseText返回请求页面的内容
 } else {alert("访问出现错误！");}}}
</script>
</head>
<body style="text-align: center; background-color: #cccccc;">
用户名：<input type="text" name="username" id="usernameId" onblur="nameAble()"><br><div id="usernameState"></div> 
密码：<input type="text" name="password"><br> 
手机：<input type="text" name="phone"><br>  
邮箱：<input type="text" name="email"><br><br>
<input type="button" value="注册"><br>
</body></html>

Nameanle(Servlet)代码如下

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setCharacterEncoding("UTF-8");String name = request.getParameter("username");UserDao dao = new UserImpl();User user = dao.findUserByName(name);
if(user == null)response.getWriter().print("恭喜！用戶名可用。");elseresponse.getWriter().print("抱歉！用戶名已存在，请换另外一个试试。");}

只是验证下功能，所以页面有点丑...哈哈哈，结果如下

0 0

js复选框取消选中事件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子我和吴丹全文定西一中校花吴丹照片网游之洪荒梦吴丹吴为吴竟朱令害了吴今吴今朱令案感觉吴承之有问题吴优吴优写真吴优结婚了吴优和代超吴优男朋友吴优身高吴优双眼皮吴优个人资料吴优什么都没穿图片吴会吴伟吴伟明紫砂壶仿古吴佩吴佩说车吴佳吴俊吴俊签名设计吴健吴健豪演员吴健涓子老公吴健章艳敏吴健结婚照演员吴健为什么不红演员吴健和他妻子章艳敏与吴健结婚了吗吴健老婆和儿女吴光吴公吴兵吴兵第一任妻子吴兵的前妻照片吴冕吴冰余程万太太吴冰照片