第3讲:使用ajax技术实现异步登录功能(XMLHttpRequest)

news2024/11/19 5:48:42

封装XMLHttpRequest对象,实现ajax异步登录功能;用三种不同的方法实现登录功能,

方法一:返回文本内容;

方法二:返回JSON格式数据;

方法三:使用fastJSON生成JSON数据,返回前端页面;

项目结构

ajax.js文件代码

var xmlhttp=null;
//创建XMLHttpRequest对象
function createHttpRequest(){
    if(window.XMLHttpRequest){ //Mozilla 浏览器
        xmlhttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //新版IE
        }catch(e){
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(e){
                xmlhttp = null;
            }
        }
    }
    if(!xmlhttp){ //创建XMLHttpRequest失败
        alert("不能创建XMLHttpRequest对象实例");
    }
}
//发送函数
function sendRequest(method,url,param,callbackHandler){
    //创建对象
    createHttpRequest();
    //绑定事件,后台返回的数据,通过callback方法处理
    xmlhttp.onreadystatechange = callbackHandler;

    if(method=="get" || method=="GET"){
        //初始化发送信息
        xmlhttp.open(method,url + "?" + param,true);
        xmlhttp.send(null);
    }

    if(method=="post" || method=="POST"){
        //初始化发送信息
        xmlhttp.open(method,url,true);
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlhttp.send(param);
    }
}

方法1案例

login.html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <script src="../js/ajax.js"></script>
    <script type="text/javascript">


        function dataDeal(){
            if(xmlhttp.readyState == 4){
                if(xmlhttp.status == 200) {
                    document.getElementById("errMsg").innerText = xmlhttp.responseText;
                }else {
                    alert(xmlhttp.status);
                }
            }
        }


        function login(){

            var loginName = document.getElementById("loginName").value;
            var pass = document.getElementById("pass").value;
            if(loginName==""){
                document.getElementById("loginNameTip").innerText="请输入用户名称";
                document.getElementById("passTip").innerText="";
                return ;
            }
            if(pass==""){
                document.getElementById("loginNameTip").innerText="";
                document.getElementById("passTip").innerText="请输入登录密码";
                return ;
            }
            var url = "http://localhost:8080/ajaxProj/loginServlet";
            var params = "loginName=" + loginName + "&pass=" + pass;
            sendRequest("post",url,params,dataDeal);

        }

    </script>
</head>
<body>
    <h2 align="center">系统登录</h2>
    <hr>
    <table border="1" align="center" width="800">
        <caption><font id="errMsg" color="red" size="2"></font></caption>
        <tr>
            <td align="right">用户名称:</td>
            <td><input type="text" name="loginName" id="loginName"> </td>
            <td width="200"><font color="red" size="2" id="loginNameTip"> &nbsp;</font></td>
        </tr>
        <tr>
            <td align="right">登录密码:</td>
            <td><input type="password" name="pass" id="pass"> </td>
            <td width="200"><font color="red" size="2" id="passTip"> &nbsp;</font></td>
        </tr>
        <tr>
            <td align="center" colspan="3">
                <input type="button" value="登录" onclick="login();">
            </td>
        </tr>
    </table>

</body>
</html>

LoginServlet.java

package com.servlet;

import com.alibaba.fastjson.JSONObject;
import com.bean.LoginBean;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet(name = "LoginServlet",value = "/loginServlet")

public class LoginServlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String loginName = request.getParameter("loginName");
        String pass = request.getParameter("pass");
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        if(loginName.equals("admin") && pass.equals("1234")){
            //登录成功
            out.write("登录成功");
        }else{
            //登录失败
            out.println("登录失败");
        }
        out.close();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

运行效果

方法二案例

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <script src="../js/ajax.js"></script>
    <script type="text/javascript">


        function dataDeal(){
            if(xmlhttp.readyState == 4){
                if(xmlhttp.status == 200) {
                    document.getElementById("errMsg").innerText = xmlhttp.responseText;
                    //JSON.parse方法的作用:把json格式的文本内容转换为JSON对象
                    var obj = JSON.parse(xmlhttp.responseText);

                    if(obj.code==0){
                        alert(obj.msg);
                        //跳转到其他页面
                        //location.href = "/ajaxProj/T2/menu.html"
                    }else{
                        alert(obj.msg);
                    }
                }else {
                    alert(xmlhttp.status);
                }
            }
        }


        function login(){

            var loginName = document.getElementById("loginName").value;
            var pass = document.getElementById("pass").value;
            if(loginName==""){
                document.getElementById("loginNameTip").innerText="请输入用户名称";
                document.getElementById("passTip").innerText="";
                return ;
            }
            if(pass==""){
                document.getElementById("loginNameTip").innerText="";
                document.getElementById("passTip").innerText="请输入登录密码";
                return ;
            }
            var url = "http://localhost:8080/ajaxProj/loginServlet";
            var params = "loginName=" + loginName + "&pass=" + pass;
            sendRequest("post",url,params,dataDeal);

        }

    </script>
