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>
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");//表示输出的是HTML
response.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" 的节点: username
3. 为 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,IOException {
List<String> userNames = Arrays.asList("AAA","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");//表示输出的是HTML
response.setCharacterEncoding("UTF-8");
response.getWriter().print(result);
}
3.效果展示
原文链接：https://www.f2er.com/ajax/163044.html
