前端网络请求真的搞懂了吗？解密前端参数传递方式，让开发更从容（一）https://developer.aliyun.com/article/1426378
如何使用FormData进行表单数据编码
可以使用 FormData 对象来将表单数据编码，以便用于 AJAX 请求或其他相关用途。
以下是使用
FormData对象进行表单数据编码的示例：
<form id="example-form"> <label> 用户名： <input type="text" name="username"> </label> <label> 密码： <input type="password" name="password"> </label> <label> 头像： <input type="file" name="avatar"> </label> <button type="button" onclick="submitForm()">提交</button> </form> <script> function submitForm() { const form = document.querySelector('#example-form'); const formData = new FormData(form); // 将编码后的数据发送到服务器 fetch('/api/submit-form', { method: 'POST', body: formData }) .then(response => { if (response.ok) { return response.json(); } else { throw new Error('提交表单失败'); } }) .then(data => { console.log('提交成功', data); }) .catch(error => { console.error(error.message); }) } </script>
在以上示例中，我们使用 FormData 对象并指定表单 DOM 元素，并将其赋值给 formData 变量。然后，使用 fetch() 发送了一个 HTTP POST 请求，将 formData 作为请求体中的数据，发送到了服务器上的 /api/submit-form 接口。
使用Ajax提交请求时如何使用FormData
使用 Ajax 进行表单数据提交时，可以使用 FormData 对象来进行表单数据编码，简化表单数据的构造和传输，以下是使用 Ajax 和 FormData 进行表单数据提交的一个示例：
<form id="example-form"> <label> 用户名： <input type="text" name="username"> </label> <label> 密码： <input type="password" name="password"> </label> <label> 头像： <input type="file" name="avatar"> </label> <button type="button" onclick="submitForm()">提交</button> </form> <script> function submitForm() { const form = document.querySelector('#example-form'); const formData = new FormData(form); // 使用 Ajax 发送数据 const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/submit-form', true); xhr.onload = function() { if (this.status === 200) { console.log(this.responseText); } else { console.error('请求发生错误'); } }; xhr.send(formData); } </script>
以上示例中，我们使用 FormData 对象将表单数据编码，并在点击提交按钮时，使用 XMLHttpRequest 对象发送了一个 HTTP POST 请求，将 formData 作为请求体中的数据，发送到了服务器上的 /api/submit-form 接口。在 xhr.onload 事件中，我们判定如果返回状态值为 200，就将响应文本在控制台输出，否则输出错误信息。
FormData的使用场景
FormData 可以用于处理表单提交的数据，并将数据以正确的方式编码和添加到 AJAX 请求中进行传输。
以下是使用
FormData的一些常见应用场景：
- 文件上传 - 可以通过
FormData对象提交表单中的文件。使用append()方法可以将文件对象添加到FormData中，然后通过 AJAX 请求将数据提交到服务器。这是FormData最常用的应用场景之一。 - 表单提交 - 可以使用
FormData对象将表单数据编码，并通过 AJAX 请求将数据提交到服务器，这种方式通常比传统的表单提交更加灵活。 - 图片预览 - 可以使用
FileReader对象读取选择的图片文件，并将文件内容转换为 Base64 格式后，将转换后的字符串赋值给表单中的一个隐藏字段，然后通过FormData异步提交给服务器。 - AJAX 文件下载 - 可以将要下载的文件和其他参数一起添加到
FormData对象中，并通过 AJAX 请求将数据提交到服务器，从而实现文件下载。 - 渐进式应用 - 可以通过
FormData对象来支持渐进式表单提交，如实时保存数据，并在用户离开页面时提交数据。
总之，FormData 可以在各种情况下使用，方便了数据的处理和异步提交。无论是上传图片、文件，还是通过 AJAX 提交表单，都可以使用 FormData 来简化操作。
| 用途 | 描述 |
| 文件上传 | 使用 FormData 对象提交表单中的文件，并通过 AJAX 请求将数据传输到服务器 |
| 表单提交 | 使用 FormData 对象将表单数据编码，并通过 AJAX 请求将数据提交到服务器，比传统表单提交更加灵活 |
| 图片预览 | 使用 FileReader 对象读取并转换图片文件为 Base64 格式后，将字符串赋值给表单的隐藏字段，并通过 FormData 异步提交给服务器 |
| AJAX 文件下载 | 使用 FormData 对象将要下载的文件和其他参数添加到数据中，并通过 AJAX 请求将数据传输到服务器 |
| 渐进式应用 | 使用 FormData 对象支持渐进式表单提交，如实时保存数据，并在用户离开页面时提交数据 |
FormData 是一种非常有用的对象，可以用于处理表单提交的数据，并将数据以正确的方式编码和添加到 AJAX 请求中进行传输，从而实现各种常见的应用，如文件上传、表单提交、图片预览、AJAX 文件下载等，同时也可以支持渐进式应用。通过使用 FormData，我们可以简化数据处理和异步提交，提高我们的开发效率。
V. HTTP Headers
什么是HTTP Headers
HTTP Headers（HTTP头部信息）是在 HTTP 协议通信过程中，对于 HTTP 请求和 HTTP 响应的描述性信息。
HTTP header 主要由一系列基本的名称/值对（键值对）组成，用于描述客户端和服务器之间的各种数据类型和操作，例如，客户端可以通过设置 HTTP header 来告诉服务器请求的方法、使用的编码格式、预期的 MIME 类型等信息，服务器则可以通过设置 HTTP header 来告诉客户端响应的状态码、MIME 类型、缓存策略等信息。
HTTP header 分为请求头和响应头，请求头包含客户端向服务器端请求信息之前发送的信息，响应头则包含服务器返回的信息。
HTTP 头部信息通常包括以下几个基本的属性：
- Accept：客户端接受的 HTTP 响应的数据类型；
- Content-Type：请求或响应内容的 MIME 类型；
- Authorization：客户端提供的证书或令牌；
- Cache-Control：缓存策略；
- Connection：请求完成之后是否关闭网络连接；
- Content-Length：请求或响应的内容长度（单位是字节）；
- Cookie：客户端传输到服务器的 Cookie 值；
- Host：请求的主机名和端口号；
- User-Agent：客户端的应用程序或浏览器信息。
除了上面列举的基本属性之外，还有一些其他特定于某一类型的数据请求或响应的 HTTP header 信息，例如：
- Referer：客户端用户的来源网址；
- Location：重定向的地址；
- Content-Encoding：数据请求或响应的编码方式；
- Set-Cookie：服务器端写入的 Cookie 值；
- Last-Modified：内容的最后修改时间。
HTTP header 是 Web 应用程序中的关键元素，有助于客户端和服务器端之间的通信。通过设置正确的 HTTP header，可以帮助实现各种功能和技术，如缓存、安全验证、内容压缩、跨域资源共享等。
常见的HTTP Headers及其作用
以下是常见的 HTTP Headers 及其作用：
| HTTP Headers | 作用 |
| Accept | 用于向服务器指出客户端希望接受的 MIME 类型 |
| Authorization | 包含客户端提供的证书或令牌 |
| Cache-Control | 用于在请求和响应间传递缓存指令 |
| Connection | 用于指定是否关闭网络连接 |
| Content-Encoding | 用于指定文档内容的编码方式 |
| Content-Language | 用于指定文档内容的自然语言 |
| Content-Length | 用于指定请求或响应内容的长度 |
| Content-Type | 用于指定请求或响应内容的 MIME 类型 |
| Cookie | 包含客户端传输到服务器的 Cookie 值 |
| Host | 指定请求的主机名和端口号 |
| If-Modified-Since | 用于执行条件 GET 操作 |
| Last-Modified | 请求资源的最后修改时间 |
| Referer | 发出请求的页面的 URI |
| User-Agent | 包含了客户端的应用程序、操作系统、浏览器等信息 |
| Set-Cookie | 向客户端写入 Cookie 值 |
| Location | 用于执行 HTTP 重定向 |
不同的 HTTP Header 具有不同的作用，可以用于传递数据信息，请求或响应内容的控制以及缓存策略等内容。开发者可以根据自己的需求选择适合的 HTTP Header 来完成网站开发任务。
如何使用HTTP Headers传递参数
HTTP Headers 可以用于传递请求或响应中的参数信息，具体方法如下：
- 使用
XMLHttpRequest对象（简称 AJAX），可以向服务器发送 HTTP 请求，并在请求中通过设置 HTTP Headers 来传递参数信息。例如，可以使用setRequestHeader()方法来设置请求头部信息：
const xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com/api'); xhr.setRequestHeader('Authorization', 'Bearer token'); xhr.send();
在这个例子中，setRequestHeader() 方法被用来设置认证 token。这样，就可以将认证信息作为一个请求头信息，发送到服务器上。
- 像 HTTP Headers 一样设置 URL 中的参数。HTTP URL 经常会传递参数信息，可以跟 HTTP Header 相配合，将数据传递到服务器。例如：
http://example.com/api?username=user&password=pass
在这个例子中，URL 参数是 username 和 password。如果服务器知道如何读取这些参数，就可以处理 HTTP 请求，返回结果适当地响应。使用这种方式传递参数的好处是，URL 参数的格式比请求头更加简单，容易处理。
总之，HTTP Headers 可以用来传递请求或响应中的参数信息，具有非常广泛的应用场景，并且搭配 AJAX 使用时可实现无需页面刷新的异步数据传送。但是开发者需要注意，不要把过多的信息放到头部参数中，以免拖慢服务器的响应速度。
HTTP Headers的使用场景
以下是 HTTP Headers 的常见使用场景及其具体的 HTTP Headers：
| 场景 | HTTP Headers |
| 认证 | Authorization |
| 缓存控制 | Cache-Control, Expires |
| 压缩 | Accept-Encoding, Content-Encoding |
| 跨域请求 | Access-Control-Allow-Credentials, Access-Control-Allow-Headers, Access-Control-Allow-Methods, Access-Control-Allow-Origin |
| 表单提交 | Content-Type, Content-Disposition |
| 断点续传 | Range, Content-Range |
| 跳转 | Location |
| 用户代理 | User-Agent |
| Cookie 传输 | Cookie, Set-Cookie |
HTTP Headers 可以用于传输请求和响应的信息，不同的场景需要使用不同的 HTTP Headers。对于认证、表单提交、断点续传等场景，HTTP Headers 通常会承载关键信息；对于缓存控制、跨域请求、压缩、用户代理等场景，HTTP Headers 可以帮助服务器和客户端作出决策。最常见的 HTTP Headers 是 Content-Type，用于指定请求或响应消息的 MIME 类型，因为它能等效于设置一些其他 HTTP Headers。
通过使用正确的 HTTP Headers，可以使客户端和服务器之间的数据传输更加高效，并保证信息的传输和存储的安全性，开发者应该在实际应用中根据不同场景选择对应的 HTTP Headers。
VI. JSON数据提交
JSON格式介绍
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，基于 JavaScript 语法的子集，因此易于阅读和编写。JSON 格式是一种常见的数据交换格式，旨在通过独立于操作系统和编程语言的方式实现数据的交换和远程访问。
JSON 格式是一种完全独立的格式，不依赖于任何语言或软件包。
它的设计简单，可读性强，易于实现和扩展。
JSON 格式可以表示
- 对象（使用花括号
{}） - 数组（使用方括号
[]） - 原始值（例如字符串、数字、布尔值和空值）
- 并且支持嵌套和复合数据类型。
下面是一个示例 JSON 对象：
{ "name": "John", "age": 30, "email": "john@example.com", "hobbies": ["reading", "music", "sports"], "address": { "street": "123 Main St", "city": "New York", "state": "NY", "zip": "10001", "country": "USA" } }
在这个例子中，JSON 对象表示了一个人的信息，包括姓名、年龄、爱好、地址等。其中，hobbies 是一个数组类型，address 是一个嵌套的对象类型。
使用 JSON 格式的最主要优点是它能够简化数据交换的过程，使得不同系统之间的数据交换变得更加容易和可靠。在 Web 应用程序的开发中，JSON 格式也被广泛使用，例如在 AJAX 技术中，通过从服务器获取 JSON 格式数据，可以实现动态页面效果。
如何将JSON数据序列化为字符串
将 JSON 数据序列化为字符串的过程被称为 “stringify” 。
在 JavaScript 中，可以使用 JSON.stringify() 方法将 JavaScript 数据类型序列化为 JSON 字符串。
以下是使用 JSON.stringify() 方法将 JavaScript 对象转化为 JSON 字符串的示例：
const data = { "name": "John", "age": 30, "hobbies": ["reading", "music", "sports"], "address": { "street": "123 Main St", "city": "New York", "state": "NY", "zip": "10001", "country": "USA" } }; const jsonString = JSON.stringify(data); console.log(jsonString); // {"name":"John","age":30,"hobbies":["reading","music","sports"],"address":{"street":"123 Main St","city":"New York","state":"NY","zip":"10001","country":"USA"}}
以上代码中，定义了一个 JavaScript 对象 data ，该对象包含一些属性和子属性。通过在 JSON.stringify() 方法中传入 data 对象，可以将其序列化为 JSON 字符串并赋值给 jsonString 变量。
需要注意的是，JSON.stringify() 方法默认情况下会将包含 “undefined”、“function” 或 “symbol” 类型的属性删除，因此建议使用时添加过滤函数或指定额外参数。同时，使用 JSON.stringify() 方法序列化的 JSON 字符串可以轻松地通过网络发送、存储或在 Web 应用程序中交换。
如何在请求参数中传递和解析JSON数据
在 Web 应用程序中，常常需要在请求参数中传递和解析 JSON 数据。以下是一些常见的方法：
1. 使用 GET 请求和 URL 参数传递 JSON 数据：
const data = { "name": "John", "age": 30 }; const urlParams = new URLSearchParams(JSON.stringify(data)); const response = await fetch('/api?data=' + encodeURIComponent(urlParams.toString()));
在这个例子中，JavaScript 对象 data 被序列化为 JSON 字符串后通过 URLSearchParams 添加到 URL 参数中，最后使用 encodeURIComponent() 方法对参数进行编码处理，发送 GET 请求。
2. 使用 POST 请求和请求体传递 JSON 数据：
const data = { "name": "John", "age": 30 }; const response = await fetch('/api', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
在这个例子中，JavaScript 对象 data 被序列化为 JSON 字符串后设置为 POST 请求的请求体内容，通过 headers 中指定的 Content-Type 通知服务器该请求体是一个 JSON 数据。
在服务器端，可以使用对应的解析方法将 JSON 数据反序列化为 JavaScript 对象。例如，在 Node.js 中，可以使用内置的 JSON.parse() 方法解析 JSON 数据：
const http = require('http'); http.createServer((req, res) => { if (req.method === 'POST' && req.url === '/api') { let body = ''; req.on('data', (chunk) => { body += chunk.toString(); }); req.on('end', () => { const data = JSON.parse(body); console.log(data); res.writeHead(200, { 'Content-Type': 'application/json' }); res.end(JSON.stringify(data)); }); } }).listen(8080);
以上是一个简单的 Node.js HTTP 服务器，当接收到 /api 的 POST 请求时，将请求体通过 JSON.parse() 方法反序列化为 JavaScript 对象并输出到控制台，然后将其再次序列化为 JSON 字符串并返回到客户端。
以上是一些常见的方法，通过这些方法，您可以在 Web 应用程序中轻松地传递和解析 JSON 数据。
JSON数据提交的使用场景
以下是 JSON 数据提交的常见使用场景及其优势：
| 场景 | 优势 |
| 前后端数据交互 | 使用 JSON 进行前后端数据交互时，前端可以将 JavaScript 对象或数组转化为 JSON 字符串后发送到服务器，服务器可以简单地解析 JSON 数据并以同样的格式返回数据，大大简化了数据格式转换的过程。 |
| Web API 设计 | 在设计 Web API 时，通常会选择使用 JSON 格式作为数据交换的格式。使用 JSON 格式作为数据交换格式，不仅能够轻松处理不同数据类型和结构的数据，还能与多种编程语言和平台配合使用。 |
| 存储数据 | 在 Web 应用程序中，将数据存储为 JSON 格式的文件或数据库记录，可以提高应用程序的性能和可维护性。这是因为，JSON 格式是易于阅读和编写的，而且通常比传统的关系型数据库更快地进行读写数据。 |
| 处理 RESTful API | 在处理 RESTful API 时，通常使用 JSON 格式传递数据。使用 JSON 格式的优点就在于，它可以轻松地表示多个复杂嵌套的对象和数组，并且这些对象和数组可以再次嵌套在一起。 |
使用 JSON 格式进行数据提交的优点就在于其可读性强，易于解析和扩展，并且可以与不同编程语言和平台进行协作。在 Web 应用程序的开发中，因为使用 JSON 数据可以大大简化前后端交互的过程，因此越来越多的 Web 应用程序开始使用 JSON 数据格式。
VII. XML数据提交
XML数据格式介绍
XML（Extensible Markup Language）是一种通用的标记语言，用于描述数据结构和内容。
XML 可以表示各种复杂的数据类型，如数字、文本、日期、时间、对象、数组等等，同时具有自我描述性：通过描述数据的结构和定义数据属性，可以获取数据的详细说明和目的。
以下是一个简单的 XML 示例：
<person> <name>John</name> <age>30</age> <address> <street>123 Main St</street> <city>New York</city> <state>NY</state> <zip>10001</zip> </address> </person>
在此示例中，XML 标记 ”” 表示 “人” 类型的数据，标记下的子元素包含个人的姓名、年龄和地址。同时，子元素中还有子元素，表示地址信息的详细信息。
与使用标记语言（如 HTML）的网页相比，XML 更强调数据的格式和结构描述。通过定义文档类型声明（DTD）或 XML 模式（XSD）等机制，可对 XML 文档结构和属性进行严格的定义和规范，从而增强了数据交换和数据处理的准确性和可靠性。
由于其灵活性和可扩展性，XML 已被广泛应用于跨平台数据交换、Web 服务、配置文件和消息传递等领域。
前端网络请求真的搞懂了吗？解密前端参数传递方式，让开发更从容（三）https://developer.aliyun.com/article/1426380
