文章内容

2023/5/17 22:17:22,作 者: 黄兵

JavaScript xhr 和 fetch 那个更好

在这篇文章中:如何判断用户是否在线,我们通过一个 JavaScript xhr 的方式向服务器发送数据。

但是我们也可以使用 JavaScript xhr 的方式发送数据,下面是一个示例代码:

// 定义一个函数,用于向服务器发送AJAX请求,检查用户是否在线
function checkUserOnline() {
// 发送请求
fetch('/check_user_online')
.then(response => {
// 响应成功,检查状态码
if (response.ok) {
return response.text();
} else {
throw new Error('网络请求出错');
}
})
.then(data => {
// 处理响应数据
if (data === 'OK') {
console.log('用户在线');
} else {
console.log('用户不在线');
}
})
.catch(error => {
// 处理请求失败的情况
console.error('网络请求出错:', error);
});
}

// 在页面加载完成后,启动定时器,每隔30秒检查一次用户是否在线
window.onload = function () {
setInterval(checkUserOnline, 30000);
}

在上面的代码中,我们使用fetch函数来发送AJAX请求,其参数为请求的URL。fetch函数会返回一个Promise对象,我们可以通过链式调用then方法来处理响应结果。如果响应成功,我们可以使用response.text()方法获取响应文本,如果响应失败,我们可以使用throw new Error()抛出一个异常,然后使用catch方法来处理异常。

那么 xhr 和 fetch 有什么区别呢?xhr 和 fetch 那个好呢?

相较于XMLHttpRequest(简称xhr),fetch是一个比较新的API,提供了更简单、更强大的方式来进行网络请求。

相较于XMLHttpRequestfetch有以下优点:

  • 更简单:fetch的API更简洁,使用起来更方便。
  • 更强大:fetch支持Promise、async/await等特性,使得代码更易读、易维护。
  • 更安全:fetch使用CORS(跨域资源共享)来限制跨域请求,提高了安全性。

因此,如果你使用的是现代浏览器,推荐使用fetch来发送AJAX请求。


其他相关推荐:

1、如何判断用户是否在线

2、jquery ajax方法

3、jquery ajax方法

4、jquery .ajax提交data数据格式

5、flask使用ajax的方式提交json数据

分享到:

发表评论

评论列表