jsp代码部分:
<%@ 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 'ajaxUname.jsp' starting page</title>
<!--引入js文件 -->
<script type="text/javascript" src="js/ajaxUtil.js"></script>
<!-- 声明js代码域 -->
<script type="text/javascript">
//声明用户名校验函数
function checkUname(){
var uname=document.getElementById("uname").value;
myAjax("get", "/ajax/us","uname="+uname, function(ajax){
//获取响应数据
var data=ajax.responseText;
//处理响应数据
if(eval(data)){
document.getElementById("unameSpan").innerHTML="用户名被占用";
}else{
document.getElementById("unameSpan").innerHTML="用户名OK";
}
});
}
/* function deal200(ajax){
//获取响应数据
var data=ajax.responseText;
//处理响应数据
if(eval(data)){
document.getElementById("unameSpan").innerHTML="用户名已被占用";
}else{
document.getElementById("unameSpan").innerHTML="用户名OK";
}
} */
</script>
</head>
<body>
<h3>ajax用户名校验</h3>
<hr />
用户名:<input type="text" name="uname" id="uname" value="" onblur="checkUname()"/><span id="unameSpan"></span>
</body>
</html>
js代码部分:
/*
method:接收请求方式。值为get或者post
url:请求地址
data:请求数据。使用键值对进行传值,不同的键值对使用&符号隔开,例如:"a=123&b=456";
如果没有请求数据,传入null即可
ansyc:设置异步和同步,true表示异步,false表示同步,默认是true
deal200:接收一个函数对象,用来处理响应数据的函数,函数必须声明一个形参用来接收ajax对象。
deal404:接收一个函数对象,用来处理404的函数
deal500:接收一个函数对象,用来处理500错误的函数
*/
function myAjax(method,url,data,deal200,deal404,deal500,ansyc){
//使用ajax校验用户名是否存在
//创建ajax引擎对象
var ajax;
if(window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}else if(window.ActiveXObject){
ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
//覆写onreadystatechange
ajax.onreadystatechange=function(){
//判断ajax状态码
if(ajax.readyState==4){
//判断响应状态码
if(ajax.status==200){
if(deal200){
deal200(ajax);
}
}else if(ajax.status==404){
if(deal404){
deal404();
}
}else if(ajax.status==500){
if(deal500){
deal500();
}
}
}
}
//发起请求
if("get"==method.toLowerCase()){
//使用get
ajax.open("get",url+(data==null?"":"?"+data),ansyc);
//发起请求
ajax.send(null);
}else if("post"==method.toLowerCase()){
ajax.open("post", url,ansyc);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send(data);
}
}
servlet文件
package com.bjsxt.userServlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.bjsxt.pojo.User;
import com.bjsxt.unameservice.UnameService;
import com.bjsxt.unameserviceImpl.UnameServiceImpl;
import com.google.gson.Gson;
public class AjaxAservlet extends HttpServlet {
UnameService us = new UnameServiceImpl();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
//创建请求编码格式
req.setCharacterEncoding("utf-8");
//创建响应编码格式
resp.setContentType("text/hrml;charset=utf-8");
//获取请求信息
String uname = req.getParameter("uname");
//处理请求信息
System.out.println("AjaxAservlet.service()"+uname);
//响应处理结果
try {
Thread.sleep(3000);
} catch (Exception e) {
e.printStackTrace();
}
//响应ajax数据
//响应字符串数据:适合于简单的请求处理
// resp.getWriter().write("this is my first ajax");
//响应大量数据
// 创建用户对象
User u = new User(1,"赵六","678","男","写代码");
//重定向
//请求转发
//响应用户信息(响应对象给ajax引擎对象)
//注意:响应js对象给ajax引擎,使用json数据格式
System.out.println("AjaxAservlet.service()"+u);
String str = new Gson().toJson(u);
System.out.println("AjaxAservlet.service()"+str);
resp.getWriter().write(str);
}
}