用XMLHTTPRequest对象进行客户端验证

表单验证是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>

用XMLHTTPRequest对象进行客户端验证

时间: 2024-10-10 23:58:21

用XMLHTTPRequest对象进行客户端验证的相关文章

javascript XMLHttpRequest对象全面剖析(转)

一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面.换句话说,AJAX可以使基于浏览器的应用程序更具交互性而且更类似传统型桌面应用程序. Google的G

window.XMLHttpRequest对象详解

来自:http://blog.csdn.net/lccone/article/details/7743946 window.XMLHttpRequest XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们仍然很有必要理解这个对象的详细工作机制. 一. 引言 AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接

javascript XMLHttpRequest对象全面剖析

转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程.这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器.与现代浏览器的通过存取浏览器DOM结构的编程代码(JavaScript)动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面.换句话说,AJAX可

XMLHttpRequest对象解读

<!DOCTYPE html> <html> <body> <script> function reqListener () { console.log(this); console.log(this.getAllResponseHeaders()); console.log(this.responseText); } var params = "lorem=ipsum&name=binny"; var oReq = new XM

Ajax学习(三)——XMLHttpRequest对象的五步使用法

    Ajax的核心技术是XMLHttpRequest对象,它可以在不向服务器提交整个页面的情况下,实现局部更新网页.通过这个对象,Ajax可以像桌面应用程序那样只与服务器进行数据层的交换,而不必每次都刷新界面,也不必每次将数据处理的工作都交给服务器来做.这样既减轻了服务器负担又提高了响应速度,还缩短了用户的等待时间.通常一个Ajax的实现过程有五步,下面我们以上篇博客中的小实例为例来逐步学习. 1.建立XMLHttpRequest对象. IE浏览器将XMLHttpRequest实现为一个Ac

XHR——XMLHttpRequest对象

创建XMLHttpRequest对象 与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest 不但IE6及其之前的版本将XHR作为一个ActiveXObject运行,而且还存在众多版本:一开始是Microsoft.XMLHTTP 之后变成Msxml2.XMLHTTP及更新版的Msxml3.XMLHTTP function XHR() { var xhr; try {xhr = new XM

HTTP脚本化——XMLHttpRequest对象的学习笔记

一. HTTP 请求和响应 一个HTTP请求由4部分组成 HTTP请求方法(也叫动作Verb) 正在请求的URL 一个可选的请求头集合(可能包含身份验证信息等) 一个可选的请求主体 服务器返回的HTTP响应由3部分组成 一个数字和文字组成的状态码,用来显示请求的成功和失败 一个响应头集合 响应主体 说明: XMLHttpRequest不是协议级的HTTP API而是浏览器级的API,浏览器级的API需要考虑Cookie.重定向.缓存和代理,而协议级的API只需要考虑请求和响应 XMLHttpRe

2使用XMLHttpRequest对象

在使用XMLHttpRequest对象发送请求和处理响应之前,必须先使用javascript创建一个XMLHttpRequest对象.前面已经讲解如何在IE浏览器和非IE浏览器中创建XMLHttpRequest对象. 1XMLhttpRequest对象的方法和属性 abort().停止当前请求,重新设置请求对象XMLHttpRequest的状态. getResponseHeader("String"),返回指定首部的串值 open("method","ur

【转载并整理】AJAX XmlHttpRequest对象详解

一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数据的目的是为了持续修改一个加载过的页面,XHR是Ajax设计的底层概念.XHR使用的协议不同于HTTP,不仅可以使用XML格式的数据,也支持JSON,HTML或者纯文本. WHATWG组织负责维护一个动态的XHR标准文档.W3C基于WHATWG标准创建了一个固定的规范. 历史 XMLHttpRequ