您现在的位置是：网站首页> 编程资料编程资料

深入学习JS XML和Fetch请求_javascript技巧_

2023-05-24 462人已围观

简介 深入学习JS XML和Fetch请求_javascript技巧_

1.HTTP 简介

  • HTTP ( HyperText Transfer Protocol）超文本传输协议，是万维网（World Wide Web) 的基础协议

HTTP/0.9 ( 1991 )

  • 仅支持 GET 请求
  • 不包含 HTTP 头，只能传输 HTML 文件
  • 没有状态码或错误代码

HTTP/1.0 （1996 ）

  • 发送时添加协议版本信息
  • 响应添加状态码，我们熟知的200、404 等
  • 引入了 HTTP 头，多了传递信息的手段，更加灵活和方便扩展
  • HTTP 头里面引入了重要的 content-type 属性，具备了传输除纯文本 HTML 文件以外其他类型文档的能力

HTTP/1.1（1997）

  • 连接复用，长连接
    • 多个请求都可以复用一个tcp连接。
  • 而1.0每次请求都需要重新建立连接。

  • 管道化技术
    • 多个连续的请求不用等待返回就可以发送下一个请求，这样就减少了耗费在网络延迟上的时间

  • 响应分块
    • 单个请求返回部分内容，需前后端协商

  • 新的缓存控制机制
    • cache-control、eTag就是1.1引入的，强缓存和协商缓存
  • 新增 host 请求头，能够使不同域名配置在同一个 IP 地址的服务器上

HTTP1.x请求报文

HTTP1.x响应报文

常用状态码

header请求头

名字说明示例
Accept告知（服务器）客户端可以处理的内容类型text/html, application/xhtml+xml，application/xml;q=0.9，*/*;q=0.8
Aaccept-Encoding客户端能够理解的内容编码方式gzip， deflate
Accept-Language客户端可以理解的语言zh-CN，zh;q=0.9，en;q=0.8
Cache-Control表示浏览器的缓存方式Cache-Control: max-age = xxx
cookiecookie信息 
Connection是否是长连接keep-live
Content-Type实际发送的数据类型content-type:application/x-www-form
Host要发送到的服务器主机名和端口号www.baidu.com
User-Agent用户代理。包含应用类型、操作系统、软件开发商以及版本号等 
Referer当前请求的来源页面的地址 

header响应头

名字说明示例
Date服务器的响应的日期和时间 
Connection是否会关闭网络连接Connection: keep-alive
Keep-Alive空闲连接需要保持打开状态Keep-Alive: timeout=5, max=10的最小时长和最大请求数( Connection设置为“keep-alive”才有意义)Keep-Alive: timeout=5, max=10空闲5秒，最多接收10次请求就断开。
Content-Encoding内容编码方式Content-Encoding: gzip
Content-Length报文中实体主体的字节大小content-Length: 1963
Content-Type内容的内容类型Content-Type: text/html; charset=utf-8
Server服务器所用到的软件相关信息Server: openresty
基于NGINX的可伸缩的Web平台
Set-Cookie向客户端发送cookieSet-Cookie:
imooc_isnew=2; expires=Thu, 02-Mar-202312:3242 GMT; Max-Age=31536000; path=/;
domain=.baidu.com

Content-Type

1.application/x-www-form-urlencoded

结果:

2.multipart/form-data

结果:
表单提交
代码提交:

3.application/json

结果:

服务端代码：

const express = require("express"); const path = require("path"); const multer = require("multer"); const server = express(); server.use( express.urlencoded({ extended: true, }) ); server.use(express.json()); server.use(express.static(path.join(__dirname, "./static"))); server.use("/urlencoded", function (req, res) { console.log("收到请求(urlencoded)"); console.log("body:", req.body); res.json({ code: 10000, data: req.body, }); }); server.use("/multipart", multer().none(), function (req, res) { console.log("收到请求(multipart)"); console.log("body:", req.body); res.json({ code: 10000, data: req.body, }); }); server.use("/json", multer().none(), function (req, res) { console.log("收到请求(json)"); console.log("body:", req.body); res.json({ code: 10000, data: req.body, }); }); server.listen(3000, function () { console.
                
                

                

                                            
上一篇：vue动态代理无须重启项目解决方案详解_vue.js_

                                                                
下一篇：vuepress打包部署踩坑及解决_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网