• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax——异步检查用户名是否存在示例
    在任何网站注册用户的时候,都会检查用户是否已经存在。很久以前的处理方式是将所有数据提交到服务器端进行验证,很显然这种方式的用户体验很不好;后来有了Ajax,有了异步交互,当用户输完用户名继续填写其他信息的时候,Ajax就将信息发到了服务器去检查该用户名是否已经被注册了,这样如果用户名已经存在,不用等用户将所有数据都提交就可以给出提示。采用这种方式大大改善了用户体验。
    regist.jsp
    复制代码 代码如下:

    %@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    html>
    head>
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    title>Insert title here/title>
    script type="text/javascript">
    var xmlHttp;
    //创建Ajax核心对象XMLHttpRequest
    function createXMLHttp(){
    if(window.XMLHttpRequest){
    xmlHttp = new XMLHttpRequest();
    }else{
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    }
    function checkUsername(username){
    createXMLHttp();

    //设置请求方式为GET,设置请求的URL,设置为异步提交
    xmlHttp.open("GET","CheckServlet?username="+username,true);

    //将方法地址复制给onreadystatechange属性
    //类似于电话号码
    xmlHttp.onreadystatechange = checkUsernameCallback();
    //将设置信息发送到Ajax引擎
    xmlHttp.send(null);
    }
    function checkUsernameCallback(){
    //Ajax引擎状态为成功
    if(xmlHttp.readyState == 4){
    //HTTP协议状态为成功
    if(xmlHttp.status == 200){
    var text = xmlHttp.responseText;
    if(text == "true"){
    document.getElementById("msg").innerHTML = "此用户名已存在,无法使用!";
    }else{
    document.getElementById("msg").innerHTML = "此用户名可以使用";
    }
    }
    }
    }
    /script>
    /head>
    body>
    form action="regist.jsp" method="post">
    用户名:input type="text" name="username" onblur="checkUsername(this.value)">span id="msg">/span>br/>
    密nbsp;nbsp;码:input type="password" name="password">br/>
    input type="submit" value="注册">
    input type="reset" value="重置">
    /form>
    /body>
    /html>

    CheckServlet.java
    复制代码 代码如下:

    public class CheckServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    public static final String DBDRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
    public static final String DBURL = "jdbc:sqlserver://localhost:1433;DatabaseName=bbs";
    public static final String DBUSER = "sa";
    public static final String DBPASS = "pass";

    public CheckServlet() {
    super();
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    this.doPost(request, response);
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html");
    Connection conn = null;
    PreparedStatement pst = null;
    ResultSet rs = null;
    PrintWriter out = response.getWriter();
    String username = request.getParameter("usernaem");
    try{
    Class.forName(DBDRIVER);
    conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS);
    String sql = "select count(username) from user where username=?";
    pst = conn.prepareStatement(sql);
    pst.setString(1,username);
    rs = pst.executeQuery();
    if(rs.next()){
    if(rs.getInt(1)>0){//用户名已经存在了
    out.print("true");
    }else{
    out.print("false");
    }

    }
    }catch(Exception e){
    e.printStackTrace();
    }finally{
    try{
    conn.close();
    }catch(Exception e){
    e.printStackTrace();
    }
    }
    }
    }
    您可能感兴趣的文章:
    • Ajax异步提交表单数据的说明及方法实例
    • jquery ajax同步异步的执行最终解决方案
    • Ajax异步无刷新对局部数据更新
    • ajax异步刷新实现更新数据库
    • jquery ajax 同步异步的执行 return值不能取得的解决方案
    • 详谈 Jquery Ajax异步处理Json数据.
    • ajax 同步请求和异步请求的差异分析
    • AJAX下的请求方式以及同步异步的区别小结
    • jquery ajax 同步异步的执行示例代码
    • Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
    • js+AJAX异步从优酷专辑中采集所有视频及信息
    • ajax 同步和异步XMLHTTP代码分析
    • Ajax 对象 包含post和get两种异步传输方式
    • Ajax异步(请求)提交类 支持跨域
    上一篇:使用jquery 的ajax调用总是错误亲测的解决方法
    下一篇:浅析AJAX乱码及错误解决方案
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax——异步检查用户名是否存在示例 Ajax,异步,检查,用,户名,