ajax使用非常广,比如验证用户名、二级联动等。实现的效果如下:
前台代码如下:
<%@ 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">
<script type="text/javascript" src="${pageContext.request.contextPath}/util.js"></script>
<title>ajax用户名验证</title>
<script>
window.onload = function() {
document.getElementById("userName").onblur = function() {
if(this.value=="")
{
alert("请输入用户名!");
this.focus();
}
//发出已补请求
//1/得到xhr对象
var xhr = getXHR();
//2.注册状态变化监听器
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
document.getElementById("msg").innerHTML = xhr.responseText;
}
}
}
//3.建立与服务器的连接
xhr.open("POST", "AjaxDemo1" + "?time=" + new Date().getTime());
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.向服务器发出请求
xhr.send("userName="+this.value);
}
}
</script>
</head>
<body>
<form action="AjaxDemo1" method="post">
用户名:<input type="text" id="userName" name="userName" /><span id="msg"></span><br />
密 码:<input type="password" id="password"
name="password" /><br /> <input type="submit" value="注册">
</form>
</body>
</html>
后台代码如下:
package com.levi.servletajax;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxDemo1
*/
public class AjaxDemo1 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxDemo1() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String userName=request.getParameter("userName");
response.setCharacterEncoding("utf-8");
String names[]={"lw","admin","levi"};
for (String s : names)
{
if(s.equals(userName))
{
response.getWriter().write("<font color='red'>用户名不可用</font>");
return;
}
}
response.getWriter().write("<font color='green'>用户名可用</font>");
response.getWriter().flush();
}
}
其中前台的获取XMLHttpRequest对象我封装到了util.js文件里面,里面代码如下:
/**
* 得到XMLHttpRequest对象
*/
function getXHR(){
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest();
}catch(e)
{
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("你的浏览器不支持ajax");
return false;
}
}
}
return xmlHttp;
}