AJAX：
Asynchronous JavaScript And XML（异步的JavaScript和XML）。
需求:
同步编程出现的问题：比如在页面输入用户名跟密码的时候，如果密码出现错误，页面就会重新加载，然后重新输入账号密码，很影响用户体验!
而AJAX是用来解决以上问题的。用户鼠标离开用户名的输入框，页面给出提示！
实现：
AJAX编程四步：
1、创建AJAX核心对象XMLHttpRequest (浏览器内置的，可以直接使用) 2、注册回调函数（重点） 3、开启浏览器和服务器之间的通道 4、发送AJAX请求
XMLHttpRequest()对象：
XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{//表示不支持IE5，IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
index.html注册页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
function checkUsername(username) {
//AJAX发送请求全靠浏览器内置的这个对象: XMLHttpRequest对象 。
//使用这个XMLHttpRequest对象可以在浏览器当中单独启动一个新的浏览器线程，通过浏览器线程发送该请求。
//达到异步效果。
//1、创建AJAX核心对象XMLHttpRequest (浏览器内置的，可以直接使用)
var xhr = new XMLHttpRequest();
//2、注册回调函数
/**
* onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
* readyState：
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
•0: 请求未初始化
•1: 服务器连接已建立
•2: 请求已接收
•3: 请求处理中
•4: 请求已完成，且响应已就绪
*/
xhr.onreadystatechange = function () {//xhr的readyState发生改变的时候,回调一次
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var nameSpan = document.getElementById("nameSpan");
nameSpan.innerHTML = xhr.responseText;
} else {
alert(xhr.status+"错误");
}
}
}
//3、开启浏览器和服务器之间的通道
/**
* open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
•method：请求的类型；GET 或 POST
•url：文件在服务器上的位置,相当于超链接<a href=""></a>
•async：true（异步）或 false（同步）
*/
xhr.open("GET", "some?username="+username, true);
//4、发送AJAX请求
xhr.send();
}
</script>
用户名<input type="text" name="username" onblur="checkUsername(this.value)"/><span id="nameSpan" style="font-size: 12px"></span><br>
密码<input type="password" name="password"><br>
</body>
</html>
web.xml配置文件：
<servlet>
<servlet-name>someServlet</servlet-name>
<servlet-class>com.zhixi.zhang.SomeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>someServlet</servlet-name>
<url-pattern>/some</url-pattern>
</servlet-mapping>
SomeServlet.java进行判断：
package com.zhixi.zhang;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class SomeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String username = request.getParameter("username");
if ("admin".equals(username)){
response.getWriter().print("<font color='red'> 用户名已被注册</font>");
}else {
response.getWriter().print("<font color='green'>用户名未被注册</font>");
}
}
}
以上就完成了简单的用户进行注册的简单检查功能！