</head>
<body>
    <h2 align="center">系统登录</h2>
    <hr>
    <table border="1" align="center" width="800">
        <caption><font id="errMsg" color="red" size="2"></font></caption>
        <tr>
            <td align="right">用户名称:</td>
            <td><input type="text" name="loginName" id="loginName"> </td>
            <td width="200"><font color="red" size="2" id="loginNameTip"> &nbsp;</font></td>
        </tr>
        <tr>
            <td align="right">登录密码:</td>
            <td><input type="password" name="pass" id="pass"> </td>
            <td width="200"><font color="red" size="2" id="passTip"> &nbsp;</font></td>
        </tr>
        <tr>
            <td align="center" colspan="3">
                <input type="button" value="登录" onclick="login();">
            </td>
        </tr>
    </table>

</body>
</html>

LoginServlet.java

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String loginName = request.getParameter("loginName");
        String pass = request.getParameter("pass");
        response.setContentType("text/json");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        if(loginName.equals("admin") && pass.equals("1234")){
            //登录成功
            //out.write("登录成功");
            //json格式的数据就是键值对
            String msg = "{\"code\":\"0\",\"msg\":\"登录成功\"}";
            out.write(msg);
        }else{
            //登录失败
            String msg = "{\"code\":\"1\",\"msg\":\"登录失败\"}";
            out.println(msg);
        }
        out.close();
    }

运行效果

方法三案例

使用fastjson:
*   1.要下载fastjson的jar包,加入到lib文件夹
*   2.点击项目结构,把jar包加入到依赖里面

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <script src="../js/ajax.js"></script>
    <script type="text/javascript">


        function dataDeal(){
            if(xmlhttp.readyState == 4){
                if(xmlhttp.status == 200) {
                    document.getElementById("errMsg").innerText = xmlhttp.responseText;
                    //JSON.parse方法的作用:把json格式的文本内容转换为JSON对象
                    var obj = JSON.parse(xmlhttp.responseText);

                    if(obj.loginBean.code==0){
                        alert(obj.loginBean.msg);
                        //跳转到其他页面
                        //location.href = "/ajaxProj/T2/menu.html"
                    }else{
                        alert(obj.loginBean.msg);
                    }
                }else {
                    alert(xmlhttp.status);
                }
            }
        }


        function login(){

            var loginName = document.getElementById("loginName").value;
            var pass = document.getElementById("pass").value;
            if(loginName==""){
                document.getElementById("loginNameTip").innerText="请输入用户名称";
                document.getElementById("passTip").innerText="";
                return ;
            }
            if(pass==""){
                document.getElementById("loginNameTip").innerText="";
                document.getElementById("passTip").innerText="请输入登录密码";
                return ;
            }
            var url = "http://localhost:8080/ajaxProj/loginServlet";
            var params = "loginName=" + loginName + "&pass=" + pass;
            sendRequest("post",url,params,dataDeal);

        }

    </script>
</head>
<body>
    <h2 align="center">系统登录</h2>
    <hr>
    <table border="1" align="center" width="800">
        <caption><font id="errMsg" color="red" size="2"></font></caption>
        <tr>
            <td align="right">用户名称:</td>
            <td><input type="text" name="loginName" id="loginName"> </td>
            <td width="200"><font color="red" size="2" id="loginNameTip"> &nbsp;</font></td>
        </tr>
        <tr>
            <td align="right">登录密码:</td>
            <td><input type="password" name="pass" id="pass"> </td>
            <td width="200"><font color="red" size="2" id="passTip"> &nbsp;</font></td>
        </tr>
        <tr>
            <td align="center" colspan="3">
                <input type="button" value="登录" onclick="login();">
            </td>
        </tr>
    </table>

</body>
</html>

