今天复习了一下 Ajax异步验证用户名是否存在,在下面我写三种,一般开发时候都用第三种 jQuery和Ajax结合的形式,下面就介绍三种,具体说明代码里就有啦,废话不多说,直接上代码:
第一种方式:用基础语法js实现 get请求:
1 //封装了获取XMLHttpRequest对象的方法 2 function getXMLHttpRequest() { 3 var xmlhttp; 4 if (window.XMLHttpRequest) {// code for all new browsers 5 xmlhttp = new XMLHttpRequest(); 6 } else if (window.ActiveXObject) {// code for IE5 and IE6 7 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 8 } 9 10 return xmlhttp; 11 12 } 13 14 15 16 <script type="text/javascript" > 17 function ckName(){ 18 //首先获取用户名对象 19 var username = document.getElementById("username"); 20 //获取XMLHttpRequest对象 21 var req = getXMLHttpRequest(); 22 //创建连接 23 // req.open("get","${pageContext.request.contextPath}/servlet/ckUsernameServlet?username="+username.value,true); 24 req.open("get","${pageContext.request.contextPath}/servlet/ckUsernameServlet?username="+username.value,true); 25 //4.发送请求 26 req.send(null); 27 //回调函数 28 req.onreadystatechange = function(){ 29 if(req.readyState==4){ 30 if(req.status==200){ 31 //获取message 32 var messsage = document.getElementById("message"); 33 if(req.responseText=="true"){ 34 message.innerHTML ="用户名已经存在"; 35 }else{ 36 message.innerHTML ="用户名可以使用"; 37 } 38 } 39 40 } 41 } 42 43 } 44 </script> 45 46 <body> 47 用户名: <input type="text" name="username" id="username" onblur="ckName()" /> 48 <font id="message">请输入有效的邮箱地址</font> 49 </body>
Servlet模拟数据库中存在的名字,这里没有连接数据库,就直接模拟了,到实际操作中,直接从数据库中查出名字看是否存在就Ok啦!
package adminServlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class CkUsernameServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); PrintWriter out = response.getWriter(); String username = request.getParameter("username"); System.out.println(username); if("admin".equals(username)){ out.print(true); }else{ out.print(false); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
第二种方式,就改下js代码就好了 post 提交个参数:
function ckName(){ var username = document.getElementById("username"); var req = getXMLHttpRequest(); //创建连接 用post提交方式 req.open("POST","${pageContext.request.contextPath}/servlet/ckUsernameServlet",true); //向请求添加HTTP头,这个必加,是提交到后台的方式 req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //把请求发送到服务器 req.send("username="+username.value); //回调函数 req.onreadystatechange=function(){ if(req.readyState==4 && req.status==200){ var messsage = document.getElementById("message"); if(req.responseText=="true"){ message.innerHTML ="用户名已经存在"; }else{ message.innerHTML ="用户名可以使用"; } } } }
*****第三种方式:最常用的 jQuery 和 Ajax 结合相互使用
$(document).ready(function(){ $("#username").blur(function(){ // alert($(this).val()); $.post("${pageContext.request.contextPath}/servlet/ckUsernameServlet",{username:$(this).val()}, function(data){ if(data=="true"){ //data 就是从servlet返回来的数据 $("#message").html("用户名已存在"); }else{ $("#message").html("用户名可以注册"); } } ,"text"); }); });
就这样啦,大家自己练习练习就好咯!
每天都要为自己加油,打气,每天进步一点点,时间长了你就会进步一大截。共勉