index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <!-- 1. 导入 jQuery 库 2. 获取 name = "username" 的节点 username 3. 为 username 添加 change响应函数 3.1 获取 username 的 value 属性值,去除前后空格且不为空 3.2 发送 Ajax 请求检验 username 是否可用 3.3 在服务端直接返回一个 html 片段 3.4 在客户端浏览器把其直接添加到 #message 的 html 中 --> <script type="text/javascript" src ="${pageContext.request.contextPath}/scipts/jquery-2.1.0.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}/valiateUserName"; var args = {"userName":val , "time": new Date()}; $.get(url, args, function(data){ $("#message").html(data); }); } }); }) </script> </head> <body> <form action="" method = "post"> userName: <input type = "text" name = "username" placeholder="Search..."/> <br><br> <div id = "message"></div> <br> <input type = "submit" value = "Submit" /> </form> </body> </html>
ValiateUserNameServlet.java
package com.anqi.ajax.app.servlets; import java.io.IOException; import java.util.Arrays; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/valiateUserName") public class ValiateUserNameServlet extends HttpServlet { private static final long serialVersionUID = 1L; public ValiateUserNameServlet() { super(); } protected 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("test/html"); response.setCharacterEncoding("UTF-8"); response.getWriter().print(result); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } }
结果展示
拓展知识:
- 服务端响应的是 HTML 格式文件
<script type="text/javascript" src = "jquery-2.1.0.js"></script> <script type="text/javascript"> $(function(){ $("a").click(function(){ var url = this.href; var args = {"time":new Date}; $.get(url,args,function(data){ var name = data.name; var website = data.website; var email = data.email; $("#details").empty() .append("<h2><a href = 'mailto:"+email+"'>"+name+"</a></h2>") .append("<a href = '"+website+"'>"+website+"</a>"); },"JSON"); }); }) </script>
<body> <h1>People</h1> <ul> <li><a href = "file/andy.js">Andy</a></li> <li><a href = "file/richard.js">Richard</a></li> <li><a href = "file/jeremy.js">Jeremy</a></li> <div id = "details"></div> </ul> </body>
- 服务端响应的是 XML 格式文件
$(function(){ $("a").click(function(){ var url = this.href; var args = {"time":new Date()}; $.get(url, args, function(data){ var name = $(data).find("name").text(); var website = $(data).find("website").text(); var email = $(data).find("email").text(); $("#details").empty() .append("<h2><a href = 'mailto:"+email+"'>"+name+"</a></h2>") .append("<a href = '"+website+"'>"+website+"</a>"); }); return false; }); })
- 服务端响应的是 JSON 格式文件
$(function(){ $("a").click(function(){ var url = this.href; var args = {"time":new Date}; $.get(url,args,function(data){ var name = data.name; var website = data.website; var email = data.email; $("#details").empty() .append("<h2><a href = 'mailto:"+email+"'>"+name+"</a></h2>") .append("<a href = '"+website+"'>"+website+"</a>"); },"JSON"); }); })