jQuery实现的Ajax 验证用户名是否存在源码

1、请求页面AJax.aspx 

HTML代码 

<code class="language-html"><div> 
<input id="txtName" type="text"><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();"> 
<div id="showResult" style="float:left">div> 
div> 

<p> </p>

<p>JS代码 </p>

<pre class="brush:php;toolbar:false">
<code class="language-javascript"><script type="text/javascript" src="CSS/jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
function JudgeUserName() 
{ 
$.ajax({ 
type:"GET", 
url:"AjaxUserInfoModify.aspx", 
dataType:"html", 
data:"userName="+$("#txtName").val(), 
beforeSend:function(XMLHttpRequest) 
{ 
$("#showResult").text("正在查询"); 
//Pause(this,100000); 
}, 
success:function(msg) 
{ 
$("#showResult").html(msg); 
$("#showResult").css("color","red"); 
}, 
complete:function(XMLHttpRequest,textStatus) 
{ 
//隐藏正在查询图片 
}, 
error:function() 
{ 
//错误处理 
} 
}); 
} 
</script> </code>

 

2 、页面AjaxUserInfoModify.aspx 

后台代码 

<code class="language-cs">protected void Page_Load(object sender, EventArgs e) 
{ 
string userName = Request.QueryString["userName"].ToString (); 
if (userName == "James Hao") 
{ 
Response.Write ("用户名已经存在！"); 
} 
else 
{ 
Response.Write ("您可以使用此用户名！"); 
} 
} </code>