Ajax的使用

本文意在通过小demo来理解如何利用jQuery实现Ajax。

案例——检查员工编号

案例描述：通过异步处理，检查员工编号是否冲突。点击输入框，如果输入框的内容是1001，则说明编号冲突，则输出编号冲突的提示信息。否则，可以添加此员工编号。

业务需求

在实际信息提交过程中，我们想不是全部提交表单信息后，才能得到后台的处理响应。而是，当输入某一内容后，就立刻对该内容进行判断处理。这时，我们就需要用到Ajax异步处理

前提准备

  lib文件下添加三个Ajax的jar包
  js文件夹下添加jQuery的jar包
  js文件夹下创建script.js，用来写脚本
  将jQuery的jar包和script.js引入Register.jsp文件中

实现逻辑

首先运行Register.jsp页面，输入框先获取焦点，并输入员工编号。输入框失去焦点后，执行script.js，将数据异步传送给后台 CheckEmpIdServlet.java。后台对数据进行处理，若该员工编号存在则返回错误提示信息，若该数据不存在，说明可以添加，就不用返回提示信息了。如果后台有错误，则在alert中显示状态码。

Register.jsp

前端登录页面Register.jsp，输入员工编号，通过jQuery对象向后台进行传递，并接受错误提示信息。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.2.1.min.js" ></script>
	<script src="${pageContext.request.contextPath }/js/script.js"></script>
</head>
<body>
	<h1>员工注册</h1>
	// 传入员工编号
	员工编号：<input type="text" name="empid">
	// 显示错误信息
	<span style="color:red; font-weight:bold;"></span>
	// 隐藏项目路径，发送向后台发送请求时需要该路径
	<input type="hidden" id="path" value="${pageContext.request.contextPath }"/>
</body>
</html>

script.js

通过jQuery调用 ajax方法，向后台传递异步请求。这里对异步请求代码做一个简单的介绍。我们要向后台传递异步数据：

我们要明白要向哪里传，需要知道后台地址 url
传递数据时的请求方式，get 还是 post
是不是异步请求 async (true or false)，这个是默认的，可以不写
如果有请求参数 data ，参数值类型是 JSON 对象，没有可以不写
后台响应的数据类型 dataType，如果是 text 就是字符串，如果是 json 就是 JSON对象
响应成功后，要执行什么操作 success。需要已经接受到响应结果readyState=4；并且是正确接收的，状态码status=200。data 参数是后台的响应结果。
响应出错后，要执行什么操作 error。状态码status=400或status=500。出错的方法的参数 xmlHttpRequest 就是我们传递的请求对象。

// 页面加载后，要执行的功能
$(function(){
	// 输入框失去焦点后要执行的功能
	$('input[name=empno]').blur(function(){
		// 向后台发送异步请求，接受响应结果进行局部判断
		$.ajax({
			// 访问的后台地址
			url:$('#path').val()+"/CheckEmpnoServlet",
			//url:${pageContext.request.contextPath}+"/CheckEmpnoServlet",
			type:'get',
			// 为后台传递的请求参数，以json对象的方式传递，如果不传请求参数，可以省略
			data:{empno:$('input[name=empno]').val()},
			// 后台响应的数据类型
			dataType:'text',
			// 响应成功后，要执行的功能
			success:function(data){
				// 请求对象的readyState等于4并且status等于200是执行该方法
				$('span').html(data);
			},
			// error的function参数就是请求对象XMLHttpRequest
			error:function(xmlHttpRequest){
				alert(xmlHttpRequest.status);
			}
		});
	});
});

CheckEmpIdServlet.java

接受前端请求参数，并判断结果。将响应结果返回给前端。

接受请求参数，并处理请求参数
设置响应的「数据类型」、「编码类型」。如果不设置的话，前台可能无法正常显示。如果数据类型为 text/html 则向前台传递的是字符串；如果数据类型为 application/json 则向前台传递的是 JSON对象。编码一般就设置为 utf-8
创建响应对象
传递响应结果
清空缓存
关闭响应对象

package com.servlets;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CheckEmpIdServlet
 */
@WebServlet("/CheckEmpIdServlet")
public class CheckEmpIdServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CheckEmpIdServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		//response.getWriter().append("Served at: ").append(request.getContextPath());
		
		if(request.getParameter("empid") != null) {
			int empId = Integer.parseInt(request.getParameter("empid"));
			String msg = "";
			if(empId == 1001) {
				msg = "该编号已经创建！";
			}
			response.setContentType("text/html;charset=utf-8");
			PrintWriter writer = response.getWriter();
			writer.print(msg);
			writer.flush();
			writer.close();
		}
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

运行结果

如果输入的员工编号为1001，则输出提示信息
如果输入的员工编号不为1001，则说明该编号可以被创建，就不需要任何提示信息

自己遇到的问题

script.js 里的 dataType:'textiiiii' 写错，alert 提示框输出的 readyState=4，status=200
alert方法是写在 error方法 里的，而 error方法 不是在 status!=200 时才执行的嘛！这里还没有搞清楚是什么原因。
CheckEmpIdServlet.java 里的 response.setContentType(“text/html;charset=utf-8”); 不写或者写错的话，会导致前端页面无法正常显示，像这样：