前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(二)

简介: 前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容

前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(一)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 对象来进行表单数据编码,简化表单数据的构造和传输,以下是使用 AjaxFormData 进行表单数据提交的一个示例:

<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 的一些常见应用场景:

  1. 文件上传 - 可以通过 FormData 对象提交表单中的文件。使用 append() 方法可以将文件对象添加到 FormData 中,然后通过 AJAX 请求将数据提交到服务器。这是 FormData 最常用的应用场景之一。
  2. 表单提交 - 可以使用 FormData 对象将表单数据编码,并通过 AJAX 请求将数据提交到服务器,这种方式通常比传统的表单提交更加灵活。
  3. 图片预览 - 可以使用 FileReader 对象读取选择的图片文件,并将文件内容转换为 Base64 格式后,将转换后的字符串赋值给表单中的一个隐藏字段,然后通过 FormData 异步提交给服务器。
  4. AJAX 文件下载 - 可以将要下载的文件和其他参数一起添加到 FormData 对象中,并通过 AJAX 请求将数据提交到服务器,从而实现文件下载。
  5. 渐进式应用 - 可以通过 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 可以用于传递请求或响应中的参数信息,具体方法如下:

  1. 使用 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。这样,就可以将认证信息作为一个请求头信息,发送到服务器上。

  1. 像 HTTP Headers 一样设置 URL 中的参数。HTTP URL 经常会传递参数信息,可以跟 HTTP Header 相配合,将数据传递到服务器。例如:
http://example.com/api?username=user&password=pass

在这个例子中,URL 参数是 usernamepassword。如果服务器知道如何读取这些参数,就可以处理 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

相关文章
|
13天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
14 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
22天前
|
机器学习/深度学习 自然语言处理 数据处理
大模型开发:描述长短期记忆网络(LSTM)和它们在序列数据上的应用。
LSTM,一种RNN变体,设计用于解决RNN处理长期依赖的难题。其核心在于门控机制(输入、遗忘、输出门)和长期记忆单元(细胞状态),能有效捕捉序列数据的长期依赖,广泛应用于语言模型、机器翻译等领域。然而,LSTM也存在计算复杂度高、解释性差和数据依赖性强等问题,需要通过优化和增强策略来改进。
|
22天前
|
机器学习/深度学习
大模型开发:解释卷积神经网络(CNN)是如何在图像识别任务中工作的。
**CNN图像识别摘要:** CNN通过卷积层提取图像局部特征,池化层减小尺寸并保持关键信息,全连接层整合特征,最后用Softmax等分类器进行识别。自动学习与空间处理能力使其在图像识别中表现出色。
23 2
|
29天前
|
网络协议 C++
C++ Qt开发:QTcpSocket网络通信组件
`QTcpSocket`和`QTcpServer`是Qt中用于实现基于TCP(Transmission Control Protocol)通信的两个关键类。TCP是一种面向连接的协议,它提供可靠的、双向的、面向字节流的通信。这两个类允许Qt应用程序在网络上建立客户端和服务器之间的连接。Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍如何运用`QTcpSocket`组件实现基于TCP的网络通信功能。
37 8
C++ Qt开发:QTcpSocket网络通信组件
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
33 0
|
1月前
|
前端开发 开发者
探索前端技术的新趋势:Web组件化开发
【2月更文挑战第11天】 在这篇文章中,我们将深入探讨Web组件化开发的概念及其对前端开发领域的影响。不同于传统的摘要方式,我们通过一个故事来引入主题:想象在一个快速变化的数字世界里,有一座由各种小型、独立、可复用的建筑块构成的城市,每个建筑块都拥有独特的功能和风格,它们可以自由组合,创造出无限可能的城市景观。这座城市,就像是使用了Web组件化开发技术的前端项目。接下来,我们将详细探讨Web组件化开发的优势、实现方式以及面临的挑战,为前端开发者提供一个全面的视角来理解和应用这一重要的技术趋势。
61 5
|
2月前
|
前端开发 数据可视化 JavaScript
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
前端图形学实战: 从零开发一款轻量级滑动验证码组件(vue3 + vite版)
57 0
|
4天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
23天前
|
前端开发 数据可视化 搜索推荐
数据驱动的前端设计与开发实践
本文将介绍如何在前端设计与开发中充分利用数据驱动的方法,通过数据分析、用户行为追踪和可视化等手段,指导前端界面设计和功能开发,提高用户体验和产品质量。
|
25天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。