首 页 网络编程
网页制作 图形图象 操作系统 冲浪宝典
软件教学 认证考试

网络安全 网络办公 行业资讯 评测对比
您当前位置:站长天空 -> 网络编程-> XML教程
用XMLHTTPRequest对象进行客户端验证-ASP教程,XML相关
作者:网友供稿 点击:33
推荐
西部数码-全国虚拟主机10强!20余项虚拟主机管理功能,全国领先!第6代双线路虚拟主机,南北访问畅通无阻!可在线rar解压,自动数据恢复设置虚拟目录等.免费赠送访问统计,企业邮局.Cn域名注册10元/年,自助建站480元起,免费试用7天,满意再付款!P4主机租用799元/月.月付免压金
站内搜索
文章页数:[1] 
表单验证是web开发中经常遇到的问题,我们以前常见的做法是:在客户端对表单域进行内容的检查,看是否是满足一定的要求或满足一定的结构,比如:是内容否为空或是否按规定的格式填写了内容等。其实,我们还可以进行更进一步的验证,比如对数据进行实时验证,下面,我们就利用微软提供的xmlhttprequest组件来进一步提高表单的验证能力。

在win32平台上进行http编程的方式很多,vb和c++程序员可以使用wininet库,vb6程序员也可以用vb6自带的internet控件。然而,对asp程序员来是说,实现这样的功能更是简单,我们可以做一个组件进行包装。大多说人会认为http只是浏览器和服务器进行通讯的协议,就这方面而言,它确实是功能强大的协议。http还可以用来在任意应用程序之间或应用程序和组件之间进行通讯,也不必是浏览器或服务器。作为web开发人员,我们都对http的好处很熟悉了,如跨防火墙,基于internet标准等。

微软公司在它提供的xml工具包里包括了xmlhttprequest组件,因此,xml文档也可以通过标准的http协议在internet上到处传送,当利用http协议传送xml格式的文档时,xmlhttprequest组件的方便之处就是,你不必对这些xml进行处理,我们也只需要写简单的几行代码就可以可以得到结果,因此,对web开发人员来说,xmlhttprequest组件是一个强有力的工具。

xmlhttprequest组件是msxml的一部分,当你安装了ie5.0以上版本的浏览器后,就可以使用该组件功能了。xmlhttprequest的核心对象就是xmlhttp,xmlhttprequest对象有几种不同的版本,微软的msxml包中都有相应的提供,可以到微软的站点去下载最新的版本。 xmlhttp对象提供了许多方便的方法和属性来实现浏览器的通讯功能。要使用xmlhttp对象,首先必须创建一个xmlhttp对象,然后调用open方法去和你指定的url进行通讯,然后调用send方法发送请求。这个对象扮演的就象浏览器的角色,然后从responsetext属性中到返回的数据。另外还可以设置同步或异步方式调用。

下面,我们就以一个实际的例子来看看如何利用xmlhttp来实时进行表单数据的校验。

假定你要在你的网站上进行用户的注册,其中有一个字段叫做“user id”,这个字段要求必须是唯一的,当然用电子邮件可以确保唯一性,但如果用户没有电子邮件呢?因此,我们就要求当用户注册时,能随时检查用户输入的“user id”是否已经存在。如果存在,就必须立刻通知用户重新进行填写。我们通常的做法是先提交表单,然后才能知道该“user id”是否已经存在了。显然,这种办法并不是最好的,为了知道是否存在该值,我们得不停地进行表单的提交,也意味着得多次与服务器打交道。最理想的办法就是当用户刚刚输入完“user id”后就能够知道是否存在该值是否已经存在。用javascript和xmlhttp就能够实现这样的需求。

假定有以下的注册页面:

注册页面中关于“user id”的html代码可能是下面的样子:

<input type="text" name="userid" onblur="validateuserid(this.value);">

当用户输入完“user id”的值焦点移出该输入框后,就会触发 onblur事件,当然,如果你不喜欢用onblur事件的话,也可以用按钮的onclick事件来做同样的事情。下面就是文本输入框失去焦点后所执行的脚本:

