什么是请求参数、表单参数、url参数、header参数、Cookie参数？一文讲懂_前端请求参数

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

当天晚上我向老同学求助，他问我上课是不是又睡过去了？

我说你怎么知道？

他说当然咯，你上课睡觉不学习又不是一天两天的事情…

后来他告诉我得好好学一下 http 协议，看看可以在协议的哪些位置放请求参数。

一个简单的 http 服务器还原

那么，在正式讲解之前，我们先简单搭建一个 http 服务器，阿菌沿用经典的 python 版云你好服务器进行讲解。

云你好服务器的代码很简单，服务器首先会获取 name 用户名这个参数，如果用户传了这个参数，就返回 Hello xxx，xxx 指的是 name 用户名；如果用户没有传这个参数则返回 Hello World：

# 云你好服务源码
from flask import Flask
from flask import request

app = Flask(__name__)

# 云你好服务 API 接口
@app.get("/api/hello")
def hello():
    # 看用户是否传递了参数 name
    name = request.args.get("name", "")
    # 如果传了参数就向目标对象打招呼，输出 Hello XXX，否则输出 Hello World
    return f"Hello {name}" if name else "Hello World"

# 启动云你好服务
if __name__ == '__main__':
    app.run()

为了快速开发（大伙可以下载一个 python 把这个代码跑一下，用自己的语言实现一个类似的服务器也是可以的），阿菌这里使用了 flask 框架构建后端服务。

在具体获取参数的时候，我选择了在 request.args 中获取参数。这里提前剧透一下：在 flask 框架中，request.args 指的是从 url 中获取参数（不过这是我们后面讲解的内容，大家有个印象就好）

抓包查看 http 报文

有了 http 服务器后，我们开始深入讲解 http 协议，em…个人觉得只在学校上课看教材学计算机网络好像还欠缺了点啥，比较推荐大家下载一个像 Wireshark 这样的网络抓包软件，动手拆解网络包，深入学习各种网络协议。抓取网络包的示例视频

为了搞清楚什么是请求参数、表单参数、url 参数、Header 参数、Cookie 参数，我们先发一个 http 请求，然后抓取这个请求的网络包，看看一份 http 报文会携带哪些信息。

呼应开头，用户阿菌是个只会发表单数据的萌新，他使用 postman 向云你好 api 发送了一个 post 请求：

剧情发展正常，我们没能得到 Hello 阿菌（服务器会到 url 中获取参数，咱们用表单形式提交，所以获取不到）

由于咱们对请求体这个概念比较模糊，接下来我们重新发一个一模一样的请求，并且通过 Wireshark 抓包看一下：

可以看到强大的 Wireshark 帮助我们把请求抓取了下来，并把整个网络包的链路层协议，IP层协议，传输层协议，应用层协议全都解析好了。

由于咱们小码农一般都忙于解决应用层问题，所以我们把目光聚焦于高亮的 Hypertext Transfer Protocol 超文本传输协议，也就是大名鼎鼎的 HTTP 协议。

首先我们查看一下 HTTP 报文的完整内容：

可以看到，http 协议大概是这么组成的：

• 第一行是请求的方式，比如 GET / POST / DELETE / PUT
• 请求方式后面跟的是请求的路径，一般把这个叫 URI（统一资源标识符）

补充：URL 是统一资源定位符，见名知义，因为要定位，所以要指定协议甚至是位置，比如这样：http://localhost:5000/api/hello

• 请求路径后面跟的是 HTTP 的版本，比如这里是 HTTP/1.1

完整的第一行如下：

POST /api/hello HTTP/1.1

第二行的 User-Agent 则用于告诉对方发起请求的客户端是啥，比如咱们用 Postman 发起的请求，Postman 就会自动把这个参数设置为它自己：

User-Agent: PostmanRuntime/7.28.4

第三行的 Accept 用于告诉对方我们希望收到什么类型的数据，这里默认是能接受所有类型的数据：

Accept: */*

第四行就非常值得留意，Postman-Token 是 Postman 自己传的参数，这个我们放到下面讲！

Postman-Token: ddd72e1a-0d63-4bad-a18e-22e38a5de3fc

第五行是请求的主机，网络上的一个服务一般用 ip 加端口作为唯一标识：

Host: 127.0.0.1:5000

第六行指定的是咱们请求发起方可以理解的压缩方式：

Accept-Encoding: gzip, deflate, br

第七行告诉对方处理完当前请求后不要关闭连接：

Connection: keep-alive

第八行告诉对方咱们请求体的内容格式，这个是本文的侧重点啦！比如我们这里指定的是一般浏览器的原生表单格式：

Content-Type: application/x-www-form-urlencoded

前端面试    用前端面试题库   MST题宝库

好了，下面大家要留意了，第九行的 Content-Length 给出的是请求体的大小。

而请求体，会放在紧跟着的一个空行之后。比如本请求的请求体内容是以 key=value 形式填充的，也就是我们表单参数的内容了：

Content-Length: 23

name=%E9%98%BF%E8%8F%8C

看到这里我们先简单小结一下，想要告诉服务器我们发送的是表单数据，一共需要两步：

1. 将 Content-Type 设置为 application/x-www-form-urlencoded
2. 在请求体中按照 key=value 的形式填写请求参数

什么是协议？进一步了解 http

好了，接下来我们进一步讲解，大家试想一下，网络应用，其实就是端到端的交互，最常见的就是服务端和客户端交互模型：客户端发一些参数数据给服务端，通过这些参数数据告诉服务端它想得到什么或想干什么，服务端根据客户端传递的参数数据作出处理。

传输层协议通过 ip 和端口号帮我们定位到了具体的服务应用，具体怎么交互是由我们程序员自己定义的。

大概在 30 年前，英国计算机科学家蒂姆·伯纳斯-李定义了原始超级文本传输协议（HTTP），后续我们的 web 应用大都延续采用了他定义的这套标准，当然这套标准也在不断地进行迭代。

许多文献资料会把 http 协议描述得比较晦涩，加上协议这个词听起来有点高大上，初学者入门学习的时候往往感觉不太友好。

其实协议说白了就是一种格式，就好比我们写书信，约定要先顶格写个敬爱的 xxx，然后写个你好，然后换一个段落再写正文，可能最后还得加上日期署名等等。

我们只要按照格式写信，老师就能一眼看出来我们在写信；只要我们按协议格式发请求数据，服务器就能一眼看出来我们想要得到什么或想干什么。

当然，老师是因为老早就学过书信格式，所以他才能看懂书信格式；服务端程序也一样，我们要预先编写好 http 协议的解析逻辑，然后我们的服务器才能根据解析逻辑去获取一个 http 请求中的各种东西。

当然这个解析 http 协议的逻辑不是谁都能写出来的，就算能写出来，也未必写得好，所以我们会使用厉害的人封装好的脚手架，比如 java 里的 spring 全套、Go 语言里的 Gin 等等。

回到我们开头给出的示例：

from flask import Flask
from flask import request



### ajax
1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

![ajax.PNG](https://img-blog.csdnimg.cn/img_convert/8d7720cc32faa9c219d42d5b63b0a12d.webp?x-oss-process=image/format,png)

![前12.PNG](https://img-blog.csdnimg.cn/img_convert/7720751282229e231755d6e95543c05d.webp?x-oss-process=image/format,png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

ask import request



### ajax
1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

[外链图片转存中...(img-8OqtvrOz-1715223432640)]

[外链图片转存中...(img-eXRio57H-1715223432641)]

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**