web请求

1.介绍

HTTP 协议（Hyper Text Transfer Protocol）是超文本传输协议，它是基于请求-响应的一个协议，即客户端浏览器给服务器发送一个 HTTP 请求，然后服务器对客户端的请求作出响应。我们开发的基于浏览器的 B/S 架构的程序都是基于 HTTP 协议（也有 HTTPS）的，例如登录、注册、查询商品等。

当用户在 URL 中输入一个网址到看到页面，大体经过如下几步：

DNS 解析，建立 TCP 连接，发送 HTTP 请求。
Server 端接收 HTTP 请求，处理，返回结果。
客户端接收到返回数据，进行页面渲染显示内容。
本节介绍的就是发送请求最常用的两种方式，GET 和 POST。

2.GET 请求

通过浏览器向服务器发送请求的常用方式分为两种，一种是 GET 方式，另一种是 POST 方式，前者请求的安全性不高，常用于查询的操作，如查询用户信息、查询博客信息等。

GET 请求传递参数是在 URL 后面加入一个 “?” ，然后在 “?” 后面加入想要传递的参数，多个参数之间用 “&” 隔开。格式如下：

1	http://localhost:8000/index?id=1001&name=abc

首先在右侧控制台中输入以下命令来初始化 npm 环境，初始化完成后会生成一个 package.json 文件。

1	npm init -y

在 project 文件夹下，新建 index.js 文件，并加入下列代码：

:::: code-tabs
@tab index.js

const http = require("http");
const server = http.createServer((req, res) => {
  res.writeHead(200, { "Content-Type": "text/html;charset=utf-8" });
  // 通过请求对象获取完整的请求地址并保存在变量 url 中
  let url = req.headers["x-scheme"] + "://" + req.headers.host + req.url;
  // 将变量传入实例化方法中，并实例化一个 URL 对象
  const myURL = new URL(url);
  let params = myURL.searchParams.toString();
  res.write(params);
  res.end();
});
// 服务侦听 8080 端口
server.listen(8080, () => {
  console.log("服务器运行在 8080 端口...");
});

::::

解释如下：

定义一个变量 url 用于保存 req 对象请求的完整地址，其中 req.headers['x-scheme'] 返回请求协议名称，如 http 或 https ，而 req.headers.host 返回请求的域名和端口，req.url 返回请求的详细路径，包含查询字符串。
获取并保存完整的请求地址后，实例化一个 URL 对象，在实例化对象的方法中，可以传递两个参数，第一个参数是必选项，表示要解析的绝对或相对的网址，第二个参数是可选项，表示要解析的基础网址，如果第一个参数是绝对地址，则第二个可以省略，如本示例中的代码；如果第一个对数是相对地址，则第二个参数必须添加请求地址的协议名称、域名和端口。
如果将示例中绝对的请求地址修改成相对地址，那么在实例化 URL 对象时，代码修改如下所示：

// 通过请求对象获取相对请求路径并保存在变量 url 中
let url = req.url;
// 在实例化过程中，通过第二个参数添加请求协议的名称、域名和端口
const myURL = new URL(
  url,
  req.headers["x-scheme"] + "://" + req.headers.host
);

这两种代码实现的方式在使用时，结果都是一样的，但在实际运用时，传入完整的请求地址，使用会更多些。

在控制台中输入以下命令运行该程序:

1	node index.js

然后点击右侧的 “Web 服务”，并在 simplelab.cn 地址后加入 ?id=1001&name=abc，刷新页面，效果如下：

::: demo-wrapper no-padding

:::

页面中显示的内容就是以字符串形式输出的 GET 请求参数，如果需要使用，也可以通过指定参数名称获取对应的值。

3.处理 POST 请求

相比于 GET 方式，POST 请求在传输数据时要安全的多，因此常用与数据的添加、删除、修改操作，例如新建博客、删除博客、修改博客等就会使用到 POST 请求。

