1.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>页面无刷新用ajax检查用户名是否已注册(POST方式)</title>
<script type="text/javascript">
function createAJAX() {
var ajax = null;
try {
ajax = new ActiveXObject("microsoft.xmlhttp");
//alert("你的浏览器支持ajax,是IE");
} catch (e1) {
ajax = new XMLHttpRequest();
//alert("你的浏览器支持ajax,是非IE");
}
return ajax;
}
</script>
</head>
<body>
<form>
用户名(POST):<input id="username" name="username"/>
<span id="span"></span>
</form>
</body>
<script type="text/javascript">
window.document.getElementById("username").onblur = function() {
var username = this.value;
//1.创建一部对象
var ajax = createAJAX();
//2.异步对象准备发送请求
var method = "post";
var url = "${pageContext.request.contextPath}/UserAjaxServlet?time = "
+ new Date().getTime();
ajax.open(method, url);
//设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//3.AJAX异步对象真正发送请求体的数据到服务器,如果请求体无数据的话,用null表示,如果有值,用键值对
var content = "username=" + username;
ajax.send(content);
//---------------------------------等待-------------------------
//4. AJAX异步对象不断监听服务端状态的变化,只有状态码变化了,方可触发函数
//0-1-2-3-4,这些是可以触发函数的
//4-4-4-4-4,这些是不可以触发函数的
//以下这个函数是服务器来触发的,不是程序员触发的,这和onclick是不一样的
ajax.onreadystatechange = function() {
//如果状态码为4
if (ajax.readyState == 4) {
//如果服务器响应为200
if (ajax.status == 200) {
//5. 从AJAX异步对象中获取服务器响应的结果
var tip = ajax.responseText;
//创建img
var imgElement = document.createElement("img");
//设置标签的属性
imgElement.src = tip;
imgElement.style.width ="14px";
imgElement.style.height ="14px";
//定位span标签
var spanElement = document.getElementById("span");
//清空span里的值
spanElement.innerHTML = "";
//将img加入到span里边
spanElement.appendChild(imgElement);
}
}
}
}
</script>
</html>
2.servlet代码
package com.buaa.ajax;
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;
@WebServlet("/UserAjaxServlet")
public class UserAjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
System.out.println("username:" + username);
String tip = "images/MsgSent.gif";
if ("杰克".equals(username)) {
tip = "images/MsgError.gif";
}
PrintWriter pw = response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
}
注意:POST提交要设置头文件