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
  • 相关阅读:
    webpack入门
    Javascript隐式转换
    一个最小手势库的实现
    运用JS设置cookie、读取cookie、删除cookie
    不同浏览器下兼容文本两端对齐
    使用CSS3实现一个3D相册
    JavaScript 火的有点过头了,但又能火多久呢?
    强大的css3
    CSS3与页面布局学习总结
    红米手机真机调试问题记录
  • 原文地址:https://www.cnblogs.com/pecool/p/8024229.html
Copyright © 2011-2022 走看看