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：
AJAX2
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"); } }}