Ajax请求以及重定向和转发之间的区别

一：Ajax请求

1、什么是Ajax
Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页(不使用 Ajax)如果需要更新内容，必需重载整个网页面。

2、同步与异步的区别
同步提交：当用户发送请求时，当前页面不可以使用，服务器响应页面到客户端，响应完成，用户才可以使用页面。

异步提交：当用户发送请求时，当前页面还可以继续使用，当异步请求的数据响应给页面，页面把数据显示出来。

3、ajax的工作原理
客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图

.二：转发和重定向之间的区别。
转发，是服务器代替客户端获取目标内容，从客户端的角度上说，只发起了一起请求，且请求的URL没有变化。
重定向，是HTTP定义的返回方式，状态码是302，表示内容在其他位置，需要浏览器发起第二次请求，请求的URL回变化。

举例：学生查询个人信息

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/info.css">
    <script src="../js/jquery-3.6.0.js"></script>
</head>
<body>
    <div class="info-content-header">
        <h1 style="font-size: 20px;margin: 0px;padding: 0px">学生个人信息</h1>
    </div>
    <div class="info-content-middle" align="center">

        <table style="font-size: 16px">
            <tbody>
                <tr>
                    <td class="item-lable">姓名</td>
                    <td id="realName">xxx</td>
                    <td class="item-lable">学院</td>
                    <td id="collage">xxx</td>
                </tr>
                <tr>
                    <td class="item-lable">性别</td>
                    <td id="gender">xxx</td>
                    <td class="item-lable">年级</td>
                    <td id="grade">xxx</td>
                </tr>
                <tr>
                    <td class="item-lable">年龄</td>
                    <td id="age">xxx</td>
                    <td class="item-lable">电话</td>
                    <td id="contact">xxx</td>
                </tr>
                <tr>
                    <td class="item-lable">地址</td>
                    <td id="address">xxx</td>
                    <td class="item-lable">学号</td>
                    <td id="stunum">xxx</td>
                </tr>
            </tbody>
        </table>

    </div>
</body>

<script>

    $.ajax({
        url:"../studentInfo",
        type:"post",
        success:function (res){
            var data=$.parseJSON(res);
            // console.log(data);
            var realName=$("#realName");
            realName.text(data.realName);
            var collage=$("#collage");
            collage.text(data.collage);
            var gender=$("#gender");
            gender.text(data.gender);
            var grade=$("#grade");
            grade.text(data.grade);
            var age=$("#age");
            age.text(data.age);
            var contact=$("#contact");
            contact.text(data.contact);
            var address=$("#address");
            address.text(data.address);
            var stunum=$("#stunum");
            stunum.text(data.stunum);
        }
    })

</script>

</html>

java代码：

@WebServlet("/studentInfo")
public class StudentInfoController extends HttpServlet {

    StudentService service = new StudentService();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException {
        resp.setContentType("text/html;charset=utf8");
        HttpSession session = req.getSession();
        Student s = (Student) session.getAttribute("student");
        StudentInfo info = service.findMyInfo(s);
        String result = JSONObject.toJSONString(info);
        resp.getWriter().print(result);

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws servletexception, IOException {
        this.doGet(req, resp);
    }
}

过程是：客户端获得数据，进入到controller，controller给service，service给dao（有个工具叫JDBCUtil），dao去查库，库查出来的东西变成对象回到dao，dao把这个对象当返回值给service，service再给controller。

Ajax请求以及重定向和转发之间的区别

相关推荐