重学JavaScript高级（十五）： XHR以及Fetch的理解应用

JavaScript XHR、Fetch

服务器端渲染-前后端分离

  • **服务器端渲染：**将html文件在后端，拼接好，将整个文件全部返回给前端
    • 随着目前业务逻辑的复杂度提升，这种开发模式，会导致效率低下
    • 同时，有时候前端页面仅修改一小部分数据，就需要将这个网页全部返回，无疑是对网络造成了部分压力

image.png

  • 由于服务端渲染的弊端，因此有了 前后端分离的开发模式
    • 前端通过静态服务器请求HTML文件，js脚本
    • JS脚本中通过AJAX进行网络请求
    • API服务器中写相应的API请求数据库中的数据

image.png

什么是HTTP协议

  • 在维基百科中的解释

    • 超文本传输协议 是一种分布式、协作式和超媒体信息系统的 应用层协议
    • HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种 发布和接收HTML页面的方法
    • 通过 HTTP或者HTTPS协议请求的资源由统一资源标识符来标识

  • HTTP是客户端（用户）和服务端（网站）之间请求和响应的标准

    • 一次HTTP请求主要包括：请求（Request）和响应（Response）
    • 请求：包含请求行、请求头和请求体

    image.png

    • 响应：包含响应行，响应头和响应体

image.png

HTTP的版本

  • HTTP/0.9
    • 发布于1991年
    • 只支持GET请求方法获取文本数据，当时主要是为了获取HTML页面的内容
  • HTTP/1.0
    • 发布于1996年
    • 支持POST、HEAD等请求方法，支持请求头、响应头等，支持更多种数据类型
    • 但是浏览器的每次请求都需要与服务器建立一个TCP连接、请求处理完成后立即断开TCP连接，每次建立连接增加了性能损耗
  • HTTP/1.1（目前使用最广泛的版本）
    • 发布于1997年
    • 增加了PUT、DELETE等请求方法
    • 采用持久连接（Connection:keep-alive）,多个请求可以共同用一个TCP
  • HTTP/2.0
    • 发布于2015年
  • HTTP/3.0
    • 发布于2018年

HTTP请求方式

image.png

HTTP Request Header

image.png

  • content-type是这次请求携带的数据类型

    • **application/x-www-form-urlencoded:**表示数据被编码成以 ‘&’分割的键值对，同时以=分隔键和值
    • **application/json:**表示一个JSON类型
    • text/plain:表示文本类型
    • application/xml:表示xml类型
    • **multipart/form-data:**表示是上传文件

  • content-length：文件的大小长度，不用手动配置

  • keep-alive

    • http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立即中断
    • 在http1.0中若想保持长连接，需要手动进行设置
    • 在 http1.1中，所有的连接都是默认为connection:keep-alive

  • accept-encoding:告知服务器，客户端支持的压缩格式，服务器会返回相应的压缩格式的文件

  • **accept：**告知服务器，客户端可以接收的文件类型

  • **user-agent：**客户端的相关信息

HTTP Response响应状态码

image.png

AJAX发送请求

AJAX是异步的JavaScript和XML

它可以使用JSON、XML、HTML和text文本等格式发送和接收数据

XHR发送请求

  • 如何来完成AJAX请求
    • 创建网络请求的AJAX对象（使用XMLHttpRequest）
    • 监听 XMLHttprequest对象状态的变化，或者监听 onload事件（请求完成时触发）
    • 配置网络请求（通过 open方法）
    • 发送 send网络请求
//创建AJAX对象
let xhr = new XMLHttpRequest();//监听XMLHttpRequest对象状态的变化
xhr.onreadystatechange = function () {console.log(xhr.response);
};//配置网络请求
//method:get/post/delete
//URL
xhr.open("GET", "http://123.207.32.32:8000/home/multidata");//发送send网络请求
xhr.send();

XHR状态变化的监听

事实上，我们在一次网络请求中，可以看到XHR的状态发生了很多次的变化

值状态描述
0UNSENT代理被创建，但是尚未调用open()方法（不会被监听）
1OPENEDopen()方法已经被调用
2HEADERS_RECEIVEDsend()方法已经被调用，并且头部和状态已经可以获得
3LOADING下载中:reponseText属性已经包含部分数据
4DONE下载操作已经完成
  • 因此我们若想获取请求之后的数据，需要在XHR的状态码为4的时候进行获取（注意此状态码不是HTTP的状态码）
