AJAX

Beacon API的应用-在浏览器被关闭之前要调用一个后端提供的请求

遇到了一个需求就是,在浏览器被关闭之前要调用一个后端提供的请求,我一开始用axios,信誓旦旦的说,木有问题,后端后来告诉我,没有接收到有请求,这个时候我就去排除下原因,我debugger看了下,明明有发送请求只不过在unload的时候还是pending状态。猜测是不是请求被中断了。尝试用同步请求发现还是没有用,那我能想到的就是用原生的http同步请求,但是缺点也很明显,性能差。所以我又百思不得其解,终于在mdn上找到了一个api

window.addEventListener("unload", function() {
      let ISEdit = sessionStorage.getItem("isCanEdit") == "true" ? true : false;
      if (ISEdit) {
        let params = new FormData();
        params.append("patientContentId", self.getquestionId);
        navigator.sendBeacon(
          `${config.baseurl}/patient/deleteExclusive`,
          params
        );
        ;
      }
    });

要后端配合的就是需要post请求并且要改成formdata方式入参,大功告成

 

Question & Solution
Beacon API 不会延缓网页卸载,不会严重影响用户体验。

为了解决网页卸载时,异步请求无法成功的问题,浏览器特别实现了一个 …

Javascript Fetch API 教程

fetch()是 XMLHttpRequest 的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求。

浏览器原生提供这个对象。本章详细介绍它的用法。

目录 [隐藏]

基本用法

fetch()

【JS】fetch() 用法 取代ajax

fetch 基本使用

  • Fetch API 提供了一个获取资源的接口(包括跨域请求),用于取代传统的XMLHttpRequest的,在 JavaScript 脚本里面发出 HTTP 请求。
  • 目前还没有被所有浏览器支持,如果考虑低版本浏览器的问题的话,引入https://github.com/github/fetch/blob/master/fetch.js 即可兼容。
  • fetch api是基于promise的设计,返回的是Promise对象,它是为了取代传统xhr的不合理的写法而生的。
  • 没有fetch的时候,我们是这样获取异步资源的:
//发送一个get请求是这样的:

//首先实例化一个XMLHttpRequest对象
var httpRequest = new XMLHttpRequest(

Ajax实现页面自动无闪刷新实例解析

下面给大家介绍jQuery实现AJAX定时局部页面刷新

不时,我需要某种机制,不断刷新网页,以提供一个实时的仪表板某种。如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态。

这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分。一旦我们纳入我们的页面的jQuery库,我们只需要1行的JavaScript得到它的工作:

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

所以我们只要我们的页面放入这个小的JS代码片段刷新里面的内容ID标签的一切,让我们说,每5秒:

setInterval(function() {
  $("#content").load(location.href+" #content>*","");
}, 5000);

这就是它!!因此,这是很容易完成一些实时监控的行为,只是那行代码。没有更奇怪的元刷新标记或iframe一种解决方法,在Web应用程序。

每5秒,我们将刷新内容相同的URL和所有元素,驻留在元素ID为content元素的内容:内容。

介绍jQuery实现AJAX定时局部页面刷新

不时,我需要某种机制,不断刷新网页,以提供一个实时的仪表板某种。如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态。

这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分。一旦我们纳入我们的页面的jQuery库,我们只需要1行的JavaScript得到它的工作:

1
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

所以我们只要我们的页面放入这个小的JS代码片段刷新里面的内容ID标签的一切,让我们说,每5秒:

1
2
3
setInterval(function() {
  $("#content").load(location.href+" #content>*","");
}, 5000);

这就是它!!因此,这是很容易完成一些实时监控的行为,只是那行代码。没有更奇怪的元刷新标记或iframe一种解决方法,在Web应用程序。

每5秒,我们将刷新内容相同的URL和所有元素,驻留在元素ID为content元素的内容:内容。