AJAX学习笔记----dom+servlet实现用户名验证

最新推荐文章于 2024-09-15 19:50:10 发布

最新推荐文章于 2024-09-15 19:50:10 发布 · 144 阅读

文章标签：

#Servlet #Ajax #JavaEE #浏览器 #Web

AJAX 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的Ajax应用案例，通过Ajax实现对用户输入的用户名进行实时校验，并展示了从前端到后端完整的实现过程。

文件一 ajax.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>用户名校验</title>

文件二 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
           version="2.5">
          <servlet>
              <servlet-name>AjaxServer</servlet-name>
              <servlet-class>AjaxServer</servlet-class>
          </servlet>

    <servlet-mapping>
              <servlet-name>AjaxServer</servlet-name>
              <url-pattern>/AjaxServer</url-pattern>
    </servlet-mapping>
</web-app>

文件三 AjaxServer.java

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: czx
* Date: 2008-11-7
* Time: 11:18:29
* To change this template use File | Settings | File Templates.
*/
public class AjaxServer extends HttpServlet {
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
       doPost(httpServletRequest, httpServletResponse);    //To change body of overridden methods use File | Settings | File Templates.
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.取参数信息 2.检查参数是否有问题 3.数据校验
        // 4.和传统开发不同，把用户感兴趣的数据返回给页面而不是转向一个新页面给用户
         response.setContentType("text/html;charset=GB2312");
         PrintWriter out = response.getWriter();
         String name = request.getParameter("name");
         if(name == null || name.length() == 0){
             out.print("用户名不能为空");
         }else{
             String newName = new String(name.getBytes("ISO8859-1"));
             if(newName.equals("czx")){
                 out.println("用户名"+newName+"已存在");
             }else{
                 out.println("新用户"+newName+"，可以使用");
             }
         }
         out.println("<br><a href=\"index.html\">返回验证页面</a>");
    }
}

文件四 veryfy.js

//该方法使用XMLHttpRequest 使用基本的domAPI

var xmlReq;
function veryfy(){
    //1。使用dom方式获取文本框中的值
    //document.getElementById("name")是dom获取页面元素节点的方法
    // 一个元素节点对应HTML页面的一个标签如果<input>
    // .value。可以获得一个节点的value属性值
    var name = document.getElementById("name").value;

//2.创建XHR对象，这是XMLHttpRequest对象最复杂的一步，
// 要区分不同的浏览器，根据IE或其他浏览器，创建不同的对象

    if(window.XMLHttpRequest){
       //如果该对象成立，if条件就成立 Firfox,ie7,ie8,moziller,opera
        xmlReq = new XMLHttpRequest();
        //以下代码针对firefox的。？？？
        if(xmlReq.overrideMimeType){
             xmlReq.overrideMimeType("text/html");
        }
    }else if(window.ActiveXObject){
           //针对ie6 ie5.5 ie5
           //两个可以用于创建XMLHttpRequest对象的控件名称，保存在js数组中
          var activeName = ["Microsoft.XMLHttp","MSXML2.XMLHttp"] ;

          for(var i=0;i<activeName.length;i++){
              try{
                  //取出控件名字，创建XHR对象，如果成功，就结束，如果失败
                  //抛出异常，继续循环
                  xmlReq = new ActiveXObject(activeName[i]);
                  break;
              }catch(e){

              }
          }
    }
    if(!xmlReq){
        alert('XMLHttpRequest对象创建失败');
        return;
    }else{
      // alert(xmlReq+'4');
    }

    //2.注册回调函数 callback后不要加括号把回调函数的函数名返回给xmlReq，如果加上括号
    //就把函数返回值返回给了xmlReq　
    xmlReq.onreadystatechange = callback;

    //3.设置链接信息
    //第一个参数是请求方法，一般get post，第二个是url地址，第三个是同步还是异步，如果是false，
    //那么只有等服务器做出响应
    xmlReq.open("GET","AjaxServer?name="+name,true);
    //4.发送数据
    //数据已经在url中发送过去了，就不用再发送了，写成null。
    //如果open第三个参数是false，那么在send处停止，等待服务器响应
    //如果是true，该处不等待，代码继续往下走。
    xmlReq.send(null);
    //回调函数
    function callback(){
        //5.接受响应数据
        // 判断XHR对象状态已经交互完成。
        if(xmlReq.readyState == 4){
            //判断 Http交互是否成功
            if(xmlReq.status == 200){
                //获取服务器返回数据
                //获取服务器返回的纯文本文件
                var text = xmlReq.responseText;
                //将数据显示在页面上
                var divNode = document.getElementById("result");
                //给div节点赋值,用innerHTML
                divNode.innerHTML = text;
            }
        }
    }
}