在浏览器关闭的时候发送ajax请求

m0_62317155

2024-04-20 帮助1人

在浏览器关闭的时候发送ajax请求

onbeforeunload 定义和用法

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。

但你可以自定义一些消息提示与标准信息一起显示在对话框。

注意： 如果你没有在元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。

注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。

具体用法看这里：onbeforeunload 事件 | 菜鸟教程 (runoob.com)，这里有案例

**注意：**这里使用onbeforeunload需要跟浏览器交互才会有效果，如果只是进入页面，没有在浏览器中点击对应的内容直接关闭是不会生效的。

这个网站的代码试验如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p>
    <p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
    <a href="http://www.runoob.com">点击调整到菜鸟教程</a>
    <script>
        window.addEventListener("beforeunload", function (event) {
            event.returnValue = "我在这写点东西..."; // 写有这个就会弹窗，不过没有写就不会有如下gif图所示的确认弹窗
        });
    </script>
</body>

</html>

从下面的gif图后面可以看出如果没有交互的话，会直接关闭的。也就是刚进入页面或者刷新什么都不操作，连点一下鼠标单击一下按钮都不点，直接点浏览器关闭标签页就不会有对应的提示

这里用edge或者chorme浏览器都可以

学新通

试着在浏览器关闭标签页的时候发送ajax请求

前端代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入jq -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

    <p>该实例演示了如何使用 addEventListener() 方法向 body 元素添加 "onbeforeunload" 事件。</p>
    <p>关闭当前窗口，按下 F5 或点击以下链接触发 onbeforeunload 事件。</p>
    <a href="http://www.runoob.com">点击调整到菜鸟教程</a>
    <script>
        window.addEventListener("beforeunload", function (event) {
            /**
             * ajax的get方法
             */
            // send_get_by_ajax()

            /**
             * ajax的post方法
             */
            // send_post_by_ajax()

            /**
             * 没有使用ajax的方法，而是使用window.navigator.sendBeacon(rul,data)方法发送少量数据
             */
            // send_post_by_navigator_sendBeacon()

            event.returnValue = "我在这写点东西...";
        });
        function send_get_by_ajax() {
            $.ajax({
                url: "http://localhost:8080/test/gettest",
                type: 'get',
                async: true, // 同步请求，异步的话beforeunload我在服务器中打断点没有接受到对应的数据
                success: function (result) {
                    $("div").html(result);
                }
            });
        }
        var student = { name: 'zhang', age: 18 }
        // $.ajax默认的是表单的形式提交数据，https://www.runoob.com/jquery/ajax-ajax.html
        function send_post_by_ajax() {
            $.ajax({
                url: "http://localhost:8080/test/post",
                type: 'post',
                async: true, // 同步请求，异步的话beforeunload我在服务器中打断点没有接受到对应的数据
                data: student,
                success: function (result) {
                    console.log(result)
                }
            });
        }

        var form = new FormData()
        form.append("name", "张三");
        form.append("age", 18)
        function send_post_by_navigator_sendBeacon() {
            window.navigator.sendBeacon("http://localhost:8080/test/post", form)
        }
    </script>
</body>

</html>

后端代码如下

import org.springframework.web.bind.annotation.*;

import java.util.Map;

@RestController
@RequestMapping("/test")
@CrossOrigin // 允许跨域
public class TestController {

    @GetMapping("/gettest")
    public String getTest() {
        return "get测试成功";
    }

    /**
     * 因为这里使用的是表单提交，所以这里不用@RequestBody的方式接受参数
     * @param map
     * @return
     */
    @PostMapping("/post")
    public Map<String,Object> postTest(@RequestParam Map<String,Object> map) {
        System.out.println(map);
        return map;
    }

}

通过查看上面的两段代码

后端代码打断点了

学新通

1、在上面的前端代码中的window.addEventListener（）{}，中当我调用前端代码的send_get_by_ajax()方法（函数时），其他两个函数注释掉时。

学新通

然后在浏览器中执行如下操作

Ajax的get（同步）请求

学新通

后端成功进入断点，说明发送请求了

学新通

记住这里在后端放行一下，然后再执行下面的操作

学新通

成功进入后端断点，说明发送请求成功

学新通

记得将这里的断点放行，再执行下面的操作

学新通

这里使用了ajax的get请求，注意的是这里必须是发送同步请求，发送异步请求的话不行，后端收不到，无论是刷新，关闭，还是跳转都可以发送请求到后端

Ajax的post(同步)请求

在上面的前端代码中的window.addEventListener（）{}，中当我调用前端代码的send_post_by_ajax()方法（函数时），其他两个函数注释掉时。

学新通

然后在浏览器中执行如下操作

学新通

成功进入了后端，并且传参成功。说明成功发送了请求

学新通

记得将这里的断点放行，再执行下面的操作

学新通

成功进入了后端，并且传参成功。说明成功发送了请求

学新通

记得将这里的断点放行，再执行下面的操作

学新通

这里使用了ajax的post请求，注意的是这里必须是发送同步请求，发送异步请求的话不行，后端收不到，无论是刷新，关闭，还是跳转都可以发送请求到后端

但是这里需要注意的是，调用onbeforeunload事件在浏览器关闭之前发送ajax请求时，运行完ajax相关操作才可以关闭浏览器，对用户体验可能会稍微有一点点不友好，这个通过这种方式，有时候执行关闭标签页的时候不一定会成功发送ajax请求，而且这个对于浏览器在onbeforeunload事件中发送ajax请求可能不同的浏览器兼容性不是很好，有些浏览器可能不支持在onbeforeunload事件中发送ajax请求，这个我也是大概了解了一下，感觉了解到这里就够了。这个又不常用。

navigator.sendBeacon(rul,data)发送post请求

这个兼容性就比ajax强多了，而且几乎每次请求都成功了

navigator.sendBeacon()

HTTP请求只能是POST请求
发送的数据量少，并且需要更加简洁的API
data 参数是将要发送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 类型的数据。

在上面的前端代码中的window.addEventListener（）{}，中当我调用前端代码的 send_post_by_navigator_sendBeacon()方法（函数时），其他两个函数注释掉时。如下图所示

学新通

然后在浏览器中执行如下操作

学新通

成功进入了后端，并且传参成功。说明成功发送了请求
学新通

记得将这里的断点放行，再执行下面的操作

学新通

成功进入了后端，并且传参成功。说明成功发送了请求

学新通

记得将这里的断点放行，再执行下面的操作

学新通

成功进入了后端，并且传参成功。说明成功发送了请求，这里几乎每次都查都成功了

学新通

建议用navigator.sendBeacon(rul,data)发送post请求

写在最后

如果在关闭浏览器需要发送请求的时候，又不希望有弹窗情况的话，直接在上面的代码中注释掉对应的语句就可以了

学新通这里本来想用onunload 事件的，但是无论用上面那种方法都不行，后续看看是什么情况在说吧

这篇好文章是转载于：学新通技术网

在浏览器关闭的时候发送ajax请求