我们知道在注册淘宝账户时，当我们注册的账户名与其他人同名的时候，系统会自动的给出提示，并且给出推荐使用的账户名，并没有完全的刷新整个页面，而是悄悄的向服务器端发送请求进行验证，让我们感觉很舒服，这就是AJAX技术的作用，大大增加了用户体验。
我们查看源代码就可以看到客户端脚本，使用的AJAX技术。
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- headrunat="server">
- title>ajax例子--登录用户名自动检测无需再设置其他的按钮</linkhref="StyleSheet.css"rel="stylesheet"type="text/css"/>
- scripttype="text/javascript">
- //定义XMLHttpRequest对象，var是可变参数类型，代表任何一种数据类型。
- varxmlHttp=false;
- //该时候检查输入用户名数据库中是否已经存在。
- functioncheckUserName(){
- //检查输入的用户名是否为空。
- vartbUserName=document.getElementById('tbUserName');
- if(tbUserName.value=="")
- return;
- //创建XMLHttpRequest对象
- try{
- //使用较新版本的IE浏览器。
- xmlHttp=newActiveXObject("Msxml2.XMLHTTP");
- }
- catch(e){
- try{
- //如果为低版本的浏览器。
- xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
- }
- catch(e2){
- //XMLHttpRequest对象创建失败，保证Request的值仍为false。
- xmlHttp=false;
- }
- }
- //验证创建是否成功，不为ie，则为除了ie之外的谷歌360火狐等浏览器。
- if(!xmlHttp&&typeofXMLHttpRequest!='undefined'){
- xmlHttp=newXMLHttpRequest();
- }
- //转到的链接地址。
- varurl="CheckUserNameService.aspx?UserName="+tbUserName.value;
- //规定请求的类型、URL以及是否异步处理请求。Get类型，true为异步执行。
- xmlHttp.open("GET",url,true);
- //onreadystatechange.也就是XMLHttRequest对象的readyState属性改变时。当请求被发送时执行的一些响应任务。
- xmlHttp.onreadystatechange=callBack_CheckUserName;
- //Sendtherequest
- xmlHttp.send(null);
- }
- //以参数形式传递到另一个函数的函数。
- functioncallBack_CheckUserName(){
- //readyState方法是存有XMLHttpRequest状态，从0到4。
- //0是请求未初始化，1服务器连接已经建立2请求已经接受3请求处理中4请求已完成，且响应已就绪。
- if(xmlHttp.readyState==4){
- //如果服务器的响应并非是XML使用responseText否则使用responseXML。responsText返回服务器字符串形式的响应。
- varisValid=xmlHttp.responseText;
- //选择出显示验证结果的标签。
- varcheckResult=document.getElementById("checkResult");
- //innerHtml为脱去标签的的外衣。例如，span>您好>，显示您好。
- checkResult.innerHTML=(isValid=="true")?"恭喜您，这个用户名可以使用":"很抱歉该会员名已经被使用";
- }
- }
- scriptheadbodytableid="registerForm"trtdclass="title">
- 用户名
- tdinputid="tbUserName"type="text"onblur="checkUserName()"spanid="checkResult">>
- 密码
- inputid="tbPassword"type="password"/>
- tdrowspan="2"inputid="btnSubmit"type="submit"value="提交"onclick="checkUserName()"/>
- tablehtml>
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="CheckUserNameService.aspx.cs"%scriptrunat="server">
protectedvoidPage_Load(objectsender,EventArgse)
{
//得到要验证的用户名。
stringcandidateUserName=Request["UserName"];
//初始化验证标记，为false。
boolisValid=false;
//如果转换为小写字母不为tgb则返回true。
if(candidateUserName.ToLower()!="tgb")
{
isValid=true;
}
//清除缓存区所有的html输出。
Response.Clear();
//将指定字符写入HTTP输出。
Response.Write(isValid?"true":"false");
//立即发送缓存区的输出。
Response.Flush();}
>
得到的显示结果：
原文链接：https://www.f2er.com/ajax/165213.html