<script language="javascript">
function validateuserid(suserid)
{
// 改变鼠标形状为等待状态,因为考虑到网络速度和服务器的负荷,可能要两、三秒钟才能返回结果,这样可以给用户一个运行状态提示,当然,我们还可以用dhtml做出更友好的界面来。
document.body.style.cursor=wait;

// 创建一个xmlhttprequest对象的实例,当然,根据版本的不同,你还可以写成:
// var oxmlhttp = new activexobject("msxml2.xmlhttp");
var oxmlhttp = new activexobject("microsoft.xmlhttp");

// 我们要请求的asp页面,由于我们的请求是在客户端进行,因此,我们必须用绝对地址。
var surl = "http://servername/virturedirectory/validateuser.asp?username=" + suserid

// 准备发送请求。xmlhttp的请求方法有多种:比如post,head,put等,第3个参数表明请求是否是异步的。
// 这里是采用同步的方式。设为false,表明:我们在进行下面的工作之前,一直等待返回结果。
// open方法还有两个参数,对要求用户名和密码的站点提供用户名和密码。
oxmlhttp.open("get", surl, false);

// 发送请求
oxmlhttp.send();

// 根据返回的结果来告诉用户是否已经存在该 “user id”
if (oxmlhttp.responsetext == "exists")
alert("真抱歉: user id " + suserid + "已经存在了,请另换一个吧。");

document.body.style.cursor=auto;
}
</script>

如果“user id”在数据库中已经存在的话,将返回“exists”,当然,你也可以任意修改返回的值。下面,我们看看如何写我们的asp页面:

<%
dim objconn, objrs, suserid

取得传送来的“user id”
suserid = replace(trim(request.querystring("userid")),"","")

建立数据库的连接,并执行查询,看是否有该 “user id”存在
set objconn = server.createobject("adodb.connection")
objconn.open connectionstring
ssql = "select userid from usertable where userid = " + suserid + ""
set objrs = objconn.execute(ssql)

如果存在就输出 “exists”
if not objrs.eof then response.write "exists"

释放对象
objrs.close
objconn.close
set objrs = nothing
set objconn = nothing
%>

做为测试,如果的计算机或测试环境没有数据库,你也这样写进行简单的测试:

<%

suserid = replace(trim(request.querystring("userid")),"","")
if suserid = "aaa" then response.write "exists"

%>

如果服务器正常工作,上面的代码将很快被返回,但如果服务器当机了,我们是不是要无限等待下去?我们还必须进行错误处理和超时处理。xmlhttp对象的open方法里,我们采用异步的方式,这样,当请求发送后,程序可以继续往下执行,我们通过检查状态来得到是否成功。xmlhttp对象在不同的阶段有不同的状态值:

0:uninitialized,xmlhttp对象已经创建,但还没有初始化(open方法还没有调用)
1:loading,xmlhttp对象已经创建,但send方法还没有调用。
2:loaded,send方法已经调用,,并且状态值和响应头信息都可以得到,但是还没有返回response信息。
3:interactive,部分数据已经返回,可以通过responsebody和responsetext得到部分数据。
4:completed,所有的数据都已经返回。

下面就是更新后的全部源代码:

<div id="divprogress" align="center">正在进行验证,请等待……</div>
<form name="form1" method="post" action="">
<table border="1" cellspacing="1" cellpadding="0" bordercolor="#0066ff" align="center" style="font-size:9pt">
<tr>
<td width="88"><b>姓名:</b></td>
<td width="200">
<input type="text" name="firstname" style="border:1px solid red;width:100%">
</td>
</tr>
<tr>
<td><b>电子邮件:</b></td>
<td><input type="text" name="email" style="border:1px solid red;width:100%"></td>
</tr>
<tr>
<td><b>用户id:</b></td>
<td><input type="text" name="userid" onblur="validateuserid(this.value)" style="border:1px solid red;width:100%"></td>
</tr>
<tr>
<td><b>密码:</b></td>
<td><input type="text" name="pwd" style="border:1px solid red;width:100%"></td>
</tr>
</table>
<p align="center">
<input type="submit" name="submit" value="我要注册" style="font-size:9pt">
<input type="reset" name="submit2" value="重新填写" style="font-size:9pt">
</p>
</form>
<script language="javascript">
var userid, oxmlhttp;
function validateuserid(suserid)
{
oxmlhttp = new activexobject("microsoft.xmlhttp");
userid = suserid;
// 这里是用孟宪会的机器进行测试,你可以改成别的网站进行测试。
var surl = "http://mengxianhui/asp/validateuser.asp?userid=" + userid;
oxmlhttp.onreadystatechange = managestatechange;
oxmlhttp.open("get", surl, true);
try{
oxmlhttp.send();
}
catch(e)
{
alert("此时无法进行验证。");
document.form1.firstname.focus();
}
}

