Ajax判断用户名是否可用

Ajax的简介

01展示效果并认识Ajax
方案1：传统方案
提交表单，服务器端处理，错误后跳转到注册页面，同时显示错误信息。返回客户端的是整个注册页面。
缺点：较大的网络流量，用户体验不好
方案2：使用Ajax方案。
用户名的确认和用户书写其他表单项可以同时进行；返回客户端的至少错误信息；
优点：较小的网络流量，用户体验好

理解示意图

实现步骤

给用户名文本框绑定onblur事件
开发服务器端判断用户的是否可用功能
使用Ajax完成功能
创建XMLHttpRequest对象
建立到服务器的连接
设置服务器在完成后要运行的回调函数
发送请求

代码实现

save.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><base href="<%=request.getContextPath()+"/"%>"><title>注册页面</title><script type="text/javascript">var   xhr;function  checkNC() {var nc = document.getElementById("nc").value;if(nc==null||nc==''){document.getElementById("nc_span").innerText="用户名不能为空";}else {//发送ajax请求//[1]创建XMLHttpRequest对象xhr=new XMLHttpRequest();//[2]和服务器建立连接//xhr.open(method,url,acy,username,passward);xhr.open("get","RegisterServlet?nc="+nc,true);//[3]执行回调函数xhr.onreadystatechange=process;//[4]发送请求数据xhr.send(null);}}function  process() {//接受ajax 的响应内容var   text= xhr.responseText;//把响应回的内容放到span中document.getElementById("nc_span").innerText=text;}</script>
</head>
<body><h3>用户注册</h3>
<form><p>昵称:<input type="text" name="nc" id="nc" onblur="checkNC()"/><span id="nc_span"></span></p><p>真是姓名:<input type="text" name="uname"/></p><p>密码:<input type="text" name="pwd"/></p><p>描述:<input type="text" name="desc"/></p><p><input type="submit" value="注册"/></p></form>
</body>
</html>

RegisterServlet.java

@WebServlet("/RegisterServlet")
public class RegisterServlet  extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType("text/html;charset=utf-8");//[1]接受页面的数据String nc = req.getParameter("nc");System.out.println("昵称:"+nc);//[2]数据的处理-->返回结果boolean   flag=false;if("sxt".equals(nc)){flag=true;}//[3]根据返回结果做出响应PrintWriter out = resp.getWriter();if(flag){//证明用户名在数据库存在-->用户不可使用out.print("用户名占用");}else{//证明用户名子啊数据库不存在-->用户名可用out.print("用户名可用");}}
}

ajax内容总结

A、如何创建XHR对象

 if(window.ActiveXObject){//IExhr = new ActiveXObject("Microsoft.XMLHTTP");}else {//其他浏览器xhr=new XMLHttpRequest();}

B、和服务器建立连接

  GET：xhr.open("get","SaveServlet?uname="+val,true);xhr.send(null);POST：xhr.open("post","SaveServlet",true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")xhr.send("uname="+val)

C、后台如何接受数据

 String uname = req.getParameter("uname");

D、后台如何给前台做出响应

 out.print("用户名占用");

E、前台如何接受响应的数据？

    var  text= xhr.responseText;

F、

 xhr.readyState  0  1 2  3  4xhr.status  200   404   500 ..局部刷新   异步提交

Ajax判断用户名是否可用相关推荐

html怎么校验用户名重复,layui的表单验证支持ajax判断用户名是否重复的实例
如下所示: 在一个表单中,在提交前我们想判断该用户名是否存在,在layui中不支持.onblur()失去焦点事件,用按钮来手动触发,表单又不太美观,可以使用form表单的verify来进行验证. ht ...
原生的ajax判断用户名是否占用
原生的ajax判断用户名是否占用当我们在注册页面上输入用户名之后,点击下一个地方,去数据库中查询有无该用户名,最后提示信息 jax 异步JavaScript和XML, AJAX 是一 ...
ajax校验用户名可用吗,基于jQuery实现Ajax验证用户名是否可用实例
本文实例为大家分享了jQuery ajax简单案例-验证用户名是否可用的具体代码,供大家参考,具体内容如下 HTML Insert title here //页面加载完成后 $(function() ...
Ajax——判断用户名是否已经注册
1.1.Ajax 1.Ajax:异步的JavaScript and XML 2.目的:用来发送异步请求,然后当服务器给我想要的时候进行回调操作 3.好处:提高用户体验:局部刷新: 1.2.判断用户名是 ...
ajax判断邮箱是否重复,帝国cms插件ajax判断用户名和邮箱是否存在
在注册页面没修改的话就是e/template/member/register.php中添加js代码 //by winston ajax会员邮箱判断 var xmlHttp; function chkU ...
ajax判断用户名是否已经存在
在客户后台管理系统中,涉及到"客户名"或者"用户名"重复的问题,这个问题可以通过"ajax"来解决以下:ajax.js文件 // Java ...
jquery ajax mysql登录_ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库...
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在如果使用ajax一定是要有1个处理页面的,处理页面只是操作数据库并且返回 ...
ajax向服务端发送请求验证用户名是否可用小示例
使用ajax向服务器发送请求 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...