当前位置:首页>>编程技术

AJax实现注册用户实时反馈

点击数:26461 更新时间:2014-04-06 15:20:00 来源: 昕竹轩网站设计-返回

一、javascript 方式

<script type="text/javascript">

function createXMLHttpReq() else if (window.ActiveXObject) catch(oError)

    }

  }

  throw new Error ("不能创建XMLHttpRequest对象。");

}

var oXmlHttpReq = createXMLHttpReq();

 

function sendRequest()

      oXmlHttpReq.open("POST", "checkusername.asp", true);

      // 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

 oXmlHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

      oXmlHttpReq.onreadystatechange = callback;

      oXmlHttpReq.send(sData);

      // 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据

    } catch(oErr)

 }

}

function callback()  else 

  }

}

function checkData()  else 

  if (username == "")  else 

  return status;

}

</script>


<form  method="post" name="form1" id="form1" action="javascript:alert('用户名:'+document.form1.txtUserName.value);" onsubmit="return checkData()">

  <div id="caption">注册新用户</div>

  <table border="0">

    <tr>

      <td><label for="txtUserName">用户名:</label></td>

      <td><input name="txtUserName" type="text" id="txtUserName"onblur="sendRequest();" />

        <span id="msg1"></span></td>

    </tr>

    <tr>

      <td><label for="txtPassword">密 码:</label></td>

      <td><input type="password" name="txtPassword" id="txtPassword" />

        <span id="msg2"></span></td>

    </tr>

    <tr>

      <td>&nbsp;</td>

      <td><input type="submit" name="btnReg" id="btnReg" value="提交" /></td>

    </tr>

  </table>

  

说明:
上述JavaScript脚本块中定义了4个函数:createXMLHttpReq、sendRequest、callback和checkData,
其中前3个与Ajax交互有关. 要检查表单数据,可将checkData函数作为form1表单的submit事件处理程序;
要实现Ajax交互,应将sendRequest函数作为txtUserName文本框的blur事件处理程序。
 此外,还要设置form1表单的action属性,以便对表单数据进行处理。为此,应当网页中表单和表单域
 属性进行设置。
 
二、Jquery 方式
 
  JQuery 对象 Ajax 交互操作进行了封装。如果使用jQuery来实现Ajax交互过程,只需用对JQuery
  对象调用 load 方法(或其他方法)即可。在本例中,下面的语句通过AJax方式向ASP服务器页面
  checkusername.asp 发送用户名信息,然后将服务器返回的HTTP响应文本显示在span元素中,并对
  span元素的文本颜色进行设置,真可谓毕其功于一役。
  
  $("#msg1").load("checkusername.asp",).css("color", "gray");
 
  调用load方法可加载远程HTML文件代码并插入DOM中,其中第1个参数指定要加载的HTML网页网址,
  第2个参数是可选的,用于指定要发送到服务器的key/value数据。
  如果指定了第2个参数,则自动使用post方法向服务器放松数据。

广告位
【责任编辑:CSW8923 (Top) 返回页面顶端
【必备推荐】(Top) 返回页面顶端
【精品案例】更多案例展示
【最新留言】 (Top) 返回页面顶端
共有0条评论
重要提示:
你设置的联系邮箱是*: (当有人给你留言回复之时,联系邮箱可以及时通知你)
我们建议你填写正确的邮箱地址,如果你之前填写邮箱地址是错误的可以通过 【修改资料】 来重新设置
登录 | 免费注册 | 忘记密码 | 邮箱:CSW8923@126.com     服务电话:17895923895   客服QQ:568441621 点击这里给我发消息
Copyright © 2014-2015 Htmcss.Com All Rights Reserved  版权所有昕竹轩网站设计 备案号:闽ICP备16024510号-4
关闭