转载出处:http://blog.csdn.net/javaalpha/article/details/6559176
- ajax是个好东西,本文简单介绍ajax+jsp实现用户名验证的方法。
- html页面:
- <html>
- <title>AJAX实例:对用户名的校验</title>
- <!-- 引入verify.js -->
- <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>
- <!-- AJAX方式下不需要用表单来提交数据,因此不用写表单标签 -->
- <!-- AJAX方式不需要name属性,需要id属性 -->
- 输入用户名后,当光标离开用户名输入框,即响应onblur事件。
- 用户名:<input type="text" id="username" οnblur="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);
- }
- //回调函数
- 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 数据接收完成。