一、网络请求GET与POST

      在 Web 开发领域，HTTP 请求是客户端与服务器进行交互的基础方式。其中，GET 和 POST 是最为常用的两种请求方法。

二、GET与POST区别 

• 数据传输方式

  GET 方法通过 URL 查询字符串来传输数据，例如在Example Domain 中param1 和 param2 就是通过查询字符串传递的数据。而 POST 方法则是将数据放置在 HTTP 请求体中进行传输，在请求的报文主体部分携带数据。

• 数据大小限制

  GET 方法受限于 URL 的长度，不同浏览器和服务器对 URL 长度有不同限制，一般来说 URL 长度不宜过长。POST 方法理论上对数据大小没有限制，但实际会受到服务器配置的约束，例如服务器可能会设置请求体大小的上限来防止恶意的大请求。

• 安全性与可见性

  GET 方法的参数暴露在 URL 中，容易被截取和查看，存在安全风险，比如用户登录信息如果用 GET 传递就很不安全。POST 方法将数据隐藏在请求体中，相对更安全，但要实现真正的安全传输，还需结合 HTTPS 协议。

• 缓存与幂等性

  GET 方法是幂等的，意味着多次相同的 GET 请求对服务器资源的影响是相同的，并且 GET 请求的结果可以被缓存，这有助于提高网页加载速度。POST 方法不是幂等的，多次提交可能会产生不同的结果，例如多次提交表单可能会导致重复的数据插入，而且 POST 请求通常不可缓存。

• 其他特性

  GET 方法支持书签和历史记录，用户可以将带有 GET 参数的 URL 保存为书签，方便下次访问。POST 方法在浏览器回退时，需要重新提交请求，因为浏览器不会自动保存 POST 请求的状态。

  三、GET 与POST 的应用场景

        1.GET的应用场景

  • 数据检索操作：当我们从服务器获取数据，如查询商品列表、获取文章内容等，使用 GET 方法比较合适。例如，电商网站获取商品列表的 API 接口可以通过 GET 方法，客户端传递分类、页码等参数，服务器返回相应的数据。
  • 适合带参数的 URL 场景：像搜索引擎的搜索功能，用户输入的关键词通过 GET 参数传递给服务器，生成类似 https://www.baidu.com/s?wd=关键词 的 URL 进行搜索请求。
  • 生成可共享链接：由于 GET 请求的参数都在 URL 中，生成的链接可以方便地分享给他人，例如分享一篇文章链接，链接中可能包含文章 ID 等参数，通过 GET 传递给服务器来展示对应的文章内容。

           2.POST的应用场景

    • 提交表单或上传文件：当用户在网页上填写表单，如注册、登录表单，或者上传图片、文档等文件时，POST 方法是常见的选择。因为表单数据和文件数据通常不适合暴露在 URL 中，且可能数据量较大，POST 方法能更好地处理这些情况。
    • 传输大体积或敏感数据：对于传输像用户身份证照片、银行账户信息等敏感数据，或者大体积的视频、音频文件等，POST 方法结合 HTTPS 能提供相对安全且不受 URL 长度限制的传输方式。
    • 处理复杂请求结构：当请求需要传递复杂的 JSON 结构数据，如包含多个对象和数组的请求体，POST 方法可以在请求体中灵活地组织和传递这些数据，而 GET 方法在处理复杂数据结构时会受到 URL 格式的限制。

      四、实例代码演示

      
      
          
          
          HTTP GET and POST Example
          
          
      
      
          
      HTTP GET and POST Example
          
              Send GET Request
          
          
              Send POST Request
          
          
          
               // 点击 “Send GET Request” 按钮时，使用 fetch API 向 https://jsonplaceholder.typicode.com/posts/1 发送 GET 请求，将响应结果以 JSON 格式展示在页面
              document.getElementById('getButton').addEventListener('click', function () {
                  const url = 'https://jsonplaceholder.typicode.com/posts/1';
                  fetch(url)
                    .then(response => response.json())
                    .then(data => {
                          const resultDiv = document.getElementById('result');
                          resultDiv.innerHTML = `
      ${JSON.stringify(data, null, 2)}
      `;
                      })
                    .catch(error => {
                          const resultDiv = document.getElementById('result');
                          resultDiv.innerHTML = `
      Error: ${error.message}
      `;
                      });
              });
              // 点击 “Send POST Request” 按钮时，使用 fetch API 向 https://jsonplaceholder.typicode.com/posts 发送 POST 请求，携带 JSON 格式的数据，同样将响应结果展示在页面上
              document.getElementById('postButton').addEventListener('click', function () {
                  const url = 'https://jsonplaceholder.typicode.com/posts';
                  const data = {
                      title: 'foo',
                      body: 'bar',
                      userId: 1
                  };
                  fetch(url, {
                      method: 'POST',
                      headers: {
                          'Content-Type': 'application/json'
                      },
                      body: JSON.stringify(data)
                  })
                    .then(response => response.json())
                    .then(data => {
                          const resultDiv = document.getElementById('result');
                          resultDiv.innerHTML = `
      ${JSON.stringify(data, null, 2)}
      `;
                      })
                    .catch(error => {
                          const resultDiv = document.getElementById('result');
                          resultDiv.innerHTML = `
      Error: ${error.message}
      `;
                      });
              });
          
      
      
          

      

      

      五、AI辅助的思维导图