function managestatechange(){
switch(oxmlhttp.readystate)
{
case 2, 3:
document.all("divprogress").style.display = "block";
break;
case 4:
if(oxmlhttp.responsetext == "exists")
alert("很抱歉! user id : " + userid + "已经存在。");
document.all("divprogress").style.display = "none";
break;
}
}
document.all("divprogress").style.display = "none";
</script>

值得说明的是:还有另外一个组件叫“serverxmlhttp”,顾名思义,这个组件更比较适合于用在服务器端,而且适合用于有用户验证的情况。更多信息请参照微软的xml sdk。
文章整理:站长天空 网址:http://www.z6688.com/
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

文章页数:[1] 


放大字体显示 缩小字体显示 打印文章 推荐给朋友
热门文章
·使用c#如何读取xml文件-.NET教程,XML应用
·利用XMLHTTP无刷新添加数据之Post篇.-ASP教程,XML相关
·VB下如何编写CRC校验程序-.NET教程,VB.Net语言
·Java编程中更新XML文档的常用方法-JSP教程,Java与XML
·JavaScript中获得地址栏参数QueryString-JSP教程,Java技巧及代码
·ASP.NET 2.0中将 GridView 导出到 Excel 文件中-.NET教程,数据库应用
·在red hat linux 10下安装 eclipse 3-JSP教程,Java技巧及代码
·WinCE 5.0边做边学(3)-.NET教程,评论及其它
·用Fireworks制作Logo心得体会-网页设计,Fireworks
·Cookies,SSL,httpclient的多线程处理,HTTP方法-PHP教程,PHP应用
最新文章
·google adsense 2007巡讲大会郑州站总结_网赚技巧
·起点小说网推出小说内容联盟_网赚技巧
·oblog站长访谈系列②:vv博客林林_站长访谈
·学习dreamweaver8了解掌握css层叠样式表_dreamweaver教程
·搞行业网站必须走出去!_站长心得
·网页设计的艺术处理原则_站长心得
·建站常识:如何使用ftp连接虚拟主机?_站长心得
·google rank_google推广
·如何在搜寻结果名中名列前茅_google推广
·几个知名英文搜索引擎的优劣比较_seo网站优化
相关主题
  • 用xmlhttp和java session监听改善站内消息系统_javascript教程
  • 用XMLHTTP做一个自己特色的Google-ASP教程,ASP应用
  • 用XMLHTTP很好的一个例子-ASP教程,XML相关
  • 用XMLHTTP Post/Get HTML页面时的中文乱码问题之完全Script解决方案-ASP教程,XML相关
  • 用xmlhttp做一个自己特色的google
  • 西部数码虚拟主机

    友情链接
    CNNIC 西部数码
    万网 自助建站
    虚拟主机 asp空间
    域名注册 域名
    域名申请 主页空间
    论坛空间 网站空间
    国际域名 虚拟空间
    空间租用 DDOS防火墙
    成都主机托管 四川主机托管
    主机租用 服务器租用
    网站目录 自助建站
    虚拟主机 网址大全
    软件下载
    自助链接
    虚拟主机资讯 特价虚拟主机
    版权申明:本站文章均来自网络,如有侵权,请联系我们,我们收到后立即删除,谢谢!
    关于我们:站长天空:专业提供最新的站长资讯、在线教程、虚拟主机权威评测、虚拟主机性能对比、网站制作教程,开发教程,站长工具。包括网页制作教程、冲浪宝典、编程参考、操作系统、软件教学、行业动态等。
    特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有。
    发表评论 打印  刷新     关闭