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
  • 相关阅读:
    js模块化历程
    夜深
    出差(六)开会
    高情商的十大典型表现
    出差(五)调整
    HighCharts简单应用
    出差(四)适应
    出差(三)尝试
    出差(二)熟悉
    ZTree简单应用
  • 原文地址:https://www.cnblogs.com/pecool/p/8024229.html
Copyright © 2011-2022 走看看