javaweb--Ajax

最新推荐文章于 2024-09-17 14:30:35 发布

*MaybE

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量424

点赞数

分类专栏： javaWeb 文章标签： ajax servlet javascript

本文链接：https://blog.csdn.net/weixin_43903745/article/details/127018072

版权

javaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Ajax

Asynchronous JavaScript And XML：异步的JavaScript和XML
Ajax不是一种新的编程，指的是一种交互方式，异步加载，客户端和服务端的数据交互是更新在局部页面的技术，不需要刷新整个页面（局部刷新）

优点：

局部刷新，效率更高
用户体验更好

基于JQuery的Ajax

<%--
  Created by IntelliJ IDEA.
  User: bijing
  Date: 2022/9/23
  Time: 21:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var btn = $("#btn");
            btn.click(function () {
                $.ajax({
                    url: '/showAjax',//相当于action中的地址
                    type: 'post',//请求方式
                    data: 'id=1',//相等于传参?id=1,不需要就不写
                    dataType: 'text',//服务器返回的类型
                    success: function (data) {
                        var text = $("#text");
                        text.before("<span>" + data + "</span><br>")
                    }
                });
            });
        })
    </script>
</head>
<body>
<%--不能再使用表单提交了--%>
<input id="text" type="text">
<br>
<input type="submit" id="btn" value="提交">
</body>
</html>

不能使用表单提交请求，改用jquery方式动态绑定事件来提交
servlet中不能再跳转到jsp，只能将数据返回

@WebServlet("/showAjax")
public class ShowAjax extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String id = req.getParameter("id");
        System.out.println(id);
        try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        String str = "hello world";
        resp.getWriter().write(str);
    }
}

传统的web数据交互vs Ajax数据交互

1、客户端请求方式不同
传统：浏览器发送同步请求
Ajax：异步引擎对象发送异步请求
2、服务器响应方式不同
传统：响应一个完整jsp页面
Ajax：响应相应的数据
3、客户端处理不同
传统：需要等待服务器完成响应并且重新加载整个页面后，用户才能进行后续操作
Ajax：动态更新页面的局部内容，不影响用户的其他操作

Ajax原理

在这里插入图片描述

基于jQuery的Ajax语法

$.ajax({属性})
常用的属性：
url：请求后端服务器的地址
type：请求类型，默认get
data：请求的参数，传给后台
dataType：服务器返回的数据类型，text/json
success：请求成功的回调函数
error：请求失败的回调函数
complete：请求完成嗯回调函数（无论成功或者失败都会调用）