在 URL 中输入地址直接访问属于 GET 请求，而 POST 请求则常用于表单数据的提交，先在 form 中设置 method=post，当用户点击提交表单按钮时就会发送一个 POST 请求，并把表单中用户填入的数据传递给服务器。但是手工编写表单的代码显然比较麻烦，有没有一种更加简单的方式发送 POST 请求呢？

答案是有的。可以使用 Postman 这个工具来帮助我们发送 POST 请求。

3.Postman 下载和安装

首先在右侧桌面环境打开 Firefox 浏览器，然后在 URL 地址栏中输入 http://postman.com/downloads 进入到下载页面。系统自动识别下载 linux 版本的 postman。

::: demo-wrapper no-padding

:::

然后点击Download the App进行下载，在弹出的界面选择 Linux 64-bit 下载。

::: center

:::

单击“保存文件”按钮进行保存，如下图：

::: center

:::

点击“打开所在文件夹”，然后右键点击 Postman-linux-x86_64-8.11.1.tar.gz 文件重命名为 postman.tar.gz，然后使用鼠标把该文件拖拽到左侧 shiyanlou 目录下。然后在实验楼路径中点击右键，选择“在此打开终端”（如下图）。

终端中进行解压：

1	sudo tar -zxvf postman.tar.gz

启动 postman：

1	./Postman/Postman

启动后点击左上角的 “File”—“new” 新建一个窗口，效果如下：

::: demo-wrapper no-padding

:::

然后申请一个 Postman 账号并点击 Sign in 登录（此过程不再截图，同学们自行完成）。登录成功后如下图,然后点击 Create new。

::: demo-wrapper no-padding

:::

在弹出的界面中点击 HTTP Request，如下图：

::: demo-wrapper no-padding

:::

如果想发送 HTTP 请求还需要装一个 Postman 客户端才能正常发送请求。使用下列命令下载 Postman 客户端。

1 2	cd /home/shiyanlou wget https://labfile.oss.aliyuncs.com/courses/4380/postmanAgent.tar.gz

注意：如果想复制如上命令到云课桌面环境进行粘贴的话，可以借助右侧“剪切板”功能。
先复制好想要粘贴的命令，然后点击右侧“剪切板”，把复制的内容粘贴到剪切板中，然后点击保存即可（如下图），
然后就可以在云课桌面环境中进行粘贴了。

下载完毕后截图如下：

::: demo-wrapper no-padding

:::

然后使用如下命令进行解压安装：

1 2	cd /home/shiyanlou sudo tar -zxvf postmanAgent.tar.gz

4.编写代码处理 POST 请求

然后在 /home/shiyanlou/ 路径下新建 index.js 文件，然后编写代码如下：

:::: code-tabs
@tab index.js

const http = require("http");

const server = http.createServer((req, res) => {
  if (req.method === "POST") {
    console.log("content-type:", req.headers["content-type"]); // 获取请求类型 application/json

    //读post数据
    let postData = ""; // postData 用来存储传递给服务器的全部数据
    // 分段循环传输数据，每次传递数据都会执行后面的回调函数
    req.on("data", (chunk) => {
      postData += chunk.toString(); // chunk是二进制数据 所以要把它转换成字符串
    });

    // 当数据传输完毕会执行 end 事件后的回调函数
    req.on("end", () => {
      console.log("postData:", postData);
      res.end("Hello"); //在这里返回因为是异步
    });
    console.log("test"); //这里先被打印 因为上面的代码是异步的
  }
});

server.listen(8080, () => {
  console.log("服务器运行在 8080 端口...");
});

::::

在终端中运行以下命令运行程序：

1 2	cd /home/shiyanlou node index.js

5.使用 Postman 发送 POST 请求

然后打开刚才的 Postman 界面，根据下图依次选择 POST 请求，输入请求地址 http://localhost:8080。
然后点击 Body，选择 raw 和 JSON，输入发送的内容后点击 Send 按钮。

::: center

:::

当看到上图中的返回内容 Hello 时，说明程序已经调试成功了。