//创建AJAX对象
let xhr = new XMLHttpRequest();//监听XMLHttpRequest对象状态的变化
xhr.onreadystatechange = function () {//这样写，代码阅读性不是很好//   if (xhr.readyState !== 4) return;//此写法，等同于上面的的写法XMLHttpRequest.DONE代表常量if (xhr.readyState !== XMLHttpRequest.DONE) return;console.log(xhr.response);
};//配置网络请求
//method:get/post/delete
//URL
xhr.open("GET", "http://123.207.32.32:8000/home/multidata");//发送send网络请求
xhr.send();

XHR发送同步请求

XHR发送请求，默认发送的是异步请求，即不会阻塞xhr.send()后面代码的执行

  • 若想让XHR发送的是同步请求，即只有当请求拿到数据之后，才能执行 xhr.send()后面的代码
  • 在 xhr.open()中传入第三个参数 false
  • 但是在实际开发中，使用的都是异步请求
//创建AJAX对象
let xhr = new XMLHttpRequest();//监听XMLHttpRequest对象状态的变化
xhr.onreadystatechange = function () {//这样写，代码阅读性不是很好//   if (xhr.readyState !== 4) return;//此写法，等同于上面的的写法XMLHttpRequest.DONE代表常量if (xhr.readyState !== XMLHttpRequest.DONE) return;console.log(xhr.response);
};//配置网络请求
//method:get/post/delete
//URL
xhr.open("GET", "http://123.207.32.32:8000/home/multidata",false);//发送send网络请求
xhr.send();//在这里即可拿到相应的数据
console.log(xhr.response)

XHR其他事件的监听

除了 onreadystatechange还有其他的事件可以监听

  • loadstart：请求开始
  • progress：一个响应数据包到达，此时整个response body都在 response中
  • abort：调用 xhr.abort()取消了请求
  • error：发生连接错误：域名解析错误或者跨域
  • load：请求完成
//可以代替onreadystatechange进行数据的监听
xhr.onload = function () {console.log(xhr.response);
};
  • timeout：由于请求超时二取消了该请求（默认情况下是0，不会超时，手动设置后会有超时）
  • loadend：在load error timeout 或abort之后触发

XHR响应数据和响应类型

在发送网络请求，接收数据的时候，可以对数据的格式进行设置

  • 通过 xhr.responseType进行设置
  • 不设置的时候，默认为 text格式
//创建AJAX对象//监听XMLHttpRequest对象状态的变化//对响应数据格式进行设置
xhr.responseType = "json"//配置网络请求//发送send网络请求

XHR获取HTTP状态码

通过xhr.status进行获取状态码，xhr.statusText状态描述

  • 写在 监听XMLHttpRequest对象状态的变化中
//创建AJAX对象
let xhr = new XMLHttpRequest();//监听XMLHttpRequest对象状态的变化
xhr.onreadystatechange = function () {//这样写，代码阅读性不是很好//   if (xhr.readyState !== 4) return;//此写法，等同于上面的的写法XMLHttpRequest.DONE代表常量if (xhr.readyState !== XMLHttpRequest.DONE) return;if (xhr.status >= 200 && xhr.status < 300) {//返回正常数据console.log(xhr.response);} else {//返回相应的错误信息console.log(xhr.status, xhr.statusText);}
};//配置网络请求
//method:get/post/delete
//URL
xhr.open("GET", "http://123.207.32.32:8000/home/multidataa");//发送send网络请求
xhr.send();

XHR传递参数的四种方式

  • GET请求通过querystring进行请求
    • 缺点：使用明文进行传输
//创建AJAX对象
let xhr = new XMLHttpRequest();//监听状态变化
xhr.onload = function () {console.log(xhr.response);
};//设置响应数据格式
xhr.responseType = "json";//配置网络请求
//get请求，通过querystring进行参数的传递
xhr.open("get","http://123.207.32.32:1888/02_param/get?name=why&name=18&address=广州市"
);//发送网络请求
xhr.send();
  • POST请求 x-www-form-urlencoded格式
    • 需要对发送的格式进行设置 xhr.setRequestHeader
//创建AJAX对象
let xhr = new XMLHttpRequest();//监听状态变化
xhr.onload = function () {console.log(xhr.response);
};
//post请求，发送urlencoded
xhr.open("post", "http://123.207.32.32:1888/02_param/posturl");
//告知发送的是什么格式的数据
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//发送网络请求
xhr.send("name=why&name=18&address=广州市");
  • POST请求 FormData格式
    • 默认发送的就是 FormData格式的数据，因此不用设置
