原始ajax发起请求并反馈

最新推荐文章于 2022-01-03 09:27:52 发布

weixin_34185364

最新推荐文章于 2022-01-03 09:27:52 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tenWood/p/6261280.html

本文介绍了一个简单的用户登录验证系统实现方式，通过Ajax技术实现在用户离开输入框时即时验证用户名和密码的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用户登陆的时候，离开用户、密码输入框即进行验证：ajax发起请求进行验证的：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登陆</title>
</head>
<body>
    <form action="#" method="post">
        <input type="hidden" name="action" value="login"/>
        用户名: <input type="text" maxlength="10" name="username" id="userid" onblur="validata('user')">
                <span id="uservalidate" style="color:red"></span>
        <br><br>
        密码： <input type="password" maxlength="10" name="password" id="passwordid" onblur="validata('password')"/>
              <span id="passvalidate" style="color:red"></span>
        <br><br>
        <input type="submit" value="登陆"/>&nbsp;<input type="reset" value="重置"/>
    </form>
</body>
<script type="text/javascript">
var request;
var actionType;

//onblur的时候，发起ajax请求验证用户/密码是否正确
function validata(type){
    actionType = type;
    var url;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(type=='user'){
        actionType = 'usercheck';
        var username = document.getElementById("userid").value;
        url = "validate.jsp?action=usercheck&username=" +username;
        request.open("GET", url, true);
    }else if(type=='password'){
        actionType = 'passwordcheck';
        var password = document.getElementById("passwordid").value;
        url = "validate.jsp?action=passwordcheck&password=" +password;
        request.open("POST", url, true);
    }
    request.onreadystatechange = callback;    //当状态变化，调用callback方法 callback这里不能写参数，写了只调一次，为什么?
    request.send(null);    //sends HTTP request;body can be null;
}

//ajax返回的处理函数
function callback(){
    if(request.readyState == 4){
        if(request.status == 200){
            var msg = request.responseText;
            console.log(msg);
            if(actionType=='usercheck'){
                if(msg == "wrong"){
                    document.getElementById("uservalidate").innerText = "用户名错误！";
                }else if(msg == 'correct'){
                    document.getElementById("uservalidate").innerText = "用户名正确！";
                }
            }else if(actionType=='passwordcheck'){
                if(msg == "wrong"){
                    document.getElementById("passvalidate").innerText = "密码错误！";
                }else if(msg == 'correct'){
                    document.getElementById("passvalidate").innerText = "密码正确！";
                }
            }
        }
    }
}
</script>
</html>

后台使用validate.jsp进行简单验证模拟：

<%
    /**
    setContentType常用参数：
    text/html HTML
    text/plain TXT 
    text/xml XML 
    text/javascript json数据
    response.setContentType（“text/html;charset=UTF-8”）；
    */
    response.setContentType("text/plain;charset=utf-8"); 
    response.setHeader("Cache-Control", "no-store"); //HTTP1.1
    response.setHeader("Pragma", "no-cache"); //HTTP1.0
    response.setDateHeader("Expires", 0); //prevents catching at proxy server

    String action = request.getParameter("action");
    if(action!=null && action.equals("usercheck")){
        String username = request.getParameter("username");
        if(username!=null && !username.equals("admin")){
            response.getWriter().write("wrong");
        }else{
            response.getWriter().write("correct");
        }
    }else if(action!=null && action.equals("passwordcheck")){
        String password = request.getParameter("password");
        if(password!=null && !password.equals("admin")){
            response.getWriter().write("wrong");
        }else{
            response.getWriter().write("correct");
        }
    }
%>

页面效果：

补充知识：

XMLHttpRequest的方法：

XMLHttpRequest的属性：

有更好的例子，或者用法继续补充》》》》》》》》》》》》》》》》》

注意：上面的validate.jsp我并没有写<%@ page contentType="text/html;charset=utf8" ... %>等这个头部信息，写了之后，发现response.getWriter().write("wrong")写到客户端，console一看总是"wrong"后面多个换行符，就始终不对；研究下为什么。

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

pageEncoding是jsp文件本身的编码

contentType的charset是指服务器发送给客户端时的内容编码

不同于常规 servlet （默认的 MIME 类型为 text/plain），JSP 页面的默认 MIME 类型是 text/html （默认字符集为 ISO-8859-1）。因此，如果 JSP 页曲以 Latin 字符集输出 HTML则根本无需使用 contentType

转载于:https://www.cnblogs.com/tenWood/p/6261280.html