通过一个简单的AJAX实例，了解其大致步骤-优快云博客

ajax现在来说也不算什么新的技术了，很多程序开发中都用到了它，至于概念什么的不知道就google吧。下面通过一个简单的用户验证来了解下ajax的大致开发步骤：

index.jsp:

在<script></script>中首先创建一个XMLHttpRequest对象的变量（分IE和非IE），然后启动ajax异步通信，主要通过open建立连接，send发送请求，当然还有别的函数具体见文章尾部，最后通过回调函数得到服务器的响应。

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
  <head>
    <base href="<%=basePath%>">
    <title>验证唯一性</title>
    <script type="text/javascript">
    var xmlHttp;//定义一个用户存放XMLHttpRequest对象的变量
    //该函数用于创建一个XMLHttpRequest对象
    function createXMLHttpRequest(){
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器用activexobject对象创建
        }else if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();//非IE浏览器，用xmlhttprequest对象创建
        }
    }
    //启动AJAX异步通信
    function checkName(){
        var tempLoginName=document.all.loginName.value;
        if(tempLoginName==""){
            alert("用户名不能为空!");
            return;
        }
        createXMLHttpRequest();
        xmlHttp.onreadystatechange=processor;//指定回调函数,将状态触发器绑定到一个函数
        //**OPEN于服务器建立连接,通过POST方法向指定URL简历服务器的调用
        xmlHttp.open("POST","CheckUser?loginName="+tempLoginName);
        //发送请求
        xmlHttp.send();
    }
    //回调函数,处理状态改变
    function processor(){
        var responseContext;//定义一个变量用于存放服务器端返回的响应结果 
        if(xmlHttp.readyState==4){//请求状态为4表示成功,如果响应完成
            if(xmlHttp.status==200){//http状态200表示OK,如果返回成功
                //取出服务器的响应内容
                responseContext = xmlHttp.responseText;
                //如果注册名检查有效
                if (responseContext.indexOf("true")!=-1){
                    alert("恭喜您，该注册名有效！");
                }else{
                    alert("对不起，该注册名已被使用！");
                }
            }
        }
    }
    </script>
  </head>
  <body>
    <form action="CheckUser" method="POST">
        UserName：
        <input type="text" name="loginName" id="loginName"/>
        <input name="checkLoginName" type="button" value="用户名是否存在" onclick="checkName()"/>
    </form>
  </body>
</html>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
    xmlns="http://java.sun.com/xml/ns/j2ee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <servlet-name>CheckUser</servlet-name>
    <servlet-class>CheckUser</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>CheckUser</servlet-name>
    <url-pattern>/CheckUser</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

CheckUser.java:（这个一个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 CheckUser extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        //有以下用户存在，可以从数据库中查询出来 
        String[] logined={"admin","user","xiaoli"};
        //从客户端提交过来的用户名 
        String loginName=request.getParameter("loginName");
        //创建一个存放响应内容的字符串 
        String responseContext="true";
        for(int i=0;i<logined.length;i++){
            //遍历存在用户，和提交用户比较如存在则想用内容为false 
            if(loginName.equals(logined[i])){
                responseContext="false";
            }
        }
        out.println(responseContext);
    }
}

XMLHttpRequest 对象的方法与属性

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header")	返回指定首部的串值
open("method", "url")	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数
send(content)	向服务器发送请求
setRequestHeader("header", "value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

属性	描述
onreadystatechange	每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数
readyState	请求的状态。有5个可取值：0 = 未初始化，1 = 正在加载，2 = 已加载，3 = 交互中，4 = 完成
responseText	服务器的响应，表示为一个串
responseXML	服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status	服务器的HTTP状态码（200对应OK，404对应Not Found（未找到），等等）
statusText	HTTP状态码的相应文本（OK或Not Found（未找到）等等）