LoginServlet.java

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String loginName = request.getParameter("loginName");
        String pass = request.getParameter("pass");
        //response.setContentType("application/json");
        response.setContentType("text/json");
        //response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();
        LoginBean loginBean = new LoginBean();
        loginBean.setCode(0);
        loginBean.setMsg("登录成功");
        //用fastjson转换JSON格式数据
        JSONObject json  = new JSONObject();
        if(loginName.equals("admin") && pass.equals("1234")){
            //登录成功
            json.put("loginBean",loginBean);
            String msg = json.toJSONString();
            out.write(msg);
        }else{
            //登录失败
            loginBean.setCode(1);
            loginBean.setMsg("用户名或密码错误");

            json.put("loginBean",loginBean);
            //把对象转换为JSON格式的字符串
            String msg = json.toJSONString();
            out.println(msg);
        }
        out.close();


    }

运行效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/670010.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Tensorboard‘s sample_per_plugin

Tensorboard’s sample_per_plugin Tensorboard’s sample_per_plugin controls the step size of the slider. Draw the train images to tensorboard: step 0 writer SummaryWriter() for imgs, labels in train_loader:grid torchvision.utils.make_grid(imgs)writer.…

Android 设计中心 | 助您为各种设备类型轻松打造精彩界面

作者 / Android 开发者体验部设计负责人 Adhithya Ramakumar 和 Android 高级开发者关系工程师 Rebecca Gutteridge 我们推出了 Android 设计中心&#xff0c;帮助开发者更轻松地针对各种类型的设备构建引人注目的界面。 Android 设计中心https://developer.android.google.cn/…

转型内卷下,IT部门如何突围?

在数字化转型极度“内卷”的环境下&#xff0c;传统的IT运维方式无法应对当前的数字化发展需求&#xff0c;在转型过程中&#xff0c;IT部门不但要加深技术与业务的融合&#xff0c;还需要控制成本创造更高的效益。对信息部门的要求进一步提升。 需要明确的是&#xff0c;降本…

废品回收系统开发详细流程--干货分享

废品回收系统的未来可谓是一片光明。随着人们环保意识的不断提高&#xff0c;越来越多的人开始关注废品回收和再利用。这种趋势也在推动着废品回收系统的发展。 目前&#xff0c;各大城市都已经建立了自己的废品回收体系&#xff0c;并且逐渐形成了规模化、产业化运作。同时&a…

EAP如何帮助锂电池厂商提高产品质量?

锂电池作为现代电池技术的重要代表&#xff0c;广泛应用于电动车辆、便携式电子设备和能源储存系统等领域。随着市场竞争的加剧&#xff0c;锂电池厂商越来越注重产品质量的提升&#xff0c;而EAP&#xff08;Equipment Automation Programming&#xff09;系统正是帮助锂电池厂…

JavaScript——跟随图片变化改变网页背景

目录 基础模板 引入ColorThief库 获取图片主要颜色 实现渐变效果 JavaScript效果——跟随图片变化改变网页背景&#xff0c;效果如下所示&#xff1a; 基础模板 首先我们准备基础模板&#xff0c;模板代码如下所示&#xff1a; <script setup> import { ref } from…

Chat GPT提示词(prompt )入门指南

prompt 是什么 prompt 是“提示、引导”的意思。在 NLP &#xff08;自然语言处理&#xff09;领域&#xff0c;prompt 通常指的是向预训练模型输入的文本&#xff0c;用于引导生成模型生成指定的文本输出。 prompt 就像是一条指路路线&#xff0c;告诉计算机生成什么样的文本…

戴尔U盘重装系统Win10步骤和详细教程

戴尔电脑深受用户们的喜欢&#xff0c;那么如何使用U盘给戴尔电脑重装Win10系统呢&#xff0c;这让很多用户都犯难了&#xff0c;以下就是小编给大家分享的戴尔U盘重装系统Win10步骤和详细教程&#xff0c;按照这个教程操作&#xff0c;就能顺利完成戴尔U盘重装Win10系统的操作…

Ansys Zemax | 如何建模人体皮肤以及光学心率探测器

光电容积脉搏波法&#xff08;PPG&#xff09;是一种低成本&#xff0c;无创的光学技术&#xff0c;可在皮肤表面进行生理测量。其最广泛的应用之一是商用智能手表和运动手环中包含的可穿戴心率传感器&#xff0c;它在日常环境下可提供舒适和连续的脉搏监测。本文演示了如何在 …

如何做好城市内涝监测工作?