//HTML中有form表单,直接使用form表单即可
const formEl = document.getElementById("form")//创建AJAX对象
let xhr = new XMLHttpRequest();//监听状态变化
xhr.onload = function () {console.log(xhr.response);
};
//post请求，发送formData数据
xhr.open("post", "http://123.207.32.32:1888/02_param/posturl");const formData = new FormData(formEl)//发送网络请求
xhr.send(formData);
  • POST请求 JSON格式：常用
    • 需要将对象转成JSON字符串
    • 同时告知服务器传递的是什么格式的数据
//创建AJAX对象
let xhr = new XMLHttpRequest();//监听状态变化
xhr.onload = function () {console.log(xhr.response);
};//设置响应数据格式
xhr.responseType = "json";//post请求，发送JSON格式数据
xhr.open("post", "http://123.207.32.32:1888/02_param/postjson");//告知服务器传递的JSON格式数据
xhr.setRequestHeader("Content-type", "application/json");//发送网络请求,传递JSON字符串
xhr.send(JSON.stringify({ name: "why", age: 18, height: 1.88 }));

XHR过期时间和取消请求

  • 过期时间：xhr.timeout
    • 不设置默认为0，代表没有过期时间
    • 超过了设置的时间，浏览器没有得到相应的数据，就会取消请求
    • 通过 xhr.ontimeout可以进行监听
  • 取消请求：xhr.abort()
    • 通过调用此方法可以取消网络请求
    • 同时可以通过 xhr.onabort监听是否主动取消了网络请求
//创建AJAX对象
let xhr = new XMLHttpRequest();//监听状态变化
xhr.onload = function () {console.log(xhr.response);
};//设置响应数据格式
xhr.responseType = "json";//设置过期时间
xhr.timeout = 3000;
//监听过期时间
xhr.ontimeout = function () {console.log("时间过期了");
};//监听取消网络请求
xhr.onabort = function () {console.log("网络请求被取消了");
};//post请求，发送JSON格式数据
xhr.open("get", "http://123.207.32.32:1888/01_basic/timeout");//发送网络请求,传递JSON字符串
xhr.send();

XHR文件上传的接口演练

<input type="file" id="file" />
<button id="btn">上传</button><script>//获取元素let file = document.getElementById("file");let btn = document.getElementById("btn");//绑定事件btn.onclick = function () {//获取上传的文件let fileData = file.files;//准备上传数据let formData = new FormData();formData.append("test", fileData[0]);//实例化XHR对象let xhr = new XMLHttpRequest();//监听结果变化xhr.onload = function () {//获取结果console.log(xhr.response);};//网络请求设置xhr.open("POST", "123.207.32.32:1888/02_param/upload");//发送网络请求xhr.send(formData);};
</script>

认识Fetch和Fetch API

可以看作是早期的XMLHttpRequest的替代方案

  • Fetch的返回值是一个promise

    • 因此可以通过.then获取结果
    • 通过.catch获取错误请求

  • 基本使用

