也谈ajax无刷新回调判断用户名是否存在
上一篇 / 下一篇 2008-07-04 10:47:49 / 个人分类：转载
用最底层的js+xmlhttp对象来处理异步数据，因为我觉得这样是最灵活的。
好了，费话不多说现在开始吧：
先给出一个js的ajax.js引用文件代码。
// JavaScript Document
//function HTTRequest()
HTTPRequest=function(){
var xmlhttp=null;
try{
xmlhttp=new ActiveXObject('MSXML2.XMLHTTP.4.0');
}catch(e){
try{
xmlhttp=new ActiveXObject('MSXML2.XMLHTTP.3.0');
}catch(e){
try{
xmlhttp=new ActiveXObject('MSXML2.XMLHTTP.2.6');
}catch(e){
try{
xmlhttp=new ActiveXObject('MSXML2.XMLHTTP');
}catch(e){
try{
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (E){}
}
}
}
}
}
if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
try{
xmlhttp=new XMLHttpRequest();
}catch(e){
xmlhttp=false;
}
}
return xmlhttp;
}
在aspx页面上用 CustomValidator 验证控件来完成进行回调判断。
<asp:TextBox ID="memberName" runat="server" Width="174px" MaxLength="12"></asp:TextBox>
<asp:RegularExpressionValidator ID="nameREV" runat="server" ControlToValidate="memberName" ErrorMessage="用户名必须为6-12位" EnableClientScript="true" ValidationExpression="\w{6,12}" Display="Dynamic" ValidationGroup="reg"></asp:RegularExpressionValidator><asp:RequiredFieldValidator ID="nameRFV" runat="server" EnableClientScript="true" ControlToValidate="memberName" ErrorMessage="用户名不能为空" Display="Dynamic" ValidationGroup="reg"></asp:RequiredFieldValidator><asp:CustomValidator ID="cv" runat="server" Display="Dynamic" ControlToValidate="memberName" ValidationGroup="reg" SetFocusOnError="true" ErrorMessage="用户名已存在" ClientValidationFunction="checkMember"></asp:CustomValidator>
在这里CustomValidator 控件有一个ClientValidationFunction为客户端验证方法。对应的checkMember就是验证函数的函数名。代码如下：
function checkMember(sender,args)
{
var memberName=form1.memberName.value;
var xmlhttp;
var url="callBack/callMemberName.aspx?memberName="+memberName
xmlhttp=new HTTPRequest;
xmlhttp.onreadystatechange=function(){checkBack(xmlhttp,args);};
xmlhttp.open("GET",url,false);
xmlhttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
xmlhttp.send(null);
return false;
}
function checkBack(xmlhttp,args)
{
args.IsValid=false;
if (xmlhttp.readyState==4){
if(xmlhttp.responseText=="1")
{
args.IsValid=true;
}
}
}
这断代码的向callBack/callMemberName.aspx页面发送了一个请求，如果页面请求返回的是 1 那么就验证通过。如果不为1就表示用户名已经存在。
callBack/callMemberName.aspx负责处理用户是否存在的服务器端信息。
好了，费话不多说现在开始吧：
先给出一个js的ajax.js引用文件代码。
// JavaScript Document //function HTTRequest() HTTPRequest=function(){ 
var xmlhttp=null; try{ 
xmlhttp=new ActiveXObject('MSXML2.XMLHTTP.4.0'); }catch(e){ try{ xmlhttp=new ActiveXObject('MSXML2.XMLHTTP.3.0'); }catch(e){ try{ xmlhttp=new ActiveXObject('MSXML2.XMLHTTP.2.6'); }catch(e){ try{ xmlhttp=new ActiveXObject('MSXML2.XMLHTTP'); }catch(e){ try{ xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); }catch(e){ try{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }catch (E){} } } } } } if(!xmlhttp && typeof XMLHttpRequest!='undefined'){ try{ xmlhttp=new XMLHttpRequest(); }catch(e){ xmlhttp=false; } } return xmlhttp; } <asp:TextBox ID="memberName" runat="server" Width="174px" MaxLength="12"></asp:TextBox> <asp:RegularExpressionValidator ID="nameREV" runat="server" ControlToValidate="memberName" ErrorMessage="用户名必须为6-12位" EnableClientScript="true" ValidationExpression="\w{6,12}" Display="Dynamic" ValidationGroup="reg"></asp:RegularExpressionValidator><asp:RequiredFieldValidator ID="nameRFV" runat="server" EnableClientScript="true" ControlToValidate="memberName" ErrorMessage="用户名不能为空" Display="Dynamic" ValidationGroup="reg"></asp:RequiredFieldValidator><asp:CustomValidator ID="cv" runat="server" Display="Dynamic" ControlToValidate="memberName" ValidationGroup="reg" SetFocusOnError="true" ErrorMessage="用户名已存在" ClientValidationFunction="checkMember"></asp:CustomValidator>在这里CustomValidator 控件有一个ClientValidationFunction为客户端验证方法。对应的checkMember就是验证函数的函数名。代码如下：
function checkMember(sender,args) { var memberName=form1.memberName.value; var xmlhttp; var url="callBack/callMemberName.aspx?memberName="+memberName xmlhttp=new HTTPRequest; xmlhttp.onreadystatechange=function(){checkBack(xmlhttp,args);}; xmlhttp.open("GET",url,false); xmlhttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded"); xmlhttp.send(null); return false; } function checkBack(xmlhttp,args) { args.IsValid=false; if (xmlhttp.readyState==4){ if(xmlhttp.responseText=="1") { args.IsValid=true; } } } callBack/callMemberName.aspx负责处理用户是否存在的服务器端信息。
导入论坛 引用链接 收藏 分享给好友 推荐到圈子 管理 举报
TAG:
