今天復習了一下 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"); }); });
就這樣啦，大家自己練習練習就好咯！
每天都要為自己加油，打氣，每天進步一點點，時間長了你就會進步一大截。共勉