表单注册验证用户名是否重复——Ajax学习手记

最近由于备课的需要对Ajax来了兴趣，虽然不确定这样的兴趣可以维持多久，不过还是兴致勃勃开始写学习笔记，先通过一个最简单的实例，来了解一下Ajax。

大家在社区注册用户时都见过这样的效果，填写用户名后，可以立刻验证此用户名是否已被使用。

 

需准备的程序：

（1）reg.html注册填写页面

（2）reg.asp将注册信息写入数据库的程序（本例中只写入用户名）

（3）check.asp用于审核填写的用户名是否已存在

 

使用XMLHttpRequest的步骤：

• 创建一个XMLHttpRequest对象
• 指定HTTP请求并向Web服务器提交
• 同步或异步地获取服务器响应

（1）创建XMLHttpRequest请求对象

在Internet Explorer中创建XMLHttpRequest的过程和其他平台不同，但是使用该对象的API一旦创建，在所有的平台上都是相同的。

大多数浏览器中，可通过一个简单的构造函数来创建：

xmlHttp = new XMLHttpRequest();

在IE7之前，IE没有本地的XMLHttpRequest（）构造函数，在IE5和IE6中，该对象是ActiveX对象，必须把对象名传递给ActiveXObject()构造函数才能创建它

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");

在Microsoft XML HTTP库的不同发布版本中，该对象的名字不同，根据用户机上安装的苦，可能有如下变化：

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

 

完整的创建函数：

if (window.XMLHttpRequest)
   {
       xmlHttp = new XMLHttpRequest();
   } 
   else if (window.ActiveXObject)
   {
       try
       {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");
         }
       catch (e)
       {
                try
                {
                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } 
                catch(e)
                {
                     newsstring = "对不起，您的浏览器不支持XMLHttpRequest对象！";}
          }  
   }

 

（2）提交一个请求：

调用open()方法指定所请求的URL以及该请求的HTTP方法。大多数的HTTP请求都是用Get方法完成的，该方法只下载该URL的内容。

另一个方法是POST，是大多数HTML表单所使用的方法，它允许指定的变量的值作为请求的一部分。

xmlHttp.open("get", url, true);

其中，第3个参数为False时，函数同步获取服务器响应，为True时，异步获取服务器响应。默认为True。

 

HEAD是另一个HTTP方法，它要求服务器只返回和该URL关联的头部，这就允许脚本只检查文档的数据修改，而不用下载文档内容本身，例如：

xmlHttp.setRequestHeader("If-Modified-Since","0");

 

在创建了请求对象后，调用open()方法，并设置头部，吧请求发给服务器

xmlHttp.send(null);

send()函数的参数是请求体，对于HTTP GET请求，参数总为null，对于POST请求，它包含要发送给服务器的表单数据。

 

（3）获取同步响应

如果把False作为open()的第三个参数，send()方法是同步的，它会阻塞而不会返回，直到服务器响应到达为止。可以使用请求对象的status属性来检查服务器所发返回的HTTP状态码：

• 404 ：指定的页面不存在
• 200 ：正确响应
• 500 ：服务器端发生错误

（4）处理异步响应

如果open()方法的第三个参数为True，send()方法向服务器发出请求后立即返回，当服务器响应到达，它通过XMLHttpRequest对象的onreadystatechange属性控制，只要onready发生改变，事件函数就会被调用。

readystate有5个值：

0 ：open()还没有调用；

1 ：open()已调用，但send()还没有调用；

2 ：send()已调用，但服务器还没有响应；

3 ：正在从服务器接收数据；

4 ：服务器响应完成。

 

完整函数：

function callServer() {
  var username = document.getElementByIdx("username").value;
  var url = "check.asp?name=" + escape(username);
  xmlHttp.open("GET", url, true);
  xmlHttp.onreadystatechange = function{
  if (xmlHttp.readyState < 4) {
 test1.innerHTML="loading...";
  }
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
 test1.innerHTML=response;
  }
  if (test1.innerHTML=="此用户名已经被使用！"){
 document.form1.submit.disabled=true}else{
 document.form1.submit.disabled=false
  }
}

  xmlHttp.send(null); 
}

 

表单部分：

<form name="form1" action="reg.asp" method="post" >
用户名: <input type="text" name="username" id="username" onChange="callServer();" />
 <span id="test1">请输入用户名</span><br>
 <input type="submit" name="submit" value="注册" />
</form>

 

check.asp审核程序实现：

<!--#include file="conn.asp"-->
<%
name=request.querystring("name")
Set rs = Server.CreateObject ("ADODB.Recordset")
sql = "Select * from userlist where username='"&name&"'"
rs.Open sql,conn,1,1
if not rs.EOF then
 response.write("此用户名已经被使用！")
else
 response.write("恭喜您，用户名可以注册！")
end if
%>

 

reg.asp将用户名写入数据库的部分略