Ajax应用示例之用户名检查

来源：互联网发布：中国野生蜘蛛网络图鉴编辑：程序博客网时间：2024/05/18 03:34

1.简介

如下图所示，当我们在某个系统注册时，当我们输入用户名后，后台就会进行查询判断用户名是否已被注册，并返回相关信息，这个时候前端跟后台会发生数据交换，但是页面并没有刷新，这里用的就是Ajax技术。

2.实现

（1）利用XMLHttpRequest实现

前端代码

<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>   <body>  <SCRIPT LANGUAGE="JavaScript">  function check(){  var username = document.regForm.username.value;   var xmlHttp=null;  xmlHttp=new XMLHttpRequest(); //一般浏览器创建XMLHttp对象  if(xmlHttp==null){  try{  //新版本IE创建XMLHttp对象  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  }catch(e){  try{  //老版本IE创建XMLHttp对象  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  }catch(e){  //创建XMLHttp对象出错   alert("XMLHttp is failed created!")  }  }  }  var url = "/Prj24/servlet/CheckServlet?username="+username;xmlHttp.open("GET", url, true);xmlHttp.send();//为XMLHttp对象添加nreadystatechange()响应函数xmlHttp.onreadystatechange=function() {if (xmlHttp.readyState==4) {  //判断响应是否完成 //返回的HTML格式数据放入到当前页面checkDiv标签下 checkDiv.innerHTML = xmlHttp.responseText;}else{checkDiv.innerHTML = "正在检测...";}}  }</SCRIPT>    <form name="regForm">    username:<input type="text" name="username" onblur="check()">    <span id="checkDiv"></span><BR>    <input type="submit" value="submit">    </form>  </body></html>

后台servlet代码

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//这里已省去数据库的查询操作List<String> userNames = Arrays.asList("AAA","BBB","CCC");//假设这几个用户名已被使用String userName=request.getParameter("username");String result=null;if(userNames.contains(userName)){result="<font color='red'>该用户名已被使用</font>";}else{result="<font color='green'>该用户名可以使用</font>";}response.setContentType("text/html");//表示输出的是HTMLresponse.setCharacterEncoding("UTF-8");response.getWriter().print(result);}

（2）利用jQuery实现

首先要导入jQuery，如下图所示

前端代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">    <title>My JSP 'index.jsp' starting page</title><!--<link rel="stylesheet" type="text/css" href="styles.css">--><!-- 1. 导入 jQuery 库2. 获取 name="username" 的节点: username3. 为 username 添加 change 函数   3.1 为 username 的 value 属性值去除前后空格且不为空，准备发送Ajax请求   3.2 发送 Ajax 请求 检验  username 是否可用   3.3 在服务端直接返回一个 html 片段    3.4 在客户端浏览器把其直接添加到 #message 的 html 中 --><script type="text/javascript" src="${pageContext.request.contextPath}/Scripts/jquery-2.1.4.min.js"></script><script type="text/javascript" >$(function(){$(":input[name='username']").change(function(){var val = $(this).val();val = $.trim(val);if(val!=""){var url="${pageContext.request.contextPath}/servlet/checkUserName";var args={"userName":val,"time":new Date()};$.post(url,args,function(data){$("#message").html(data);})}})})</script>  </head>  <body><form action="" method="post">UserName: <input type="text" name="username" /><br/><br/><div id="message"> </div><br/><br/><input type="submit" value="submit"/></form>  </body></html>

后台servlet代码

public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {List<String> userNames = Arrays.asList("AAA","BBB","CCC");//假设这几个用户名已被使用String userName=request.getParameter("userName");String result=null;if(userNames.contains(userName)){result="<font color='red'>该用户名已被使用</font>";}else{result="<font color='green'>该用户名可以使用</font>";}response.setContentType("text/html");//表示输出的是HTMLresponse.setCharacterEncoding("UTF-8");response.getWriter().print(result);}

3.效果展示

0 0