您的位置：首页 > Web前端 > JavaScript

简单ajax应用实例：ajax+jsp实现用户名验证

2017-04-26 14:12 771 查看

转载出处：http://blog.csdn.net/javaalpha/article/details/6559176

[c-sharp] view
plain copy

ajax是个好东西，本文简单介绍ajax+jsp实现用户名验证的方法。

html页面:

<html>

<title>AJAX实例：对用户名的校验</title>



<mce:script type="text/<a href="http://lib.csdn.net/base/javascript" class='replace_word' title="JavaScript知识库" target='_blank' style='color:#df3434; font-weight:bold;'>JavaScript</a>" src="verify.js" mce_src="verify.js"></mce:script>

<body>

   

   

   输入用户名后，当光标离开用户名输入框，即响应onblur事件。

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

   密   码：<input type="text" id="password"/>



   

   

   <div id="result"></div>



</body>



verify.js文件

//定义XMLHttpRequest对象

var xmlhttp;

function verify(){

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





    //创建XMLHttpRequest对象



    if(window.XMLHttpRequest){

      //针对FireFox,Mozillar,Opera,Safari,IE7,IE8

       xmlhttp = new XMLHttpRequest();



       //对某些特定版本的mozillar浏览器的bug进行修正

       if(xmlhttp.overrideMineType){

          xmlhttp.overrideMineType("text/xml");

       }

    }else if(window.ActiveXObject){

       //针对IE5，IE5.5，IE6



       //两个可以用于创建XMLHTTPRequest对象的控件名称。保存在一个JS数组中。

       var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];

       for(var i = 0; i<activeName.length; i++){

           //取出一个控件名进行创建，如果成功就终止循环

           try{

              xmlhttp = new ActiveXObject(activexName[i]);

              break;

           }catch(e){}

       }



    }



    if(xmlhttp){

       alert("XMLHttpRequest对象创建成功！");

       return;

    }else{

       alert("XMLHttpRequest对象创建失败！");

    }





    //注册回调函数,只写函数名，不能写括号，写括号表示调用函数。

    xmlhttp.onreadystatechange = callback;



    //设置连接信息(请求方式，请求的url,true表示异步方式交互)

    xmlhttp.open("GET","AJAXServer?name=" + username, true);



    //发送数据，开始和服务器进行交互。

    xmlhttp.send(null);





    //使用POST方式请求，需要手动设置http的请求头

    //xmlhttp.setRequestHeader("Content-Type","aplication/x-www-form-urlencoded");

    //xmlhttp.send("name=" + username);



}



//回调函数

function callback(){

   //判断对象的状态是否交互完成

   if(xmlhttp.readyState == 4){



      //判断http的交互是否成功

      if(xmlhttp.status == 200){



         //获取服务器端返回的数据（文本）

         var resbonseText = xmlhttp.responseText;



         //将数据显示在页面上

         var divNode = document.getElementById("result");



         //设置元素节点中的html内容

         divNode.innerHTML = responseText;



      }



   }

}



后台servlet程序代码：



public class AJAXServer extends HttpServlet{

    protected void doPost(httpServletRequest request, HttpServletResbonse resbonse)throws ServletException,IOException{

    doGet(request, resbonse);

    }



    protected void doGet(httpServletRequest request, HttpServletResbonse resbonse)throws ServletException,IOException{

    try{

        request.setCharacterEncoding("utf-8");

        resbonse.setContentType("text/html; charset=utf-8");

        PrintWriter out = resbonse.getWriter();

        String old = request.getParameter("name");

        if(old == null || old.length() == 0){

        out.println("用户名不能为空！");

        }else{

             String name = old;

             if(name.equals("zhangsan")){

             out.println("用户名[" + name + "]已经存在！");

             }else{

                 out.println("用户名[" + name + "]尚未存在，可以使用！");

             }

        }

    }catch(Exception e){

       e.printStackTrace();

    }



    }

}

说明：

1.onreadystatechange 请求状态改变的事件触发器（readyState变化时会调用此方法）

2.readyState有五中状态：

   readyState = 0 未初始化

   readyState = 1 表示open方法成功调用

   readyState = 2 服务器已经应答客户端请求

   readyState = 3 交互中。Http头信息已经接收，响应数据尚未接收。

   readyState = 4 数据接收完成。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航