城市内涝是由于降雨量过大、排水设施不足等原因导致的城市地区积水现象&#xff0c;城市内涝是严重影响城市运行和居民生活的自然灾害之一。因此&#xff0c;建立有效的城市内涝监测系统&#xff0c;对于提前发现内涝风险、采取及时的防范和应急措施至关重要。那么如何做好城市…

鼎博梯控MF1卡UID卡修复

物业发了4张卡MF1卡&#xff0c;默认无法修改卡号的&#xff08;当时不知道&#xff09;&#xff1b; 需要交物业费更新日期&#xff0c;手里只有两张卡&#xff0c;另外两个家人拿走了&#xff0c;正好我有修改卡的设备PM6&#xff0c;就准备只升级手里的两张卡&#xff0c;然…

nowcoder--牛客题霸模板速刷101

目录 BM12 单链表的排序 描述 算法思想&#xff1a;归并排序&#xff08;递归&#xff09; 解题思路&#xff1a; BM13 判断一个链表是否为回文结构 描述 方法一 思路 具体步骤 方法二 思路 BM14 链表的奇偶重排 描述 BM15 删除有序链表中重复的元素 描述 BM12 单链表的排…

老游戏的新生:探究二十年前的经典游戏为何再次风靡

随着科技的不断进步和游戏产业的飞速发展&#xff0c;我们每年都能玩到各种新的、惊奇的游戏。但是&#xff0c;在这个繁华快速的行业中&#xff0c;却时常有一些老游戏顽强地生存下来&#xff0c;并且在很多人心中再次引起了巨大的追捧和热情。这些经典游戏往往诞生于20年前或…

数据结构--》深入了解栈和队列,让算法更加高效

本文将带你深入了解数据结构栈和队列&#xff0c;这两种基础的线性数据结构在算法中的重要性不言而喻。我们将会详细介绍栈和队列的概念、分类、实现以及应用场景&#xff0c;在理解栈和队列的基础上&#xff0c;还将探讨如何通过栈和队列来高效地解决算法问题。 无论你是初学者…

LTV-6341-ASEMI代理台湾光宝储能专用光耦LTV-6341

编辑&#xff1a;ll LTV-6341-ASEMI代理台湾光宝储能专用光耦LTV-6341 型号&#xff1a;LTV-6341 品牌&#xff1a;台湾光宝 封装&#xff1a;LSOP-6 工作温度&#xff1a;-40C~125C LTV-6341特性&#xff1a; 3.0A峰值输出电流驱动能力 轨对轨输出电压 200 ns最大传播…

D. Survey in Class(贪心 + 分类讨论)

Problem - D - Codeforces Zinaida Viktorovna 的历史课上有 n 名学生。今天的作业包括 m 个主题&#xff0c;但是学生们准备时间很短&#xff0c;所以第 i 个学生只学习了从 li 到 ri &#xff08;包括&#xff09;的主题。 在课开始时&#xff0c;每个学生都将手举在 0 处。…

虚幻引擎程序化资源生成框架PCG(Procedural Content Generation Framework) 之一 PCG基础

可以和Houdini说拜拜了 文章目录 0. 概述1. 启动插件2. 工作逻辑2.1 添加PCGVolume2.2 创建PCGGraph2.3 编写PCGGraph逻辑 小结 0. 概述 Unreal Engine 5.2全新推出了程序化资源生成框架即Procedural Content Generation Framework下文简称PCG&#xff0c; 开发者可以通过PCG程…

CSDN 每日一练及周赛介绍

CSDN 每日一练及周赛介绍 每日一练每日一练入口 CSDN 周赛CSDN 周赛入口 相关社区每日一练社区入口CSDN 竞赛专区社区入口 每日一练题库每日一练速查每日一练题目题解速查入口 每日一练题解自行接管输入 根据题号进入题目预习提交新题目CSDN 编程比赛出题规范 吐槽 每日一练 C…

JavaWeb项目乱码问题

设置编码格式有三个地方&#xff0c; 一,用于设置网页发出到服务器上的编码格式为UTF-8&#xff0c;一般该代码会自动创建。 <% page contentType"text/html;charsetUTF-8" language"java" %> 二&#xff0c;服务器响应后发送的文件的编码格式为U…

从BNO055传感器获取IMU数据-1

最近学习惯导相关知识&#xff0c;BNO055是博世的绝对方向传感器&#xff0c;它结合了传感器数据和微处理器来过滤和组合数据&#xff0c;为用户提供空间中的绝对方向。 关于BNO055传感器 BNO055使用三个三轴传感器同时测量切向加速度&#xff08;通过加速度计&#xff09;&a…