zoukankan      html  css  js  c++  java
  • ajax实现异步校验

    1.ajax介绍

      见过百度的搜索框吗?当你输入一个关键词,下面立马会出现一些相关的热词,这就是用ajax做到的。

    2.环境设想:

      有一个注册页面.jsp

      <span id="mess"></span>

      用户名:<input type="text" id="username" onblur="showMSG()"/>

      当你鼠标移除焦点时会触发jscript中showMSG方法,想立刻从数据库中查该用户名是否可用

    3.script中代码:

      var username;

      function showMSG(){

        //获得界面输入的用户名

        username=document.getElementById("username").value;

        //创建浏览器对象

        createXMLHttp();

        xmlHttp.onreadystatechange=function showMsgCallBack(){

          if(xmlHttp.readState==4){    //响应完成

            if(xmlHttp.status==200){  //交易成功

              document.getElementById("mess").innerHTML=xmlHttp.responseText;    //将struts servlet回写的信息写到span上

            }

          }

        };

        //请求action处理(GET方式发送,请求action路径,时间戳用以区分,获取到的输入值,true是否采用异步请求方式)

        xmlHttp.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username"+username,true);

        //发送

        xmlHttp.send(null);

      }

      function createXMLHttp(){

        //(Firefox,Opera,8.0+,safari)

        if(window.XMLHttpRequest){

          xmlHttp = new XMLHttpRequest();

        }else{

          //微软IE浏览器

          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

        }

      }

    4.Servlet中代码

      HttpServletResponse response = ServletActionContext.getResponse();

      response.getWriter().println("<font color="red">用户名已被使用</font>");

    Best Regards
  • 相关阅读:
    Linux 多线程编程 实例 1
    面试题-链表反转c实现
    information_schema.TABLES
    mongodb遇到的错误
    MySQL优化的奇技淫巧之STRAIGHT_JOIN
    mongodb安装
    XtraBackup安装
    提高mysql千万级大数据SQL查询优化30条经验(Mysql索引优化注意)
    我用 TypeScript 语言的七个月
    Grunt之添加文件监视:Grunt-watch (已备份)
  • 原文地址:https://www.cnblogs.com/pecool/p/8024229.html
Copyright © 2011-2022 走看看