//完成网络请求
fetch("http://123.207.32.32:8000/home/multidata").then((response) => {console.log(response);
});//获取具体数据（版本一）
fetch("http://123.207.32.32:8000/home/multidata").then((response) => {//返回的数据是json就调用json(),text就调用text()方法//该方法也是一个promise，使用.then获取具体内容response.json().then((data) => {console.log(data);});
});//以上版本的代码，在.then中调用了.then，因此可以进行以下优化
//通过链式调用的方式
fetch("http://123.207.32.32:8000/home/multidata").then((response) => {//返回的数据是json就调用json(),text就调用text()方法return response.json();}).then((data) => {console.log(data);});//以上代码依旧可以做出优化，使用async/await
async function getData() {let response = await fetch("http://123.207.32.32:8000/home/multidata");let data = await response.json();console.log(data);
}getData();
  • 在发送网络请求中后，response中可以查看HTTP请求状态
 console.log(response.status, response.ok, response.statusText);//200 true "OK"

post请求有参数

使用post请求，默认传递的是formData格式的数据，因此传递其它格式的数据需要进行设置

async function getData() {let response = await fetch("http://123.207.32.32:1888/02_param/postjson", {//设置请求方法method: "post",//设置请求头headers: {"Content-type": "application/json",},//设置请求体body: JSON.stringify({ a: 100 }),});let data = await response.json();console.log(data);
}getData();

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/646416.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SQL语句 - 查询语句

SQL语句 - 查询语句

Data Query Language 文章目录 Data Query Language数据查询&#xff08;DQL&#xff09;基础查询1 基本查询2 排序查询3 条件查询4 分支结构查询5 查询函数6 分组查询7 分组过滤查询8 限定查询9 基础查询总结 面试题&#xff1a;一条SQL查询语句的执行流程高级查询1 子查询2 合…
阅读更多...
linux基础学习（7）：find命令

linux基础学习（7）：find命令

1.按照文件名搜索 find 搜索路径 选项 文件名 选项&#xff1a; -name&#xff1a;按文件名搜索 -ineme&#xff1a;不区分文件名大小写搜索 -inum&#xff1a;按inode号搜索 按文件名搜索跟按关键词搜索不一样&#xff0c;只能搜到文件名完整对应的文件 *根据文件名…
阅读更多...
电磁波的空间辐射的几种传输形式

电磁波的空间辐射的几种传输形式

一般来说&#xff0c;波的传播方式与波长有关&#xff0c;如低频段的地波传播&#xff0c;极低频段的地—电离层波导传播&#xff0c;短波段的天波传播&#xff0c;甚高频&#xff0c;超高频的直线传播和散射传播方式等。绕射和透射是电磁波传输特性与环境的关系&#xff0c;属…
阅读更多...
利用 Token Explorer 信号驾驭市场波动

利用 Token Explorer 信号驾驭市场波动

市场波动使加密货币投资组合面临风险&#xff0c;但是通过 Token Explorer 分析&#xff0c;我们可以对波动进行建模&#xff0c;提前预测市场风险&#xff0c;并找到最安全的投资策略。通过综合考虑 Token 价格、交易量、社交媒体信息和链上交易等各种数据&#xff0c;我们可以…
阅读更多...
【转载】linux摄像头驱动

【转载】linux摄像头驱动

Linux摄像头驱动学习第一篇&#xff0c;对虚拟视频驱动Virtual Video Driver(vivid)进行测试、分析、编写。 V4L2(Video for Linux two)是Linux内核中关于视频设备的内核驱动框架&#xff0c;为上层的访问底层的视频设备提供了统一的接口。 V4L2可以支持多种设备,它可以有以下…
阅读更多...
【进入游戏行业选游戏特效还是技术美术？】

【进入游戏行业选游戏特效还是技术美术？】

进入游戏行业选游戏特效还是技术美术&#xff1f; 游戏行业正处于蓬勃发展的黄金时期&#xff0c;科技的进步推动了游戏技术和视觉艺术的飞速革新。在这个创意和技术挑战交织的领域里&#xff0c;游戏特效和技术美术岗位成为了许多人追求的职业目标。 这两个岗位虽然紧密关联…
阅读更多...
开始读 Oracle PL/SQL Programming 第6版

开始读 Oracle PL/SQL Programming 第6版

最近觉得PL/SQL越来越重要&#xff0c;因为这本书早就在待读列表中&#xff0c;因此决定系统的学一下。 2024年1月24日晚开始读。 在亚马逊上的评价还不错&#xff1a; 本书的第一作者是Steven Feuerstein&#xff0c;是Oracle资深的Developer Advocate。 本书的示例代码可…
阅读更多...
如何实现激光雷达运动补偿，这篇就够了

如何实现激光雷达运动补偿，这篇就够了

目录 激光雷达为什么会存在运动畸变 激光雷达如何运动去畸变 C++实践激光雷达运动补偿(辅助传感器) 实践激光雷达ICP运动补偿 参考文献 激光雷达为什么会存在运动畸变 首先要理解为什么会产生运动畸变。激光雷达扫描物体形成点云的过程自身伴随着旋转运动，每次激…
阅读更多...
城市开发区视频系统建设方案：打造视频基座、加强图像数据治理

城市开发区视频系统建设方案：打造视频基座、加强图像数据治理

一、背景需求 随着城市建设的步伐日益加快&#xff0c;开发区已经成为了我国工业化、城镇化和对外开放的重要载体。自贸区、开发区和产业园的管理工作自然也变得至关重要。在城市经开区的展览展示馆、进出口商品展示交易中心等地&#xff0c;数千路监控摄像头遍布各角落&#…
阅读更多...
面试常问的Spring AOP底层原理

面试常问的Spring AOP底层原理

AOP底层原理可以划分成四个阶段&#xff1a;创建代理对象阶段、拦截目标对象阶段、调用代理对象阶段、调用目标对象阶段 第一阶段&#xff1a;创建代理对象阶段 通过getBean&#xff08;&#xff09;方法创建Bean实例根据AOP的配置匹配目标类的类名&#xff0c;判断是否满足切…
阅读更多...
Termux结合内网穿透实现无公网ip远程SFTP传输文件

Termux结合内网穿透实现无公网ip远程SFTP传输文件

目录 前言 1. 安装openSSH 2. 安装cpolar 3. 远程SFTP连接配置 4. 远程SFTP访问 4. 配置固定远程连接地址 结语 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊Termux结合内网穿透实现无公网ip远程SFTP传输文件&#xff0c;希望大家能…
阅读更多...
RisingWave 存储引擎优化：更高的性能与更低的成本

RisingWave 存储引擎优化：更高的性能与更低的成本

1背景 在「Hummock &#xff1a;专为 RisingWave 流处理而设计的云原生存储引擎」一文中里我们已经介绍了 Hummock 的设计理念与基本架构&#xff0c;本文主要介绍 Hummock 近期几个版本的重大改进与优化 2Fast Compaction 在设计之初&#xff0c;Hummock 的数据文件格式参…
阅读更多...
统计linux cpu已使用核心数目

统计linux cpu已使用核心数目

查看cpu核心数 nproc 统计cpu负载 os.getoadavg() 15.09: 过去 1 分钟的平均负载。15.17: 过去 5 分钟的平均负载。15.74: 过去 15 分钟的平均负载。 这些数字表示系统在过去一段时间内的平均负载。平均负载是指在系统中运行或等待运行的进程数。通常&#xff0c;如果这些…
阅读更多...
WinSCP如何使用公网TCP地址访问本地服务器

WinSCP如何使用公网TCP地址访问本地服务器

文章目录 1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 ​ Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件&#xff0c;它的主要功能是在本地与远程计…
阅读更多...
【pytorch框架】使用 PyTorch 进行深度学习

【pytorch框架】使用 PyTorch 进行深度学习

1.Pytorch介绍 PyTorch 是由 Facebook 创建和发布的用于深度学习计算的 Python 库。它起源于早期的库 Torch 7&#xff0c;但完全重写。 它是两个最受欢迎的深度学习库之一。PyTorch 是一个完整的库&#xff0c;能够训练深度学习模型以及在推理模式下运行模型&#xff0c;并支…
阅读更多...
阿里巴巴中国站上传图片到1688 API(upload_img-上传图片到1688-1688.upload_img)

阿里巴巴中国站上传图片到1688 API(upload_img-上传图片到1688-1688.upload_img)

随着电子商务的快速发展&#xff0c;越来越多的企业开始利用阿里巴巴中国站平台进行产品推广和销售。为了更好地展示产品&#xff0c;上传图片成为了必不可少的一环。本文将介绍如何使用阿里巴巴中国站API中的upload_img接口上传图片到1688平台&#xff0c;并附上相关的代码示例…
阅读更多...
CFD网格中面元和体元几何关系整理

CFD网格中面元和体元几何关系整理

CFD网格中面元和体元几何关系整理 二维图示 三维图示 说明 变量说明备注 X f \bold{X_f} Xf​面元中心 S \bold{S} S面元法向 X P \bold{X_P} XP​Owner体心 X N \bold{X_N} XN​Neighbour体心 X P f \bold{X_{Pf}} XPf​ X f − X P \bold{X_f}-\bold{X_P} Xf​−XP​ X N…
阅读更多...
阿里员工自曝：某多多的4轮面试都通过了，但到了谈薪资的环节，被HR为难

阿里员工自曝：某多多的4轮面试都通过了，但到了谈薪资的环节，被HR为难

HR 的为难 又是一期「排雷心理按摩」&#xff0c;正在密谋年底跳槽的同学需要额外注意。 起源是我看到了这么一篇帖子分享&#xff1a; 一位目前应该还是在职的阿里巴巴的员工&#xff0c;前后花了一个多月的时间&#xff0c;顺利通过了某多多的 4 轮面试。 按道理&#xff0c;…
阅读更多...
windows下nginx代理静态资源失效

windows下nginx代理静态资源失效

起因&#xff1a;想把公司网站弄成动静分离的&#xff0c;但是本地代理静态图片一致失效。 1.查看通配符是否正确 2.查看路径是否正确 还有一种可能是我没想到的&#xff0c;nginx进程没关闭掉导致的&#xff0c;属实离谱&#xff0c;我打开任务管理器搜索nginx&#xff0c;…
阅读更多...
snmp网管服务MIB Browser使用

snmp网管服务MIB Browser使用

MIB Browser 软件打开显示界面&#xff0c;首先需要配置地址、端口号、团体名、snmp版本点击Advanced&#xff0c;弹出配置界面 配置成功后双击走测列表信息就可以查看交换机端口状态、版本号等信息&#xff1b; 例如&#xff1a;我的交换机8号端口是正常&#xff0c;其他端口是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023