您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

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。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进