Ajax判断用户名是否可用
生活随笔
收集整理的這篇文章主要介紹了
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判断用户名是否可用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 收银机需要什么配置？
- 下一篇： Ajax响应处理数据的三种格式（主要使用