1、AJAX 简介
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
2、AJAX的组成元素
Ajax技术主要包含四个组件，即JavaScript、CSS、DOM以及XMLHttpRequest对象。
2.1 XMLHttpRequest
XMLHttpRequest是Ajax技术的核心对象，使用Ajax技术都是从XMLHttpRequest对象开始。在Ajax应用程序中，XMLHttpRequest对象负责将用户信息以异步方式发送到服务器端，并接收服务器响应的信息和数据。
创建 XMLHttpRequest 对象：
var xmlhttp;
if(window.ActiveXObject) {
console.log("操作提示：您的浏览器是IE浏览器。");
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
console.log("操作提示：您的浏览器不是IE浏览器。");
xmlHttp = new XMLHttpRequest();
}
XMLHttpRequest的属性：
- readyState
- 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
- status
- 200: "OK"
- 404: 未找到页面
- onreadystatechange
- 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
2.2 AJAX - 向服务器发送请求
方法：
（1）open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
（2）send(string)
将请求发送到服务器。
- string：仅用于 POST 请求
2.3 AJAX - 服务器响应
属性：
- responseText获得字符串形式的响应数据。
- responseXML获得 XML 形式的响应数据。
（1）responseText 属性
如果来自服务器的响应并非 XML，请使用 responseText 属性。
responseText 属性返回字符串形式的响应，因此您可以这样使用：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
（2）responseXML 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：
xmlDoc=xmlhttp.responseXML;
代码案例：
模仿网站在线注册，填写完邮箱和手机号，异步请求，检测邮箱和手机号是否已经注册。
login.jsp代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<script>
var baseUrl = "reg-servlet";
var xmlHttp;
var responseText;
var onBlurId;
//创建创建 XMLHttp 对象
function createXmlHttp(name,value) {
if(window.ActiveXObject) {
console.log("操作提示：您的浏览器是IE浏览器。");
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
console.log("操作提示：您的浏览器不是IE浏览器。");
xmlHttp = new XMLHttpRequest();
}
//注册监听或者回调函数
xmlHttp.onreadystatechange = callback;
//1:打开状态
//传递参数
var url = baseUrl + "?" + name+"="+value;
//GET方法打开,第三个参数如果为true,那么为异步请求,将不会刷新整个页面.
xmlHttp.open("GET", url, true);
//2:发送状态
//Get方式的send()
xmlHttp.send(null);
}
//回调函数，处理响应信息
function callback() {
console.log("回调函数已调用");
//setResponseText(xmlHttp.readyState);
//获取响应内容
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
responseText = xmlHttp.responseText;
//console.log(responseText);
if(responseText == "true"){
setResponseText(true);
}else{
setResponseText(false);
}
}
}
}
//通过处理后的响应信息修改提醒文本
function setResponseText(flag) {
var id;
var responseText;
if(onBlurId == "e-mail"){
id = "pText1";
responseText = document.getElementById(id);
if(flag){
responseText.style.color = "green";
responseText.innerText = "该邮箱可以注册";
}else{
responseText.style.color = "red";
responseText.innerText = "该邮箱已经被注册";
}
}else{
id = "pText2";
responseText = document.getElementById(id);
if(flag){
responseText.style.color = "green";
responseText.innerText = "该手机号可以注册";
}else{
responseText.style.color = "red";
responseText.innerText = "该手机号已经被注册";
}
}
}
//重写失去焦点事件
function onBlur(id) {
var module = document.getElementById(id);
var name = module.name;
var value = module.value;
//var url = baseUrl + "?" + name + "=" + value;
onBlurId = id;
console.log(name + "失去焦点");
console.log(name+":"+value);
createXmlHttp(name,value);
}
</script>
</head>
<body>
<form id="Login" action="" method="post">
<table>
<tr>
<td>邮箱： <input name="e-mail" id="e-mail" type="text" onblur="onBlur(id)" /></td>
<td><p id="pText1" style="color: red;"></p></td>
</tr>
<tr>
<td>手机号： <input name="phoneNum" type="text" id="phoneNum" onblur="onBlur(id)" /></td>
<td><p id="pText2" style="color: red;"></p></td>
</tr>
</table>
<input type="button" value="登录" onclick="setResponseText(456)"/>
<input type="button" value="注册" />
</form>
</body>
</html>
regServlet.java代码：
package com.company.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
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("/reg-servlet")
public class regServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public regServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
Enumeration<String> names = request.getParameterNames();
System.out.println("-----------------");
String responseTest = "";
while(names.hasMoreElements()) {
String name = names.nextElement();
String value = request.getParameter(name);
//此处模拟数据库检测，查询是否已经注册
if(name.equals("e-mail")) {
if(value.equals("2584966xxx@qq.com")) {
System.out.println("该邮箱已注册");
responseTest = "false";
}else {
System.out.println("该邮箱可以注册");
responseTest = "true";
}
}else {
if(value.equals("15592237xxx")) {
System.out.println("该手机号已注册");
responseTest = "false";
}else {
System.out.println("该手机号可以注册");
responseTest = "true";
}
}
}
PrintWriter out=response.getWriter();
out.print(responseTest);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
