利用AJAX实现简单的用户登录程序（处理服务端返回的文本数据）

来源：互联网发布：下载学英语软件编辑：程序博客网时间：2024/04/27 22:41

AJAX开发的基本流程

1.创建XMLHttpRequest对象

2.注册回调函数 xmlHttpRequest.onreadystatechange = processResponse

3.与服务端建立连接 xmlHttpRequest.open("GET",url,true);

4.发送请求 xmlHttpRequest.send(null);

5.处理服务端返回的结果

演示代码：

view plain
<%@ page contentType="text/html;charset=UTF-8" language="java"%>  
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()  
            + path + "/";  
%>  
<html>  
    <head>  
        <title>ajax实现用户注册</title>  
        <link href="<%=path%>/css/main.css" rel="stylesheet" type="text/css">  
        <script type="text/javascript" src="<%=path%>/js/login.js"></script>  
    </head>  
    <body vLink="#006666" link="#003366" bgColor="#E0F0F8" onload="init();">  
        <img height="33" src="enter.gif" mce_src="enter.gif" width="148">  
        <form action="login" method="post">  
            username:<input size="15" id="username" name="username" style="width:20%;height:5%"/></br>  
            password:<input type="password" id="password" name="password" size="15" style="width:20%;height:5%"/></br>  
            <input type="button" id="btn1" class="button" value="login" onclick="check('<%=basePath%>');"/>   
            <input type="button" id="btn2" class="button" value="reset" onclick="clear();"/></br>             
            <div id="div" class="div">  
            </div>  
        </form>  
    </body>  
</html>  

view plain
// 定义xmlHttpRequest对象  
var xmlHttpRequest;  
// 创建ajax请求对象  
function createXMLHttpRequest(){  
    var flag = false;  
    if(window.XMLHttpRequest){  
        xmlHttpRequest = new XMLHttpRequest();  
    }else if(window.ActiveXObject){  
        var activexs = ["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];  
        for(var i = 0;i < activexs.length;i++){  
            try{  
                xmlHttpRequest = new ActiveXObject(activexs[i]);  
                break;  
            }catch(e){  
                alert(e);  
            }  
        }  
    }else{  
    }  
    if(xmlHttpRequest){  
        flag = true;  
    }else{  
        alert("创建ajax对象失败");  
        flag = false;  
    }  
    return flag;  
}  
// 响应函数  
function processResponse(){  
    if(xmlHttpRequest.readyState==4){  
        if(xmlHttpRequest.status == 200){  
            var result = xmlHttpRequest.responseText;  
            document.getElementById("div").innerHTML = result;  
        }  
    }  
}  
// 初始化  
function init(){  
    // 设置焦点  
    document.getElementById("username").focus();  
}  
// 表单登录  
function sendRequest(url){  
    // 1.创建XMLHttpRequest对象  
    var flag = createXMLHttpRequest();  
    if(flag){  
          // 2.注册响应函数  
          xmlHttpRequest.onreadystatechange = processResponse;  
          // 3.建立连接  
          xmlHttpRequest.open("GET",url,true);  
          // 4.发送请求  
          xmlHttpRequest.send(null);  
    }else{  
        alert("创建ajax对象失败");  
    }  
}  
// 校验  
function check(basePath){  
    var username = document.getElementById("username").value;  
    var password = document.getElementById("password").value;  
    if(username == ""){  
        alert("用户名不能为空");  
        document.getElementById("username").focus();  
        return;  
    }  
    if(password == ""){  
        alert("密码不能为空");  
        document.getElementById("password").focus();  
        return;  
    }  
    // 校验通过，和后台进行异步交互  
    var url = basePath + "login?username=" + username + "&password=" + password;  
    sendRequest(url);  
}  
// 重置  
function clear(){  
    // 清空表单项  
    document.getElementById("username").value = "";  
    document.getElementById("password").value = "";  
    // 设置焦点  
    document.getElementById("username").focus();  
}  

main.css

view plain
body{  
    font-size: 10pt;  
    font-weight:bold;  
            font-family: "宋体";  
    color:  #2C2C52;  
    border: 1px solid #CCCCCC;  
}  
.button{  
    font-size: 10pt;font-weight:bold;  
    font-family: "宋体";  
    color: #FFFFFF;  
    border: 1px solid #CCCCCC;  
    background-color:#706A9B ;  
    cursor:hand;  
}  
.div{  
    color: red;  
}  

LoginServlet.java

view plain
package com.wj.base.ajax.servlet;  
  
import java.io.IOException;  
import java.io.PrintWriter;  
  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
/** 
 * 利用ajax实现用户登录 
 * @author 健 
 */  
public class LoginServlet extends HttpServlet {  
      
    /** 
     * 序列化 
     */  
    private static final long serialVersionUID = 1L;  
    /** 
     * 接收get请求类型，判断用户是否登陆成功 
     *  
     * @param request 请求 
     * @param response 响应 
     * @throws ServletException Servlet容器异常 
     * @throws IOException IO异常 
     */  
    public void doGet(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
        doPost(request, response);  
    }  
  
    /** 
     * 接收post请求类型，判断用户是否登陆成功 
     *  
     * @param request 请求 
     * @param response 响应 
     * @throws ServletException Servlet容器异常 
     * @throws IOException IO异常 
     */  
    public void doPost(HttpServletRequest request, HttpServletResponse response)  
            throws ServletException, IOException {  
  
        response.setContentType("text/html;charset=UTF-8");  
        PrintWriter out = response.getWriter();  
        String username = request.getParameter("username");  
        String password = request.getParameter("password");  
        if("wangjian".equals(username)&&"111111".equals(password)){  
            out.println("登陆成功");  
        }else{  
            out.println("登陆失败，用户名或密码错误");  
        }  
    }  
  
}  

web.xml

view plain
<?xml version="1.0" encoding="UTF-8"?>  
<web-app version="2.5" 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">  
    <servlet>  
        <servlet-name>LoginServlet</servlet-name>  
        <servlet-class>  
            com.wj.base.ajax.servlet.LoginServlet  
        </servlet-class>  
    </servlet>  
    <servlet-mapping>  
        <servlet-name>LoginServlet</servlet-name>  
        <url-pattern>/login</url-pattern>  
    </servlet-mapping>  
    <welcome-file-list>  
        <welcome-file>login.jsp</welcome-file>  
    </welcome-file-list>  
</web-app>  