AJAX用户名验证

来源mqney

　　１，AJAX一直不太理解，这次跟着教程（传智播客AJAX视频教程及其他网上文章）总算试验出来了一个简单的用户名验证过程。
　　２，分为四个部分。html页面部分，css文件，js文件，Servlet文件。
　　３，html部分。

<tr class="tdbg" >
  <td width="22%" align="left"><b>用户名：<br>
                              </b>User Name<BR>
  </td>
  <td width="34%" align="left">
      <input name="UserName" class="input" onFocus="f('validateusername','不能超过14个字符（7个汉字）')" onBlur="checkusername('validateusername',this)" size="30" maxLength="14">
       <font color="#FF0000">*</font>
  </td>
  <td width="44%">
      <div id="validateusername" align="left"></div>
  </td>
</tr>

这里是截出一个tr的代码，input中增加两个监听onFocus（用于选中此input时候出现此字段的提示）和onBlur（用于焦点离开时候验证所填内容），在div id="validateusername"中显示文字内容。如下图：



　　
　　４，css部分省略。
　　５，Servlet部分。

public class AJAXXMLServer extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException{
    doGet(request, response);
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
    response.setContentType("text/xml;charset=utf-8");
    PrintWriter out = response.getWriter();
    String old = request.getParameter("username");
        StringBuilder builder = new StringBuilder();
    if(old==null||old.length()==0){
        builder.append("用户名不能为空");
    }
    else{
        String name = old;
        if(name.equals("wangxingkui")){
        builder.append("<img src=/"images/wrong.jpg/" alt=/"wrong/" width=/"16/" height=/"16/"> 用户名【"+name+"】已经存在，请使用其他用户名");
        }
        else{
        builder.append("<img src=/"images/right.jpg/" alt=/"right/" width=/"16/" height=/"16/">/"");
        }
        out.println(builder.toString());
    }
    }
}

out打印出来的将会跟随response一起返回给客户端。

　　６，js部分。

<script type="text/javascript">
var xmlhttp = null;
var READY_STATE_UNINITIALIZED=0;
var READY_STATE_LOADING=1;
var READY_STATE_LOADED=2;
var READY_STATE_INTERACTIVE=3;
var READY_STATE_COMPLETE=4;
function verify(username){
//创建XMLHttpRequest对象
//需要针对IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
if ( window.XMLHttpRequest ){//如果这个对象存在
//针对FireFox，MOzillar，Opear，Safari，IE7，IE8这些浏览器
xmlhttp = new XMLHttpRequest();
//对于某些特殊浏览器回穿数据是有BUG,进行修正的代码如下
if ( xmlhttp.overrideMimeType ){
xmlhttp.overrideMimeType("text/xml");
}
} else if ( window.ActiveXObject ){  //Active控件
//针对IE5，IE5
//两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中
var activexName = ( "MSXML2.XMLHTTP" ,"Microsoft.XMLHTTP" );
//= new ActiveXObject("");
for ( var i = 0; i < activeName.length; i++ ){
//取出一个空间名进行创建，如果创建成功，种植
//如果创建失败，则抛出异常，然后可以继续循环，继续尝试创建
try {
xmlhttp = new ActiveXObject( activeName[i] );
} catch ( e ) {
}
}
}
//3.注册回调函数
//需要的是把回调函数的函数名注册个xmlhttp对象，如果加入括号就调用该函数
//，将函数的返回值注册给该对象
xmlhttp.onreadystatechange = callback;
//4.设置连接信息
//第一个参数表示http的请求方式，支持所有的请求方式，主要使用get和post
//第二个参数表示请求的URL地址，get方式请求的参数也在URL中
//第三个参数表示是采用同步还是异步方式交互，默认为true
//注：第二个参数传递的userName是在JavaScript中定义的变量不是页面中的Id
//xmlhttp.open("GET" ,"servlet/AjaxServlet?username="+userName      //, true );
//5.发送数据，开始和服务器进行交互，设置为null，get方式要传递的数据都在URL中设置了，不需 
//要单独设置。如果采用同步方式，则在此处暂停，等待从服务器端传递来信息
//异步方式下，send不会暂停，而是向下执行
//xmlhttp.send( null );
//下面是采用Post方法进行提交数据
xmlhttp.open( "POST" , "AJAXXMLServer" , true );
xmlhttp.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );
xmlhttp.send( "username=" + username );
}
//定义回调函数
function callback(){
//6.判断XMLHttpRequest交互完成，并且判断http响应是成功的，才进行接受。
if ( xmlhttp.readyState == READY_STATE_COMPLETE ){ //交互状态一共有5中从0到4，状态为4表示完成
if ( xmlhttp.status == 200 ){ //判断http的交互是否成功 ,返回代码为200，表示成功
//获取服务器端返回的数据，有两种形式
//1.存文本数据
//var domObj = xmlhttp.responseXML;
//var messageNodes = domObj.getElementByID("validatusername");
//var textNode = messageNodes[0].firstChild;
//var responseMessage = textNode.nodeValue;
var responseText = xmlhttp.responseText;
document.getElementById("validateusername").innerHTML=responseText;
//将数据显示到页面上
//通过dom的方式找到div标签将所对应的元素节点
//var divNode = document.getElementById( "result" );
//设置元素结点的html内容
//divNode.innerHTML = responseMessage;
}
else{
document.getElementById("validateusername").innerHTML="404";
}
} else{
document.getElementById("validateusername").innerHTML="<img src=/"images/ing.gif/" alt=/"ing/" width=/"16/" height=/"16/"> 正在进行验证";
}
}


