AJAX注册
Ajax编写用户注册实例及技术分析2009-01-04 16:46我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，
然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，
用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，
不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。当服务器信息返回的时候，会自动在面页相应位置显示返回信息，
不必刷新页面，相当于局部刷新的效果。

　　下面我们来看代码吧。

　　HTML页面的完整代码如下：

<%@page language="java" contentType="text/html;charset=GBK"%>
<script language="javascript" type="text/javascript">
<!--
/**//**Ajax 开始 by Alpha 2005-12-31*/

var http = getHTTPObject();

function handleHttpResponse()
{
　if(http.readyState == 4)
   {
　    if(http.status == 200)
      {
　　       var xmlDocument = http.responseXML;
　　　     if(http.responseText!="")
           {
　　　　    document.getElementById("showStr").style.display = "";
　　　　　 document.getElementById("userName").style.background= "#FF0000";
　　　　　 document.getElementById("showStr").innerText = http.responseText;
　　　     }
           else
           {
　　　　   document.getElementById("userName").style.background= "#FFFFFF";
　　　　   document.getElementById("showStr").style.display = "none";
　　　     }

　　}
　　else
     {
　　　alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
　　　alert(http.status);
　　}
　}
}

function handleHttpResponse1()
{
if(http.readyState == 4)
{
　　if(http.status == 200)
     {
　　　var xmlDocument = http.responseXML;
　　　if(http.responseText!="")
       {
　　　　document.getElementById("comNmStr").style.display = "";
　　　　document.getElementById("comNm").style.background= "#FF0000";
　　　　document.getElementById("comNmStr").innerText = http.responseText;
　　　}
       else
       {
　　　　document.getElementById("comNm").style.background= "#FFFFFF";
　　　　document.getElementById("comNmStr").style.display = "none";
　　　}

　　}
　　else
     {
　　　alert("你所请求的页面发生异常，可能会影响你浏览该页的信息！");
　　　alert(http.status);
　　}
　}
}

function chkUser()
{
　var url = "/chkUserAndCom";
　var name = document.getElementById("userName").value;
　url += ("&userName="+name+"&oprate=chkUser");
　http.open("GET",url,true);
　http.onreadystatechange = handleHttpResponse;
　http.send(null);
　return ;
}
function chkComNm()
{
　var url = "/chkUserAndCom";
　var name = document.getElementById("comNm").value;
　url += ("&comName="+name+"&oprate=chkCom");
　http.open("GET",url,true);
　http.onreadystatechange = handleHttpResponse1;
　http.send(null);
　return ;
}

//该函数可以创建我们需要的XMLHttpRequest对象
function getHTTPObject()
{
　var xmlhttp = false;
　if(window.XMLHttpRequest)
   {
　　xmlhttp = new XMLHttpRequest();
　　if(xmlhttp.overrideMimeType)
     {
　　　xmlhttp.overrideMimeType('text/xml');
　　}
　}
　else
   {
　　try
     {
　　xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
　　}
    catch(e)
    {
　　　try
       {
　　　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
　　　}