使用javascript实现用户名验证
javascript是一种客户端脚本语言，它的执行是在客户端的，有时候使用javascript可以大大减少服务器的压力。下面我介绍一些如何使用javascript实现与服务器的异步交互(页面无刷新)。首先声明，使用纯javascript实现与服务器的异步交互代码复杂且不稳定，现在一般很少有人用javascript来做这个工作，一般都是采用Ajax框架，例如Jquery 代码简单，而且很稳定，使用范围广，这里我只是给大家介绍一下javascript实现异步交互的底层实现。
html页面代码：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>使用底层的XMLHttpRequest实现异步数据交互</title> <script type="text/javascript" src="jslib/XMLHttpRequest.js"></script> </head> <body> <span>使用AJax技术校验用户名！请输入您的用户名：</span><br/> <!--注意，使用AJax不需要使用表单来进行数据提交，所以不需要写表单标签--> <!--AJax应用必须要写id名--> <input type="text" id="username"/> <input type="button" id="btnCheck" value="校验" onclick="verify()"/> <!--这个div用户存放服务器返回的信息--> <div id="result"></div> </body> </html>
XMLHttpRequest.js代码如下：
//用户名校验的方法。
//这个方法将使用XMLHttpRequest对象来进行AJAX的异步数据交互
//定义一个全局的XMLHttpRequest对象
var xmlhttp;
function verify(){
//首先通过dom获取用户名
var username=document.getElementById("username").value;
//1.创建XMLHttpRequest对象
//这是XMLHttpRequest对象内部使用中最复杂的一步。
//需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码。
if(window.XmlHttpRequest){
//这对FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlhttp = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,IE5.5,IE5
//两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js数组中
//排在前面的版本较新
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0 ; i < activexName.length;i++){
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，回抛出异常，然后可以继续虚幻，继续尝试创建。
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//确认XMLHttpRequest对象创建成功 , xmlhttprequest对象创建成功时 readyState的值为0
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败");
//这里我个人发现最新版本的FireFox不能被ifelseif截获，所以为了方便FireBuy调试，手动new了一个对象，实践发现可以成功！
xmlhttp=new XMLHttpRequest();
}else{
alert(xmlhttp);
}
//2.注册回调函数
//注册回调函数时，只需要函数名，不需要括号。
//这里只需要将回调函数的函数名注册，如果加上括号，就会把执行这个方法，把函数的返回值注册。
xmlhttp.onreadystatechange = callback; //每次请求状态readystate的值改变时都会调用callback函数。
//GET方法
//3.设置连接信息
//第一个参数表示http请求方式,支持所有http请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示是否采用异步方式交互，true表示使用异步交互，false表示使用同步交互
//第四个是用户名，第五个是密码。可以不写
//xmlhttp.open("GET","AJAXService?name="+username,true); //调用open方法时，readyState的值变为1
//4.发送数据，开始和服务器端进行交互。
//如果是同步交互，send这句话会在服务器端数据回来后才执行完(中间不干事)
//如果是异步交互，send这句话会立即执行完，然后可以执行其他操作。
//xmlhttp.send(null); //括号的参数为发送的数据，我们的数据在url里，所以不要传了。 //此时readyState的值变为2
//POST方式
//使用POST方式请求的代码
xmlhttp.open("POST","AJAXService",true);
//不同的是，POST方式需要自己手动设置请求头：
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//使用POST方式发送数据,方式如下，只是将get方式传值中url的后部分内容写到send方法里。
xmlhttp.send("name="+username);
}
//回调函数 readyState的值每次被改变，callback方法都会被调用
function callback(){
//5.接收响应数据
//判断对象的状态是交互完成。 一共有五种状态 值为0-4
if(xmlhttp.readyState ==4){
//判断http的交互是否成功。成功的交互状态为200,未找到页面为404
if(xmlhttp.status == 200){
//获取服务器端返回的数据
//获取服务器输出的纯文本数据
var responseText = xmlhttp.responseText;
//将数据显示在页面上
var divnode = document.getElementById("result");
//设置元素节点的html内容
divnode.innerHTML = responseText;
}
}
//alert("此时readyState的值为："+xmlhttp.readyState);
}
后台servlet的写法：
package servlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import java.io.IOException; import java.io.PrintWriter; /** * Created by IntelliJ IDEA. * User: Administrator * Date: 2010-11-10 * Time: 23:09:49 * To change this template use File | Settings | File Templates. */ public class AJAXService extends HttpServlet { //快捷键，使用Ctrl+Alt+Space可以弹出供选择的上下文提示 //快捷键， 弹出选择覆盖方法 Alt+Insert @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //首先获取数据 String name=request.getParameter("name"); PrintWriter out=response.getWriter(); //response.setContentType("text/html;charset=gb2312"); //response.setCharacterEncoding("gb2312"); //进行逻辑运算 if(name!=null&&!"".equals(name)){ if("kj".equals(name)){ //最后一步是传数据到前台。这是和传统Servlet不同的一步。不是转到一个新的页面，而是传递运算结果给本页面。 //虽然写法一致，但是本质是不相同的，这是AJAX的实现。 out.println("the username["+name+"]is already used . please choose a new."); }else{ out.println("username["+name+"]can use"); } }else{ } out.println("用户名不能为空"); out.close(); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } }
新键一个javaweb项目，分别加入这些文件就可不熟运行，看到效果了。 总的来说，使用javascript中的核心对象XMLHttpRequest实现与服务器的异步交互就是这样的，但是这个太复杂，使用AJax的Jquery框架可以轻松实现，以后有机会给大家介绍。这里仅供有兴趣了解javascript底层实现的同僚参考。