• 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
  • 相关阅读:
    Spring总结四:IOC和DI 注解方式
    Spring总结二:IOC(控制反转)xml方式
    Spring总结一:Srping快速入门
    TCP UDP HTTP 的关系和区别
    sql 一些偶尔会用到的写法和函数 不定时更新
    AngularJS分层开发
    AngularJS入门
    url和uri的区别
    MyBatis总结八:缓存介绍(一级缓存,二级缓存)
    Javascript 中 == 与=== 对比
  • 原文地址:https://www.cnblogs.com/pecool/p/8024229.html
Copyright © 2020-2023  润新知