1.ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，它一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
例子： 在用户注册用户时，输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”，整个过程中页面没有刷新，只是局部刷新了， 在请求发出后，浏览器不用等待 服务器响应结果就可以进行其他操作。
优点：
AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
缺点：
AJAX并不适合所有场景，很多时候还是要使用同步交互；
AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；
2.创建ajax的步骤：
1.创建XMLHttpRequest对象；
2.调用open()方法打开与服务器的连接；
3.调用send()方法发送请求；
4.为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在XMLHttpRequest的1、2、3、4，四种状态时被调用；
XMLHttpRequest对象的5种状态：
0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；
1：请求已开始，open()方法已调用，但还没调用send()方法；
2：请求发送完成状态，send()方法已调用；
3：开始读取服务器响应；
4：读取服务器响应结束。
通常我们只关心4状态。
XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。
XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在readyState为4时才能获取到！
2.ajax例子
2.1 首先创建一个servlet：
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println(request.getParameter("b")); System.out.println("Hello AJAX!"); response.getWriter().print("Hello AJAX!"); }
接着创建一个jsp：
<script type="text/javascript"> function createXMLHttpRequest() { try { return new XMLHttpRequest();//大多数浏览器 } catch (e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { return new ActiveXObject("Microsoft.XMLHTTP"); } } } function send() { var xmlHttp = createXMLHttpRequest(); //1. 得到异步对象 xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {// 双重判断：xmlHttp的状态为4（服务器响应结束），以及服务器响应的状态码为200（响应成功） var div = document.getElementById("div1"); div.innerHTML = xmlHttp.responseText; } }; xmlHttp.open("POST", "/ajaxdemo1/AServlet?a=A", true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//设置请求头 xmlHttp.send("b=B");//使用send()方法来设置请求体内容。如果是GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！ } </script> <h1>AJAX2</h1> <button onclick="send()">测试</button> <div id="div1"></div>
2.2 判断用户名是否已被注册
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！
创建register.jsp：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'ajax3.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
//创建异步对象
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
throw e;
}
}
}
}
window.onload = function() {
// 获取文本框，给它的失去焦点事件注册监听
var userEle = document.getElementById("usernameEle");
userEle.onblur = function() {
//1.得到异步对象
var xmlHttp = createXMLHttpRequest();
//2.打开连接
xmlHttp.open("POST", "<c:url value='/ValidateUsernameServlet'/>", true);
//3.设置请求头：Content-Type
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送请求，给出请求体
xmlHttp.send("username=" + userEle.value);
//5.给xmlHttp的onreadystatechange事件注册监听
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
//获取服务器的响应，判断是否为1
// 是：获取span，添加内容：“用户名已被注册”
var text = xmlHttp.responseText;
var span = document.getElementById("errorSpan");
if(text == "1") {
//得到span元素
span.innerHTML = "用户名已被注册！";
} else {
span.innerHTML = "";
}
}
};
};
};
</script>
</head>
<body>
<h1>演示用户名是否被注册</h1>
<form action="" method="post">
用户名：<input type="text" name="username" id="usernameEle"/><span id="errorSpan"></span><br/>
密 码：<input type="password" name="password"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>
创建servlet：
package cn.itcast.web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValidateUsernameServlet extends HttpServlet {
public 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");
if (username.equalsIgnoreCase("it")) {
response.getWriter().print("1");
} else {
response.getWriter().print("0");
}
}
}