龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Jsp编程 >

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

时间:2009-12-21 11:47来源:未知 作者:admin 点击:
分享到:
ajax是个好东西,本文简单介绍ajax+jsp实现用户名验证的方法。 html页面: html titleAJAX实例:对用户名的校验/title !-- 引入verify.js -- script type="text/javascript" src="verify.js"/script body !-- AJAX方式下

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

html页面:

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

<!-- 引入verify.js -->
<script type="text/javascript" src="verify.js"></script>

<body>
   <!-- AJAX方式下不需要用表单来提交数据,因此不用写表单标签 -->
   <!-- AJAX方式不需要name属性,需要id属性 -->
   输入用户名后,当光标离开用户名输入框,即响应onblur事件。
   用户名:<input type="text" id="username" onblur="verify()"/>
   密   码:<input type="text" id="password"/>
  
   <!-- 这个div用来存入服务器返回的信息,开始为空 -->
   <!-- id属性定义是为了利用dom的方式找到一个节点进行操作 -->
   <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);
   
}


精彩图集

赞助商链接