Servlet配置
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <servlet> <servlet-name>AjaxServer</servlet-name> <servlet-class>org.zln.ajax.servlet.AjaxServer</servlet-class> </servlet> <servlet-mapping> <servlet-name>AjaxServer</servlet-name> <url-pattern>/AjaxServletDo.do</url-pattern> </servlet-mapping> </web-app>
Servlet编写
package org.zln.ajax.servlet; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; /** * Created by coolkid on 2015/6/7 0007. */ public class AjaxServer extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try{ response.setContentType("text/html;charset=UTF-8"); request.setCharacterEncoding("UTF-8"); PrintWriter out = response.getWriter(); //取参数信息 String name = request.getParameter("name"); //输入校验 if(name == null || name.length() == 0){ out.println("用户名不能为空"); } else{ //逻辑校验与业务处理 if(name.equals("wangxingkui")){ out.println("用户名[" + name + "]已经存在，请使用其他用户名"); } else{ out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册"); } } /*这些发往HTML的数据会被ajax的回调函数处理*/ out.println("<br/><a href="ajax.html">返回校验页面</a>"); } catch(Exception e){ e.printStackTrace(); } //返回更新数据（而不是跳转到新的视图） } }
html页面
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>itcast.cn 用户名校验ajax实例</title> <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="/Lesson5_AJAX_Demo1/jslib/ajax.js"></script> </head> <body> itcast.cn 用户名校验的ajax实例，请输入用户名：<br/> <!-- ajax方式下，不需要使用表单提交数据 --> <input type="text" id="userName" value=""/> <input type="button" value="校验" onclick="verify('userName')"/><br/> <!-- div空间用于显示ajax处理结果 --> <div id="result"></div> </body> </html>
js
/** * Created by coolkid on 2015/6/7 0007. */ /*用户名校验*/ function verify(id){ //获取文本框内容 var userNameObj = $("#"+id); var userNameValue = userNameObj.val(); //发送数据给Servlet //使用jQuery的XMLHTTPRequest对象的get请求封装 $.get("/Ajax/AjaxServletDo.do?name="+userNameValue,null,callBack); } //回调函数 function callBack(data){ //接收服务端返回数据 $("#result").html(data); //显示动态返回的数据 }
js的简化写法
/** * Created by coolkid on 2015/6/7 0007. */ /*用户名校验*/ function verify(id){ //发送数据给Servlet //使用jQuery的XMLHTTPRequest对象的get请求封装 $.get("/Lesson5_AJAX_Demo1/AjaxServletDo.do?name="+$("#"+id).val(),null,function(data){ $("#result").html(data); }); }