一、 AJAX 和 Fetch 对比
1.1 AJAX 概述
AJAX 是最早出现请求数据的方式,它不需要不需要刷新整个页面即可更新部分数据。
属于原生 JS 范畴 ,技术核心是 XMLHttpRequest 对象。
AJAX 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据
一般使用之前,我们都需要把它们封装使用,如下:文章来源地址https://www.toymoban.com/news/detail-608666.html
const ajax = function() {
// 创建xhr对象
// 判断浏览器是否支持XMLHttpRequest
let xhr;
if (window.XMLHttpRequest) {
// 高级浏览器
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE低版本
xhr = new ActiveXObject();
} else {
alert('你的浏览器不支持ajax')
}
// get 请求
this.get = function(url,param) {
// param 为原始数据类型
// get请求没有请求体,因此常常将数据放在地址上,作为请求头的一部分(query数据)
xhr.open('get',url + '?param=' + param,true) // 第三个参数异步与否
// 监听数据返回
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
文章来源:https://www.toymoban.com/news/detail-608666.html
到了这里,关于【前后端数据交互】原生JS的Fetch请求封装的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!