AJAX原理
1. AJAX简介及应用
AJAX（Asynchronous JavaScript And XML），直译为异步的JavaScript和XML。AJAX并不是一种全新的技术，而是将现有的JavaScript、XML等技术进行整合，通过异步请求的方式，实现页面无刷新式提交。需要强调的是，AJAX是客户端与服务器端的交互技术，和JavaScript的客户端验证技术有着本质的区别，读者不要混淆。
使用AJAX，请求响应模式不再是请求对应页面的模式，服务器端的响应不要求重新加载整个页面，而可能仅仅更新部分内容。而且发送的请求是异步的，不需要等待服务器对该异步请求做出响应，还可以继续当前页面的操作，当服务器对异步请求相应完成后，浏览器才对页面的局部内容进行更新。下面来看看AJAX技术在哪些地方得到了广泛的应用。
●验证注册名是否已使用
●网站页面局部登陆和退出
●文本框自动补全功能
●地图拖动、放大、缩小功能
2. XMLHttpRequest
掌握XMLHttpRequest对象的使用是学习AJAX技术（可使用AJAX框架）的核心。表6.1和表6.2分别列出了XMLHttpRequest的常用方法和属性，需要读者掌握。
3. AJAX案例
前面已经讲过，AJAX并不是一种全新的技术，而是将现有的JavaScript、XML等技术进行整合。本节通过JavaScript的XMLHttpRequest对象完成发送请求到服务器，并获得返回结果的任务，然后使用JavaScript更新局部的页面内容（不使用AJAX的框架，例如JQuery框架中的AJAX）。
●案例需求
本案例的需求非常简单，学生用户输入手机号码注册，离开该文本框时，后台查询MySQL数据库中的student表，如果系统数据库中该手机号已经存在，则提示“此手机号已被使用！”，如图6.13所示，否则提示“手机号可以使用！”，如图6.14所示。
●案例代码
接下来分步骤完成该需求的案例代码，并加以简单说明。
（1）创建ajax.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title>AJAX案例title>
head>
<body>
<form name="userForm" action="" method="post">
注册手机号：<input type="text" name="phone" id="phone" onblur="checkPhoneExist()"/>
<div id="msg">div>
form>
body>
html>使用文本框的onblur事件，实现文本框失去焦点时检查用户填写的注册手机号是否已经使用，具体调用的是checkPhoneExist()方法。另外，当从服务器获取结果数据后，仅需更新id为msg的div中的内容。
（2）编写checkPhoneExist()方法
在ajax.jsp页面头部编写检查用户填写的注册手机号是否已经使用的JavaScript方法是checkPhoneExist()，具体代码如下：
var xmlHttp; //声明一个变量，用于存储XMLHttpRequest对象
function checkPhoneExist() {
var f = document.userForm;
var userPhone = f.phone.value;
//调用创建XMLHttpRequest对象的方法，给xmlHttp赋值
createXMLHttpRequest();
//调用具体的方法，执行AJAX操作，其中传入的参数表示访问服务器的CheckUser这个Servlet，并把用户填写的注册手机号作为userPhone的参数传入CheckUser
doAjax("CheckUser?userPhone="+userPhone);
}（3）编写createXMLHttpRequest()方法
因为不同浏览器创建XMLHttpRequest对象的的方法是不同的，所以为了兼容不同版本的浏览器，将创建XMLHttpRequest对象的方法写成如下形式：
function createXMLHttpRequest() {
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
try {
xmlHttp = new ActiveXObject("Msxml2.xmlHttp");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.xmlHttp");
} catch (e) {
alert("对不起，您的浏览器不支持xmlHttpRequest对象！");
}
}
}
}（4）编写doAjax()方法
AJAX需要在JavaScript中给服务器指定的服务发送异步请求，在doAjax方法中调用XMLHttpRequest对象的相关方法，给服务器CheckUser这个Servlet发送异步请求。
function doAjax(url) {
if(!xmlHttp){
return false;
}
//设置对象状态改变处理程序，即当XMLHttpRequest对象的状态发生改变时（XMLHttpRequest对象开始发送请求、请求发送完毕、开始读取响应、读取响应结束都是XMLHttpRequest对象的状态），会使用该页面中哪个JavaScript方法进行处理
xmlHttp.onreadystatechange = doRequest;
//建立与服务器的连接，参数依次为请求中的方法、请求的地址和是否使用异步请求
xmlHttp.open("post",url,true);
//如果是post方法请求，必须要添加下面的代码
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求，参数为请求的参数，null表示不配置参数
xmlHttp.send(null);
}（5）编写doRequest()方法
作为客户端浏览器，需要根据XMLHttpRequest对象状态的改变编写相应的代码，对页面进行处理。下面的代码完成的功能是当XMLHttpRequest对象读取响应结束，根据CheckUser这个Servlet响应的文本内容（yes表示该注册手机号未被使用，no表示已被使用），对id为msg这个div的内容进行局部更新。
function doRequest() {
//readyState是表示XMLHttpRequest对象状态的属性，4表示读取响应结束
if(xmlHttp.readyState==4){
//status表示服务器返回响应的HTTP状态码，200表示服务器正常响应
if(xmlHttp.status==200){
//responseText表示响应的文本内容
if(xmlHttp.responseText=="yes"){
document.getElementById("msg").innerHTML="手机号可以使用！";
document.getElementById("msg").style.color="green";
}else{
document.getElementById("msg").innerHTML="此手机号已被使用！";
document.getElementById("msg").style.color="red";
}
}else{
alert("请求返回处理的数据有错误！");
}
}
}（6）编写CheckUser类
在服务器端，编写CheckUser这个Servlet（后面章节将会学到Servlet），处理XMLHttpRequest对象发送的请求。该Servlet和其他Servlet本质上没有区别，只是需要注意，返回给客户端响应的文本内容需要和客户端处理程序匹配。
@WebServlet("/CheckUser")
public class CheckUser extends HttpServlet {
private static final long serialVersionUID = 1L;
public CheckUser(){
super();
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8"); //设置编码
String phone = request.getParameter("userPhone"); //获取前台参数
String DBDRIVER="com.mysql.jdbc.Driver"; //数据库驱动类
String DBURL="jdbc:mysql://localhost/book"; //数据库地址
String DBUSER="mysql"; //数据库用户名
String DBPASS="root"; //数据库密码
Connection conn = null; //创建连接对象
Statement state = null; //创建SQL语句对象
ResultSet rs = null; //创建结果集对象
PrintWriter out = response.getWriter();
try {
Class.forName(DBDRIVER); //加载数据库驱动
conn=DriverManager.getConnection(DBURL, DBUSER, DBPASS); //创建数据库连接
state = conn.createStatement();
String sql="select * from student where phone = '"+ phone +"'";
rs = state.executeQuery(sql); //执行SQL语句并获取结果集
if(rs.next()){
out.print("no");
}else{
out.print("yes");
}
} catch (Exception e) {
e.printStackTrace();
} finally {
out.flush();
out.close();
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}