http请求类型

http请求有多种类型，不同类型用于不同场景。

HTTP请求方法（HTTP request methods）定义了客户端与服务器之间的交互类型。以下是一些常用的HTTP请求方法：

  1. GET：用于请求指定资源的表示形式。GET请求通常用于检索数据，并且是幂等的，即多次请求不会改变服务器的状态。
  2. POST：用于向指定资源提交数据，通常导致服务器上的状态变化。POST请求用于提交表单数据、上传文件等。
  3. PUT：用于更新服务器上的指定资源。与POST不同，PUT请求通常用于更新现有资源，并且是幂等的。
  4. DELETE：用于删除服务器上的指定资源。
  5. HEAD：与GET方法类似，但服务器在响应中不包含响应体。HEAD请求用于获取资源的元信息，如元数据。
  6. OPTIONS：用于请求服务器支持的HTTP方法列表，以及资源的通信选项。
  7. PATCH：用于对服务器上的资源进行部分更新。与PUT不同，PATCH请求通常只修改资源的一部分。
  8. TRACE：用于获取请求-响应链的原始消息。这个方法在实际应用中很少使用。
  9. CONNECT：用于建立到服务器的隧道，通常用于SSL/TLS代理。

除了上述方法，还有一些较少使用的方法，如：

  • PROPFIND：用于检索资源的属性。
  • PROPPATCH：用于设置资源的属性。
  • MKCOL：用于在服务器上创建新资源。
  • MOVE：用于将资源移动到新的位置。
  • COPY：用于复制资源到新的位置。
  • LOCK 和 UNLOCK：用于锁定和解锁资源。

这些方法在WebDAV（Web Distributed Authoring and Versioning）中使用较多，用于文件和目录的管理和操作。在标准的HTTP/1.1规范中，这些方法被定义为可选的，但在实际应用中，它们可能并不总是被所有服务器支持。

get和post的区别

GET和POST是HTTP协议中两种最常用的请求方法，它们在客户端与服务器之间的通信中扮演着不同的角色，主要区别如下：

  1. 数据传输方式：
    • GET：通过URL的查询字符串（query string）传递数据，数据是可见的，附加在URL后面，以?开始，多个参数之间用&分隔。
    • POST：通过HTTP请求体（request body）传递数据，数据对用户是不可见的，不会显示在URL中。
  2. 数据大小限制：
    • GET：由于数据在URL中传输，因此受到URL长度限制，通常限制在2000个字符以内（具体限制取决于浏览器和服务器）。
    • POST：没有严格的大小限制，因为数据在请求体中，可以传输更大的数据量。
  3. 安全性：
    • GET：由于数据在URL中可见，因此不安全，不适合传输敏感信息。
    • POST：数据在请求体中，对用户不可见，相对更安全。
  4. 缓存和历史记录：
    • GET：请求可以被缓存，并且会留下历史记录，用户可以通过浏览器的前进和后退按钮重新发送请求。
    • POST：请求通常不会被缓存，也不会留下历史记录，用户不能通过浏览器的前进和后退按钮重新发送请求。
  5. 幂等性：
    • GET：是幂等的，即多次执行相同的GET请求，服务器的状态不会改变。
    • POST：通常不是幂等的，多次执行相同的POST请求可能会对服务器的状态产生影响，例如创建多个相同的资源。
  6. 用途：
    • GET：主要用于请求数据，如获取网页内容、查询数据库等。
    • POST：主要用于提交数据，如表单提交、文件上传等。

在实际应用中，GET方法通常用于检索数据，而POST方法用于修改服务器状态的操作。例如，搜索功能通常使用GET方法，因为它只是检索信息而不改变服务器状态；而用户登录或表单提交则使用POST方法，因为它们会改变服务器上的状态。

post请求类型

简述

HTTP POST 请求常常用于提交数据。这些数据可以被用于更新数据库，发送表单数据，上传文件等等。对于不同的数据需求，POST请求有许多不同的数据格式，包括以下类型：

  • application/x-www-form-urlencoded: 这是HTML表单最常用的提交数据的方式。在发送前，所有的字符都会被编码（空格转换为”+” 加号，特殊字符会转为 ASCII HEX 值）。
  • multipart/form-data: 这种类型通常用于发送(上传)文件。
  • application/json: 这种类型用于发送 JSON 格式的数据。
  • text/xml 或 application/xml: 这两种类型用于发送 XML 格式的数据。

我们可以在请求头上添加content-type控制请求数据类型，如果使用第三方请求库（如axios），会根据传递的数据类型自动设置content-type。如果请求未指定content-type，在一些情况下，浏览器也会自动加上正确的content-type，例如，如果表单包含文本输入和文件上传，浏览器可能会将其设置为multipart/form-data。

案例

application/json

如果你发送的是 application/json 类型的数据，你可以使用这样的代码：

  1. fetch('https://example.com/api', {
  2.     method: 'POST', 
  3.     headers: {
  4.         'Content-Type': 'application/json',
  5.     },
  6.     body: JSON.stringify({
  7.         key1: 'value1',
  8.         key2: 'value2',
  9.     }), 
  10. })
  11. .then(response => response.json())
  12. .then(data => console.log(data))
  13. .catch((error) => console.error('Error:', error));

multipart/form-data

如果你发送的是 multipart/form-data 类型的数据（例如上传文件），你可以这样做： 

  1. let formData = new FormData();
  2. let fileField = document.querySelector('input[type="file"]');
  4. formData.append('username', 'abc123');
  5. formData.append('avatar', fileField.files[0]);
  7. fetch('https://example.com/api', {
  8.   method: 'POST',
  9.   body: formData
  10. })
  11. .then(response => response.json())
  12. .then(result => console.log(result))
  13. .catch(error => console.error('Error:', error));

注意：因为是multipart形式发送数据，这里不需要显式地添加 Content-Type 到 header 中。浏览器会自动处理，包括生成 boundary。

application/x-www-form-urlencoded

application/x-www-form-urlencoded 类型的 POST 请求，可以使用 URLSearchParams 对象编码数据：

  1. let data = new URLSearchParams();
  2. data.append('username', 'abc123');
  3. data.append('password', '123456');
  5. fetch('https://example.com/api', {
  6.     method: 'POST',
  7.     headers: {
  8.         'Content-Type': 'application/x-www-form-urlencoded'
  9.     },
  10.     body: data
  11. })
  12. .then(response => response.json())
  13. .then(data => console.log(data))
  14. .catch((error) => console.error('Error:', error));

需要注意的是，使用 URLSearchParams 对象，可以简化对数据的编码操作。

text/xml

text/xml 或者 application/xml 类型的 POST 请求，可以直接将 XML 格式的字符串作为body数据发送：

  1. let xmlData = `
  2.     <note>
  3.         <to>Russell</to>
  4.         <from>Test</from>
  5.         <heading>Test</heading>
  6.         <body>Hello World!</body>
  7.     </note>
  8. `;
  10. fetch('https://example.com/api', {
  11.     method: 'POST',
  12.     headers: {
  13.        'Content-Type': 'text/xml'
  14.     },
  15.     body: xmlData
  16. })
  17. .then(response => response.text())  // assuming the response is text
  18. .then(data => console.log(data))
  19. .catch((error) => console.error('Error:', error));

上述 text/xml 的例子中，我们假设了服务器返回的数据类型也是 XML，因此在处理返回数据时，我们使用了 response.text() 方法。根据服务端返回数据的实际类型，你可能还需要使用其它的方法，如 response.json()等。