这里我们先使用js原生操作ajax的方式，先感受一下，在新版的js中提供了更便捷的操作方式，我们后面再介绍。通常情况下在一个系统中的用户的登录名是唯一的，为了保证用户名的唯一性，需要在用户注册时添加校验，即根据用户输入的用户名去数据库中查找，这里使用ajax校验用户名可以很好的提升用户体验，用户输入完用户名失去鼠标焦点后通过ajax去数据库中查找是否唯一，然后根据结果给用户相应的提示信息，这样对于用户来说非常方便。
我们这次实例 就写死某个值啊 因为呢 我们不打算采用数据库 ，我们懂原理即可！、
【此次采用 JSP + SERVLET 】
开始之前先重点讲一下 原生AJAX的流程：
因为自己也是在第一次写的时候吃了很多苦头：
1.原生的 Ajax 主要就是使用 XmlHttpRequest 对象来完成请求的操作，该对象在主流浏览器中均存在（除早起的IE），Ajax首次出现 IE5.5 中存在（ActiveX控件），所以一定要用教科书式的注册方法来注册：
//这是XMLHttpReuquest对象无部使用中最复杂的一步
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码
2.确认XMLHTtpRequest对象创建成功 这些小细节要做到位！ 才可以让自己养成好习惯！
if (!XHR) {
alert("XMLHttpRequest对象创建失败!!");
return;
}
3. 设置连接信息 记住异步和同步很重要！ send的发送和他有关：
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
//POST方式请求的代码
//xmlhttp.open("POST","/servlet/ajaxServer",true);
//POST方式需要自己设置http的请求头
//xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
//xmlhttp.send("name=" + userName);
4.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器段数据回来后才执行完
//异步方式下，send这句话会立即完成执行
！！！ 注意！ 是否异步关乎到发送是否立即发送还是等有数据回来再发送！！！
5.回调函数
//当send执行完（发送完） 且 服务端返回了数据，才会执行回调函数！ 所以！ 我们一定要在里面做判断、接受操作 是最合适的：
判断对象的状态是交互完成 代码：4
判断http的交互是否成功 代码： 200
responseText 是返回的内容
这5个基本是流程 -- 第一次吃了不少苦头... 参照于 博客园 --Ruthless 。
然后你就可以写实例了：
前台: JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <input type="text" value="" name="user" placeholder="请输入用户名:" /> <p></p> <script> //先创建一个获取XHR的函数 function GetXHR() { var XHR; if (window.XMLHttpRequest) { XHR = new XMLHttpRequest(); } else { XHR = new ActiveXObject("Microsoft.XMLHTTP"); } return XHR; } //分别获取： var xhr = GetXHR(); var user = document.getElementsByName('user')[0]; var tips = document.getElementsByTagName('p')[0]; xhr.onreadystatechange = ajaxfun; //这个注册回调函数 ，别+括号 if(!xhr){ alert("获取XMLHTTPREQUEST 失败！请联系管理员·"); } user.onblur = function(){ if(this.value == ""){ return; } //初始化发送数据 xhr.open("GET","${pageContext.request.contextPath}/regist?user=" + user.value,true); //然后发送 因为GET请求无携带 所以这个String的参数设置为null： xhr.send(null); } //写回调函数： function ajaxfun(){ //接下来各种判断： if(xhr.readyState == 4 && xhr.status == 200){ tips.innerHTML = xhr.responseText; } } </script> </body> </html>
后台：Servlet：
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * 后台判断数据 */ public class regist extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); String user = request.getParameter("user"); PrintWriter out = response.getWriter(); //判断后返回数据 if(user.equals("wzq")) { out.print("NO! 对不起，" + user + "已存在！请您换个用户注册！"); }else { out.print("OK! 这个用户名可以注册！"); } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }