index.html(主要功能是显示两个文本框,用来输入用户名和密码)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Ajax简单实例</title>
</head>
<body><script src=comm.js></script>
用户名:
<input type=text name=username οnblur="checkName(this.value)" value=""><span id="txtUser"></span><br/>
密 码:
<input type=password name=password value=""><br/>
<input type="button" οnclick="addpost()" value="提交" />
<div id="messager"></div>
</body>
</html>
comm.js(主要的Ajax技术,请注意里面的大小写)
if(window.XMLHttpRequest){//IE
ajax=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
function loading(divnamestr){
errhtml="加载失败,请重新再试"
okhtml="数据正在处理中"
if(ajax.readyState==4){
if(ajax.status==200) {
document.getElementById(""+divnamestr+"").innerHTML=okhtml;
}else{
document.getElementById(""+divnamestr+"").innerHTML=errhtml;
return false;
}
}
}
//检查用户名是否重复
function checkName(username){
var strurl="username="+username;
ajax.open("POST","checkAsp.asp",false);
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send (strurl);//提交发送
ajax.onreadystatechange=function(){loading("txtUser");}// 处理返回信息的函数
document.getElementById("txtUser").innerHTML=unescape(ajax.responseText);//返回ASP执行回的信息
}
//添加用户
function addpost(){
document.getElementById("messager").innerHTML="请稍后"; //
var strusername=document.getElementById("username").value;//取出username表单里的值
var strpassword=document.getElementById("password").value;//取出password表单里的值
var strurl="username="+escape(strusername)+"&password="+escape(strpassword)+"&time="+new Date().getTime();
//定义提交的数据,为了防止被缓存,后面加上时间,这样提交的URL才会是唯一的。为了防止出现乱码,用escape把他编码转换。到ASP中再用unescape
ajax.open ("POST","save.asp",false); //以POST的方式提交,一定要大写,不然在FOXIE下无法认证,save.asp是处理的程序,false这个是同步提交
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//
ajax.send (strurl);//提交发送
ajax.onreadystatechange=function(){loading("messager");}// 处理返回信息的函数
document.getElementById("messager").innerHTML=unescape(ajax.responseText);//返回ASP执行回的信息
}
checkAsp.asp(用来检查用户名是否重复)
<!--#include file="conn.asp"-->
<%
dim username
dim repeatName
dim html
username=unescape(request("username"))'将编译后的信息转回来
repeatName=false
set rs=server.CreateObject("adodb.recordset")
sql="select * from table_user where loginname='"&username&"'"
rs.open sql,conn,1,1
do while not rs.eof
repeatName=true
rs.movenext
loop
if(repeatName) then
html="<span style='color:red;'>此用户已经注册!</span>"
else
html="<span style='color:green;'>此用户名可以使用!</span>"
end if
response.Write (escape(html))
rs.close
set rs=nothing
%>
save.asp(用来保存用户和密码信息)
<!--#include file="conn.asp"-->
<%
dim username,password '定义变量
on error resume next '容错处理
username=unescape(request("username"))'将编译后的信息转回来
password=unescape(request("password"))
set rs=server.CreateObject("adodb.recordset")
sql="select top 1 * from table_user order by id desc"
rs.open sql,conn,1,3
rs.addnew
rs("loginname")=username
rs("pwd")=password
rs.update
rs.close
if error then '当处理失败时
html="添加失败"
else '相反也就是成功后
html="添加成功"
end if
response.write escape(html) '输出处理后的信息,并将他转换成编码,在JS用unescape
%>
conn.asp(字符串连接字符)
<%
dim p1
dim conn
Provider = "Provider=Microsoft.Jet.OLEDB.4.0;"
Path = "Data Source=" & Server.MapPath("Database.mdb")
Set conn= Server.CreateObject("ADODB.Connection")
p1=Provider&Path
conn.Open p1
%>
table_user(数据库名称,基于access)
字段 loginname 文本类型
pwd 文本类型