【ajax技術學習】原生ajax表單使用者名稱驗證
阿新 • • 發佈：2019-01-27
<p></p><p></p> <%@page pageEncoding="utf-8" contentType="text/html;charset=utf-8"%> <html> <head> <script type="text/javascript"> //step1 獲得XmlHttpRequest物件。 function getXmlHttpRequest(){ var xmlHttpRequest = null; if ((typeof XMLHttpRequest) != 'undefined') { xmlHttpRequest = new XMLHttpRequest(); } else { xmlHttpRequest = new ActiveXObject('Microsoft.XMLHttp'); } return xmlHttpRequest; } function valiusername(){ //step1 獲得XmlHttpRequest物件。 var xhr = getXmlHttpRequest(); var value = document.getElementById("username").value; //step2 使用XmlHttpRequest物件向伺服器傳送請求。傳送get請求 xhr.open("get","valiusername.do?username=" + encodeURI(value),true); //step4 使用伺服器返回的資料更新頁面。 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ var txt = xhr.responseText; var obj = document.getElementById('username_msg'); obj.innerHTML = txt; }else{ var obj = document.getElementById('username_msg'); obj.innerHTML = 'system error'; } }else{ var obj = document.getElementById('username_msg'); obj.innerHTML = 'checking...'; } }; xhr.send(null); } function valiusername2(){ var xhr = getXmlHttpRequest(); var value = document.getElementById("username").value; xhr.open("post","valiusername.do",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ var txt = xhr.responseText; var obj = document.getElementById('username_msg'); obj.innerHTML = txt; }else{ var obj = document.getElementById('username_msg'); obj.innerHTML = 'system error'; } }else{ var obj = document.getElementById('username_msg'); obj.innerHTML = 'checking...'; } }; xhr.send("username=" + value); } </script> </head> <body style="font-size:30px;"> <form action="regist.do" method="post"> 使用者名稱:<input id="username" name="username" onblur="valiusername();"/> <span style="color:red;" id="username_msg"></span> <br/> 密碼:<input name="pwd"/> <br/> <input type="submit" value="確認"/> </form> </body> </html>
後臺servlet程式：
package web; 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 UserServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String uri =request.getRequestURI(); String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf(".")); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); if(path.equals("/valiusername")){ System.out.println("valiusername..."); if(1==2){ //模擬一個異常 throw new ServletException("some error"); } //String username = request.getParameter("username");//post提交使用，get提交後亂碼 //post提交亂碼，get提交使用 String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8"); System.out.println("username:" + username); if(username.equals("張三")){ out.println("使用者名稱已經存在."); }else{ out.println("可以使用"); } }else if(path.equals("/regist")){ } } }
本示例功能：
對錶單中的使用者名稱進行Ajax校驗，如果輸入的是張三，則顯示使用者名稱已經存在，否則顯示可以使用。
本示例注意：
若是採用ajax的get提交方式，後臺在取值時，用程式碼：
String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");若是採用post提交，則用：
String username = request.getParameter("username");本示例涉及技術知識點：ajax+jsp+servlet