function f(validatename,value){
  
   var obj = document.getElementById(validatename).innerHTML="<img src=/"images/attention.jpg/" alt=/"attention/" width=/"16/" height=/"16/"> "+value;
}

function checkusername(validatename,obj){
  var value=obj.value;
  var patn=/^[a-zA-Z]+[a-zA-Z0-9]+$/;     
  if(!patn.test(value)){
  document.getElementById(validatename).innerHTML="<img src=/"images/wrong.jpg/" alt=/"wrong/" width=/"16/" height=/"16/"> 用户名中包含非法字符。";
  return;
  }
//  if(value==null){这种情况不会发生
//  alert("-");
//  return;
//  }
  if(value==''){//空着没添
  document.getElementById(validatename).innerHTML="<img src=/"images/wrong.jpg/" alt=/"wrong/" width=/"16/" height=/"16/"> 用户名不能为空。";//alert("--");
  return;
  }
  if(value.indexOf(' ')==0){//第一位是英文空格，或者其它位包含英文空格
  document.getElementById(validatename).innerHTML="<img src=/"images/wrong.jpg/" alt=/"wrong/" width=/"16/" height=/"16/"> 第一位是英文空格，或者其它位包含英文空格。";//alert("---");
  return;
  }
  verify(value);
//这种中文空格情况包含在英文空格中
//  if(value.indexOf('　')==0||value.indexOf('　')){//第一位是中文空格，或者其它位包含中文空格
//  document.getElementById(validatename).innerHTML="第一位是中文空格，或者其它位包含中文空格。";//alert("---");
//  return;
//  }
  }
function checkpassword(validatepassword,obj){
  var value=obj.value;
  var patn=/^[a-zA-Z]+[a-zA-Z0-9]+$/; 
  if(!patn.test(value)){
  document.getElementById(validatepassword).innerHTML="<img src=/"images/wrong.jpg/" alt=/"wrong/" width=/"16/" height=/"16/"> 密码中包含非法字符。";
  return;
  }
  document.getElementById(validatepassword).innerHTML="<img src=/"images/right.jpg/" alt=/"right/" width=/"16/" height=/"16/">";
}

function checkconfirmpassword(validateconfirmpassword,obj){
  var value=obj.value;
  var patn=/^[a-zA-Z]+[a-zA-Z0-9]+$/; 
  if(!patn.test(value)){
  document.getElementById(validateconfirmpassword).innerHTML="<img src=/"images/wrong.jpg/" alt=/"wrong/" width=/"16/" height=/"16/"> 密码中包含非法字符。";
  return;
  }
//  if(){
 
//  }
}
</script>

广告： 石油新闻网 体检人网