jsp+ajax實現無刷新,鼠標離開文本框即驗證用戶名，操作如下：新建一個輸入頁面，起名為input.jsp, [java] <%@ page contentType="text/html; charset=utf-8"%> <html> <head> <title>jsp+ajax實現無刷新_鼠標離開文本框即驗證用戶名</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> .style1 { color: #FF3333; font-weight: bold; } .style14 { font-size: 13px } .text12black { font-size: 12px; } </style> </head> <body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0" marginheight="0" marginwidth="0"> <table width="748" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="5"></td> </tr> </table> <script language="javascript"> //創建XMLHttpRequest對象 function GetO() { var ajax=false; try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!='undefined') { ajax = new XMLHttpRequest(); } return ajax; } function getMyHTML(serverPage, objID) { var ajax = GetO(); //得到了一個html元素，在下面給這個元素的屬性賦值 var obj = document.all[objID]; //設置請求方法及目標，並且設置為異步提交 ajax.open("post", serverPage, true); ajax.onreadystatechange = function() { if (ajax.readyState == 4 && ajax.status == 200) { //innerHTML是HTML元素的屬性，如果您不理解屬性那就理解為HTML元素的變量 //ajax.responseText是服務器的返回值，把值賦給id=passport1的元素的屬性 //innerHTML這個屬性或說這個變量表示一組開始標記和結束標記之間的內容 obj.innerHTML = ajax.responseText; } } //發送請求 ajax.send(null); } function CheckName() { getMyHTML("check.jsp?groupName="+name_form.group_name.value, "passport1"); } //這個函數的作用是當用戶的焦點從其他地方回到group_name這個輸入框時再給屬性賦回原內容 function sl(tx) { if(tx=='passport1') { document.all[tx].innerHTML = "<div class='reds' align='left'>4-20 個字符 (包括大小寫字母,中文,數字,特殊字符等) 1個漢字等於2個字符，建議使用中文。注冊後不可修改。</div>"; } } </script> <form name="name_form" method=post> <table width="60%" height="80" align="center" border="1" bordercolor="#96D6E8" class="text12black"> <tr> <td width="22%" height="20" align="right"> 用戶名： </td> <td width="61%" align="left"> <INPUT name="group_name" type="text" value="" size=30 maxlength="50" onBlur="javaScript:CheckName();" onFocus="return sl('passport1');" /> <br /> <div id="passport1" style="color: red"></div> </td> <td id="passport2" valign="top"> <div class="explain_blue" align='left'> <span class="gray">4-20 個字符 (包括大小寫字母,中文,數字,特殊字符等) 1個漢字等於2個字符，建議使用中文昵稱。注冊後不可修改。</span> </div> </td> </tr> </table> </form> </body> </html> 在新建一個校驗頁面，起名為check.jsp,代碼如下： [java] <%@ page contentType="text/html; charset=utf-8"%> <% String action = ""; String groupname = ""; //檢查用戶名 //用作數據庫聯接，可以根據你的情況修改，如果為測試可以不用*作記號的語句 try { action = request.getParameter("action"); groupname = request.getParameter("groupName").trim(); if ("".equals(groupname)) { out.println("<div class='reds' align='left'>用戶名不能為空！</div>"); } else if (groupname.length() < 4 || groupname.length() > 20) { out.println("<div class='reds' align='left'>用戶名" + groupname + "不合法！(長度為4到20位，且不能使用?#=等特殊字符)</div>"); } else if ("zhangsan".equals(groupname)) { out.println("<div class='reds' align='left'>" + "用戶名" + groupname + "已被占用，請重新輸入！</div>"); } else { www.2cto.com out.println("您的用戶名可用"); } } catch (Exception e) { System.out.println(request.getServletPath() + " error : " + e.getMessage()); } %>
