JavaWeb课堂笔记——AJAX基础

最新推荐文章于 2022-09-06 14:21:42 发布

K_Load

最新推荐文章于 2022-09-06 14:21:42 发布

阅读量183

点赞数

分类专栏： Java学习总结程序

本文链接：https://blog.csdn.net/KM_Load/article/details/103232079

版权

Java学习总结同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

程序

9 篇文章 0 订阅

订阅专栏

一：

1.创建Web项目AjaxDemo01

2.在index文件中输入之后运行一下

效果：

3.web目录下创建data文件夹，然后新建一个userlist.txt的文件

在里面输入数据，比如：

4.在web目录下创建一个名为getUserList的html文件

运行后看看效果：

这就是运行效果

5.在getUserList.html中写入一下脚本

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取用户列表</title>
    <script>
        function loadUserList() {
            //声明请求对象
            var xmlhttp;
            //实例化请求对象
            if (window.XMLHttpRequest) {
                //IE7以上或者Firefox、chrome、Opera、Safari浏览器中执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                //如果是低版本，使用另外一种方式实例化请求对象
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //监听请求状态变化，一旦有变化，执行相应的回调函数
            xmlhttp.onreadystatechange = function () {
                //判断请求是否成功，响应是否完成
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                     //利用响应文本修改页面元素内容
                    document.getElementById("users").innerHTML = xmlhttp.responseText;
                }
            }

            //新建HTTP请求，采用get方式，请求采用异步方式
            xmlhttp.open("GET","/AjaxDemo01/data/userlist.txt",true);
            //发送HTTP请求，不传递参数
            xmlhttp.send(null);
        }
    </script>
</head>
<body>
    <h3>用户列表</h3>
    <div id="users"></div>
    <hr>
    <button type="button" onclick="loadUserList()">获取用户列表</button>
</body>
</html>

运行TomCat服务器，跳转到getUserList.html，然后点击按钮

效果：

6. 在web目录下创建一个名为login的html文件

代码如下：

测试一下效果：

明显效果是可以看见的。

再给重置按钮加上方法

效果如下：

7.将之前getUserList.html中的代码复制到ogin.html中进行修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function login() {
            //获取用户名与密码
            var username = document.getElementById("username").value;
            var password = document.getElementById("password").value;

            //声明请求对象
            var xmlhttp;
            //实例化请求对象
            if (window.XMLHttpRequest) {
                //IE7以上或者Firefox、chrome、Opera、Safari浏览器中执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                //如果是低版本，使用另外一种方式实例化请求对象
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            //监听请求状态变化，一旦有变化，执行相应的回调函数
            xmlhttp.onreadystatechange = function () {
                //判断请求是否成功，响应是否完成
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
                    //根据返回值不同跳转不同的页面
                    if (xmlhttp.responseText == "success") {
                        //跳转到成功页面，并且传递用户名
                        window.location = "success.html?username=" + username;
                    } else {
                        //跳转到失败页面，传递用户名
                        window.location = "failure.html?username=" + username;
                    }
                }
            }

            //新建HTTP请求，采用get方式，请求采用异步方式，改为false即为同步方式
            xmlhttp.open("POST","/AjaxDemo01/login",true);
            //设置请求头
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //定义要传递的参数
            var data = "username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password);
            //发送请求，传递数据
            xmlhttp.send(data);
        }

        function reset() {
            // 清空用户名与密码数据
            document.getElementById("username").value = "";
            document.getElementById("password").value = "";

        }
    </script>
</head>
<body>
<h3 style="text-align: center">用户登录</h3>
<table border="1" cellpadding="10" style="margin: 0px auto">
    <tr>
        <td align="center">用户名</td>
        <td><input type="text" id="username"/></td>
    </tr>
    <tr>
        <td align="center">密&nbsp;码</td>
        <td><input type="password" id="password"/></td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <button type="button" onclick="login()">登录</button>
            <button type="button" onclick="reset()">重置</button>
        </td>
    </tr>
</table>


</body>
</html>

AJAX提交的数据是交给login来处理，其实login是一个Servlet的url。

8.在SRC中新建net.sk.servlet包，并且新建LoginServlet的java文件

代码如下：

package net.sk.servlet;

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.PrintStream;
import java.io.PrintWriter;

/**
 * 功能：登录处理控制器
 * 作者：烧烤
 * 日期：2019.11.25
 */
@WebServlet(name = "LoginServlet",value = "/login")
public class LoginServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        //设置请求对象字符编码
        request.setCharacterEncoding("utf-8");
        //截取AJAX提交的登录数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        //判断是否成功，返回不同的数据
        PrintWriter out = response.getWriter();
        if (username.equals("烧烤") && password.equals("123")) {
            //返回“success”
            out.print("success");
        } else {
            out.print("failure");
        }
        
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
        doPost(request,response);
    }
}

9.创建登录成功和失败的页面

失败页面也是一样的道理，可以复制一遍代码。

运行结果：

采用AJAX，前端与后台只是交换数据，前端通过AJAX提交数据给后台，后台接收到数据进行相应处理，返回数据给前端，前端AJAX拿到后台返回的数据，根据数据不同进行页面的跳转，不像以前是后台来执行页面的跳转（通过重定向或同一请求转发）。

K_Load

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb课堂笔记——AJAX基础

一：1.创建Web项目AjaxDemo012.在index文件中输入之后运行一下效果：3.web目录下创建data文件夹，然后新建一个userlist.txt的文件在里面输入数据，比如：4.在web目录下创建一个名为getUserList的html文件运行后看看效果：这就是运行效果5.在getUs...
复制链接

扫一扫