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
原文地址:https://www.cnblogs.com/pecool/p/8024229.html