Ajax的核心是XMLHttpRequest对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，
对网页的某部分进行更新。
例如：通过Ajax的异步刷新简单验证用户名的可用性
前端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验证</title> <script type="text/javascript"> function cheackUserName() { var userName=document.getElementById("userName").value;
//创建XMLHttpRequest对象：
var xmlhttp；
if(window.XMLHttpRequest)
{ //兼容IE7+，Firefox,Chrom,Opera,Safari
xmlhttp = new XMLHttpRequest();
}else{ //IE5,IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){ alert(xmlHttp.responseText); var dataObj = eval("("+xmlHttp.responseText+")");
//由于 JSON 语法是 JavaScript 语法的子集，JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。
//eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。
//必须把文本包围在括号中，这样才能避免语法错误 if(dataObj.exist){ document.getElementById("tip").innerHTML="该用户已经存在！"; }else{ document.getElementById("tip").innerHTML="该用户可用！"; } } };
//向服务器发送请求：
//使用XMLHttpRequest对象的open()和send()方法
xmlHttp.open("get","getInfo?action=cheackUserName&userName="+userName,true); xmlHttp.send(); } </script> </head> <body> <table> <tr> <th>用户注册</th> </tr> <tr> <td>用户名：</td> <td><input type="text" id="userName" name="userName" onblur="cheackUserName()"/> <font id="tip"></font></td> </tr> <tr> <td>密码：</td> <td><input type="text" id="password" name="password"></td> </tr> <tr> <td>确认密码：</td> <td><input type="text" id="password2" name="password2"></td> </tr> <tr> <td><input type="submit" value="注册"/></td> <td><input type="reset" value="重置"/></td> </tr> </table> </body> </html>
在tomcat服务器中创建一个Servlet模拟对用户名的接收以及验证：
引入Json需要的jar包：commons-beanutils-1.7.0.jar commons-lang-2.4.jar json-lib-2.2.3-jdk15.jar
commons-collections-3.2.jar commons-logging-1.0.4.jar ezmorph-1.0.3.jar
package com.cong.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; public class GetInfo extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); PrintWriter out=response.getWriter(); String userName=request.getParameter("userName"); //接收浏览器传过来的数据 JSONObject resultJson=new JSONObject(); //创建JSONObject对象，引入必要的jar包 if("Hello".equals(userName)){ resultJson.put("exist", true); }else { resultJson.put("exist", false); } out.println(resultJson); out.flush(); out.close(); } }
在web.xml中配置Servlet：
<servlet> <servlet-name>getInfo</servlet-name> <servlet-class>com.cong.ajax.GetInfo</servlet-class> </servlet> <servlet-mapping> <servlet-name>getInfo</servlet-name> <url-pattern>/getInfo</url-pattern> </servlet-mapping>