Nodejs的学习Ⅲ（cheerio、Puppeteer、网络协议、简单服务器搭建）

深碍√TFBOYSˉ_ 2023-03-14 05:54 11阅读 0赞

# 一、cheerio #

**cheerio** 是**jquery核心功能**的一个快速灵活而又简洁的实现，主要是为了用在 **服务器端需要对DOM进行操作的地方（因为在服务端不能操作DOM）**  
**cheerio** 是**nodejs**的**抓取页面模块**，为**服务器特别定制**的，快速、灵活、实施的jQuery核心实现。**适合各种Web爬虫程序。**

### 安装： ###

> npm install cheerio

### 特点 ###

***熟悉的语法***：**cheerio实现了jQuery的一个子集**，去掉了jQuery中所有与DOM不一致或者是用来填浏览器的坑的东西，重现了jQuery最美妙的API  
***快到没朋友***：**cheerio使用了及其简洁而又标准的DOM模型**， 因此对文档的转换，操作，渲染都极其的高效。基本的端到端测试显示它的速度至少是JSDOM的8倍  
***极其灵活***：**cheerio使用了@FB55编写的非常兼容的htmlparser2**，因此它可以解析几乎所有的HTML和XML

<ul id="fruits">
      <li class="apple">Apple</li>
      <li class="orange">Orange</li>
      <li class="pear">Pear</li>
    </ul>
    
    const cheerio = require('cheerio');
    
    let $ = cheerio.load(result.data);

### 关于JSDOM ###

**cheerio**产生的原因是出于对**JSDOM**的失望，主要体现在以下三点：

*JSDOM的解析规则太过于严格*：JSDOM的解析器无法处理现在许多的流行网站的内容  
*JSDOM太慢了*：解析大的网站甚至可以产生可察觉的延迟  
*JSDOM太过于重量级*：JSDOM的目标是提供与浏览器一样的DOM环境，但是我们往往不需要这样。我们需要的只是一种简单，熟悉的方式来操作我们的HTML

##### 那什么时候你用JSDOM呢？ #####

**cheerio**并非万能，当你**需要一个浏览器一样的环境时**，你最好还是用**JSDOM**，**尤其是你需要进行自动化的功能测试时**

### 关于cheerio的API ###

##### 1、 解析html（load） #####

在使用cheerio时我们要手动加载我们的HTML文档，但如果你还需要自定义一些解析选项，你可以多传递一个对象给load方法：

const cheerio = require('cheerio');
    $ = cheerio.load(HTML, { 			// 这里的HTML参数为一个需要加载的整个HTML文档
        ignoreWhitespace: true,
        xmlMode: true
    });

其他options[查看这里][Link 1]

##### 2. 选择器（selectors） #####

$( selector)  
类似于jQuery的元素获取方式  
.find(selector)  
在当前元素集合中选择符合选择器规则的**所有子元素集合**  
.parent(selector)  
获取元素集合**的直接父元素**  
.parents(selector)  
获取元素集合**的所有父元素**  
.next(selector)  
选择当前元素的**下一个兄弟元素**，**与==.prev()==相反**  
.siblings(selector)  
获取元素集合中的**所有兄弟元素，不包含它自己**  
.children( selector )  
返回被选元素的**所有直接子元素**。  
.first()或.last()  
将选择第一个元素（最后一个元素）

##### 3、 属性操作（atrributes） #####

.attr(name, value)  
这个方法用来**获取和设置属性**。  
.removeAtrr(name)  
移**除名为name的属性**  
.hasClass(className)  
**检查元素是否含有此类名**  
.addClass(className)  
添加**类名到所有的匹配元素**，注意这里是**添加**而**不是覆盖**  
.eq( i )  
**将匹配的元素集减少到指定索引处的元素集**  
.get( \[i\] )  
**检索与Cheerio对象匹配的DOM元素**。如果**指定了索引**，则**检索匹配的元素**，如果**未指定索引**，则**检索匹配的所有元素**

##### 4.遍历 #####

.each( function(index, element) )  
遍历得到的**elements**，**element**为**遍历得到的DOM**，直到返回false即可终止遍历  
.map( function(index, element) )  
通过函数传递当前匹配集中的每个元素，并返回经过**处理**的数据（类似于**ES6里面的map**）  
.filter( selector )或.filter(function(index, element) )  
通过函数传递当前匹配集中的每个元素，经过**过滤**，并返回符合条件的数据（类似于**ES6里面的filter**）

##### 5.操作DOM #####

.append( content, \[content, …\] )  
把**内容**插入到**选定元素内**的最后一个位置 **（不同级）**  
.prepend( content, \[content, …\] )  
把**内容**插入到**选定元素内**的第一个位置 **（不同级）**  
.after( content, \[content, …\] )  
把**内容**插入到**选定元素**的后面 **（同级）**  
.before( content, \[content, …\] )  
把**内容**插入到**选定元素**的前面 **（同级）**  
.remove( \[selector\] )  
**移除所有子元素包括自身**  
.replaceWith( content )  
用**内容**来**替换掉匹配到的元素。**  
.empty()  
删除它的**所有子元素，不包括自身**  
.html( \[htmlString\] )  
得到选定元素获取的**html**内容或字符串  
.text( \[textString\] )  
得到选定元素获取的**text**内容或字符串

##### 6.杂项 #####

.toArray()  
把**DOM元素**转化为**数组**  
.clone()  
**克隆DOM**  
$.root()  
获取**顶级根元素**

# 二、Puppeteer #

**Chrome**自带**headless(无界面)模式**很方便做**自动化测试或者爬虫**。但是**如何和headless模式的Chrome交互则是一个问题**。而可以通过 **Puppeteer来解决这个问题， 它的提供的api直接控制Chrome模拟大部分用户操作**来进行UI Test或者作为爬虫访问页面来收集数据。

[Puppeteer中文文档][Puppeteer]

### 作用： ###

**通过自身的api来操作headless模式**，以达到以下的目的：  
制作爬虫（爬虫需要凭证时）；自动提交表单，进行 UI 测试，键盘输入等；用来帮助分析性能；测试浏览器扩展。

### 安装 ###

npm i puppeteer

### 使用 ###

const puppeteer = require('puppeteer');
    
    (async () => { 
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      await page.goto('https://example.com');
    
      // 要注意下面的顺序也就是事件的监听必须在await之后，因为事件必须在await执行之前注册
      page.on('console', msg => console.log('控制台输出'));
      await page.evaluate(() => console.log('事件触发'));
    
      await browser.close();
    })();

很多网页通过**user-agent来判断设备**，可以通过**page.emulate(options)来进行模拟**。**options**有两个配置项，一个为**userAgent**，另一个为**viewport**可以设置宽度(width)、高度(height)、屏幕缩放(deviceScaleFactor)、是否是移动端(isMobile)、有无touch事件(hasTouch)。  
**如下：**

const puppeteer = require('puppeteer');
    const devices = require('puppeteer/DeviceDescriptors');
    const iPhone = devices['iPhone 6'];
    
    puppeteer.launch().then(async browser => { 
      const page = await browser.newPage();
      await page.emulate(iPhone);
      await page.goto('https://www.example.com');
      // other actions...
      await browser.close();
    });

**很多网页需要登录**，则可以可以使用**page.type(selector, text\[, options\])输入指定的字符串**，还可以在**options**中**设置delay缓慢输入更像真人一些**。也可以使用**keyboard.down(key\[, options\])来一个字符一个字符的输入。**

### 常用方法： ###

##### page.click(selector\[, options\]) #####

点击

##### page.focus(selector) #####

选择聚焦

##### page.$$eval(selector, pageFunction\[, …args\]) #####

> selector< 字符串 > 用于查询页面的选择器  
> pageFunction< function（Array < Element >）>要在浏览器上下文中评估的函数  
> …args<…可序列化 | JSHandle >传递给的参数pageFunction  
> 返回值为：promise

此方法**在页面内运行**，并将其得到的元素（**document.querySelectAll()得到的元素**）作为**第一个参数传递给pageFunction**

### page.$eval(selector, pageFunction\[, …args\]) ###

与上面唯一不同的地方是它的元素是 **document.querySelect()** 得到的元素

### page.$$eval(selector) ###

获取通过**document.querySelectAll()** 得到的元素

### page.$eval(selector) ###

获取通过**document.querySelect()** 得到的元素

let btn = await page.$(selector)		// 获取元素
    btn.click()								// 元素点击（ES语法）

### page.mouse.move(x, y)与page.mouse.down()与page.mouse.up() ###

**鼠标的移动与点击**

### page.keyboard.type(‘Hello World!’) ###

在页面上**写入内容**，上面是输入内容

### page.keyboard.press(‘ArrowLeft’)与page.keyboard.down(‘Shift’) ###

在页面上键盘**按键**，上面分别是**左方向键与Shift键**

### 截获页面请求 ###

await page.setRequestInterception(true);			// 参数必须为true才可以对请求进行拦截
    page.on('request', request => { 
        request.url() 									// 可以获取请求的网址，request包含了所有的请求信息
        if(你想要的条件){ 
            request.continue()							// 请求继续
        }else{ 
            request.abort([errorCode])					// 请求停止
        }
    });

### 完整例子： ###

# 三、网络协议 #

### 1、什么是协议 ###

协议是**网络中计算机或设备之间进行通信的一系列规则的集合**。常用协议有IP、TCP、HTTP、POP3、SMTP等。

### 2、什么是协议栈 ###

在网络中，为了完成通信，**必须使用多层上的多种协议。这些协议按照层次顺序组合在一起，构成了协议栈(Protocol Stack)**，也称为协议族(Protocol Suite)。

### 3、协议的作用 ###

一个网络协议的**作用**主要有两个：一是**建立对等层之间的虚拟通信**，二是**实现层次之间的无关性**。

##### ①、建立对等层之间的虚拟通信 #####

建立对等层之间的虚拟通信，**就是在每个层（共七个） 之间通信并包装传递数据的过程。**

##### ②、层次间的无关性 #####

所谓层次间无关性，就是指**较高层次和相邻的相低层次进行通信时**，**只是利用较低层次提供的接口和服务**，而**不需了解底层实现该功能所采用的算法和协议的细节**；**较低层次也仅是使用从高层系统传送来的参数和控制信息**，这就是层次间的**无关性**。

### 4、网络协议族/栈组成 ###

**网络通信协议的作用是负责在网络上建立通信通道和控制通过通道的信息流的规则。** 为了进行网络通信，通信双方必须遵守通信协议  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]  
说明：**网络协议**与标准是基于OSI七层模型（物理层、数据链路层、网络层、传输层、话路层、表示层和应用层），每一层都有其对应的协议。

### 5、常见的网络协议 ###

TCP/IP：**工业标准、开放式协议，Internet网络的标准**

IPX/SPX：Novell开发的Netware操作系统使用的协议，IPX为网际数据包交换协议，工作在网络层，SPX为序列数据包交换协议，工作在传输层。  
AppleTalk：**Apple公司的Mac OS中所采用的网络协议。**

### 6、TCP/IP协议 ###

![TCP/IP是分层协议][TCP_IP]  
**如层次图所示：**  
而**TCP/IP**协议并**不完全符合OSI的七层**参考模型。 它采用了**4层的层级制**结构，每一层都呼叫它的下一层所提供的网络来完成自己的需求。这4层分别为： ●应用层：**应用程序间沟通的层**，如简单电子邮件传输（SMTP）、文件传输协议（FTP）、网络远程访问协议（Telnet）等。 ●传输层：在此层中，**它提供了节点间的数据传送服务**，如传输控制协议（TCP）、用户数据报协议（UDP）等，TCP和UDP给数据包加入百传输数据并把它传输到下一层中，**这一层负责传送数据，并且确定数据已被送达并接收**。 ●互连网络层：**负责提供基本的数据封包传送功能，让每一块数据包都能够到达目的主机（但不检查是否被正确接收）**，如网际协议（IP）。 ●网络接口层度 ：**对实际的网络媒体的管理，定义如何使用实际网络（如Ethernet、Serial Line等）来传送数据。**  
**数据是层层封装，封装的方式一般都是在原有数据的前面加一个数据控制头。**

### 7、Telnet协议 ###

Telnet是**TCP/IP中的一种应用协议**，**可以为终端仿真提供支持（远程通信）**。Telnet在**发送端和接收端**使用TCP的**23号端口**以进行专用的通信

### 8、FTP协议 ###

FTP协议使用**TCP20号和21号端口**，**20号端口用于数据交换，21号端口用于建立连接**，**用于文件传输**

TFTP是简单文件传输协议（Trivial File Transfer Protocol，TFTP），**TFTP是无连接的，使用UDP的69号端口**，用于**当数据传输错误无关紧要而且无须安全性时的小型文件的传输**。

### 9、SMTP协议 ###

SMTP是简单邮件传输协议（Simple Mail Transfer Protocol，SMTP） 是**为网络系统间的电子邮件交换而设计的**。**使用 25 端口**。

POP3 协议用来接收邮件**使用110端口**

### 10、DNS服务 ###

DNS是域名解析服务（Domain Name Service, DNS），作用是**将域名转换为IP地址，或将IP地址转换为域名，用于解析完全合格域名**（FQDN）。使用**53号端口**。

### 11、DHCP服务 ###

DHCP是动态主机配置协议(DHCP)，指的是由**服务器**控制一段**IP地址范围**，**客户机登录服务器**时就可以**自动获得服务器分配**的IP地址、子网掩码、子网掩码、默认网关等等

### 12、HTTP协议 ###

HTTP是一个基于**TCP/IP通信协议**来**传递数据**（HTML 文件, 图片文件, 查询结果等）。

**HTTP是一个属于应用层的面向对象的协议**

**HTTP协议工作于客户端-服务端架构为上**。**浏览器**作为**客户端**通过**URL**向**服务端**即**WEB服务器** **发送请求**。**Web服务器**根据接收到的**请求**后，向**客户端发送响应信息。**

##### HTTP协议的主要特点 #####

①、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有**GET、HEAD、POST**。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。

②、灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由**Content-Type**加以标记。

③.无连接：**无连接的含义是限制每次连接只处理一个请求**。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

④.无状态：**HTTP协议是无状态协议**。无状态是指协议对于事务处理**没有记忆能力**。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。  
⑤、支持B/S及C/S模式

##### HTTP协议与URL的关系 #####

HTTP使用**统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接**。**URL**是一种**特殊类型的URI**，包含了用于查找某个资源的足够的信息。

URL,全称是**UniformResourceLocator**, 中文叫**统一资源定位符**,**是互联网上用来标识某一处资源的地址**

一个完整的URL包括以下几部分：  
协议部分：在Internet中可以**使用多种协议**，如**HTTP，FTP**等等，在"HTTP"后面的“//”为分隔符。  
域名部分：URL的域名部分为“www.baidu.com”。**一个URL中，也可以使用IP地址作为域名使用**。  
端口部分：跟在域名后面的是端口，域名和端口之间使用\*\*“:”作为分隔符\*\*。**端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口（80）**。  
虚拟目录部分：从域名后的**第一个“/”** 开始到 **最后一个“/”** 为 **止**，是虚拟**目录部分**。虚拟目录也不是一个URL必须的部分。  
文件名部分：从域名后的**最后一个“/”** 开始**到“？”** 为 **止**，是**文件名部分**，如果**没有“?”**,则是从域名后的最后一个“/”开始到“\#”为止，是文件部分，如果**没有“？”和“\#”**，那么从域名后的最后一个“/”开始到结束，都是文件名部分。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名。  
锚部分：**从“\#”开始到最后，都是锚部分**。锚部分也不是一个URL必须的部分。  
参数部分：**从“？”开始到“\#”为止**之间的部分为参数部分，又称搜索部分、查询部分。参数可以允许有多个参数，参数与参数之间用 **“&”作为分隔符**。

##### URN、URI和URL的区别 #####

URI，是**uniform resource identifier，统一资源标识符，用来唯一的标识一个资源**。  
Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是**由来URI来定位**的  
**URI一般由三部组成：**  
①访问资源的命名机制  
②存放资源的主机名  
③资源自身的名称，由路径表示，着重强调于资源。

URL是**uniform resource locator，统一资源定位器，它是一种具体的URI**，即**URL可以用来标识一个资源，而且还指明了如何locate这个资源。**  
URL是Internet上用来描述**信息资源的字符串，主要用在各种WWW客户程序和服务器程序上**  
**URL一般由三部组成：**  
①协议(或称为服务方式)  
②存有该资源的主机IP地址(有时也包括端口号)  
③主机资源的具体地址。如目录和文件名等

URN，**uniform resource name，统一资源命名，是通过名字来标识资源**，比如mailto:java-net@java.sun.com。

**URI是以一种抽象的，高层次概念定义统一资源标识**，而**URL和URN则是具体的资源标识的方式**。**URL和URN都是一种URI**。笼统地说，每个 URL 都是 URI，但不一定每个 URI 都是 URL。这是因为 URI 还包括一个子类，即统一资源名称 (URN)，它命名资源但不指定如何定位资源。

##### HTTP之请求消息Request #####

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：  
**请求行、请求头部、空行和请求体四个部分组成。**

第一部分：请求行，**以一个方法符号开头，以空格分开，后面跟着请求的URI和协议的版本**。用来说明请求类型,要访问的资源以及所使用的HTTP版本.

第二部分：请求头，**紧接着请求行（即第一行）之后的部分，用来说明服务器要使用的附加信息**，HOST将指出请求的目的地.User-Agent,服务器端和客户端脚本都能访问它,它是浏览器类型检测逻辑的重要基础.该信息由你的浏览器来定义,并且在每个请求中自动发送等等

第三部分：空行，**请求头部后面的空行是必须**的，**即使第四部分的请求数据为空，也必须有空行。**

第四部分：请求体，**请求数据也叫主体，可以添加任意的其他数据。**

##### HTTP之响应消息Response #####

一般情况下，服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息。

**HTTP响应也由四个部分组成**，分别是：**响应行、响应头、空行和响应体。**

第一部分：响应行，**由HTTP协议版本号， 状态码， 状态消息 三部分组成。**

第二部分：响应头，**用来说明客户端要使用的一些附加信息**， Date:生成响应的日期和时间；Content-Type:指定了MIME类型的；HTML(text/html),编码类型是UTF-8

第三部分：空行，**消息报头后面的空行是必须的**

第四部分：响应体，**服务器返回给客户端的文本信息**。

##### HTTP协议之状态码 #####

状态代码有三位数字组成，第一个数字定义了响应的类别，共分五种类别:

1xx：**指示信息**–表示**请求已接收**，继续处理  
2xx：**成功**–表示请求已被**成功接收**、理解、接受  
3xx：**重定向**–要**完成请求必须进行更进一步的操作**  
4xx：**客户端错误**–请求**有语法错误或请求无法实现**  
5xx：**服务器端错误**–**服务器未能实现合法的请求**

##### 常见状态码： #####

200 OK                        //客户端请求成功
    400 Bad Request               //客户端请求有语法错误，不能被服务器所理解
    401 Unauthorized              //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
    403 Forbidden                 //服务器收到请求，但是拒绝提供服务
    404 Not Found                 //请求资源不存在，eg：输入了错误的URL
    500 Internal Server Error     //服务器发生不可预期的错误
    503 Server Unavailable        //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

#  #

更多状态码[点击这里][Link 2]

##### HTTP请求方法 #####

根据HTTP标准，HTTP请求可以使用多种请求方法。  
**HTTP1.0**定义了三种请求方法： **GET, POST 和 HEAD方法**。  
**HTTP1.1**新增了五种请求方法\*：**OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。**

GET     	请求指定的页面信息，并返回实体主体。
    HEAD    	类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
    POST    	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
    PUT     	从客户端向服务器传送的数据取代指定的文档的内容。
    DELETE      请求服务器删除指定的页面。
    CONNECT     HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
    OPTIONS     允许客户端查看服务器的性能。
    TRACE     	回显服务器收到的请求，主要用于测试或诊断。`

##### HTTP工作原理 #####

**HTTP协议采用了请求/响应模型**。**客户端向服务器发送一个请求报文**，请求报文包含**请求的方法、URL、协议版本、请求头和请求体**。**服务器以一个状态行作为响应**，响应的内容**包括协议的版本、成功或者错误代码、服务器信息、响应头和响应体**。

**以下是 HTTP 请求/响应的步骤：**

1、发送HTTP请求  
通过TCP套接字，客户端向Web服务器（80端口）发送一个文本的请求报文，**一个请求报文由请求行、请求头、空行和请求体4部分组成。**

2、服务器接受请求并返回HTTP响应  
**Web服务器解析请求**，定位请求资源。服务器将资源复本写到TCP套接字，由客户端读取。**一个响应由响应行、响应头、空行和响应体4部分组成。**

3、释放连接TCP连接  
**若connection 模式为close**，则**服务器主动关闭TCP连接，客户端被动关闭连接，释放TCP连接**;**若connection 模式为keepalive**，则该**连接会保持一段时间，在该时间内可以继续接收请求;**

4、客户端浏览器解析HTML内容  
**客户端浏览器首先解析状态行**，查看表明请求是否成功的状态代码。然后**解析每一个响应头**，响应头告知以下为若干字节的HTML文档和文档的字符集。**客户端浏览器读取响应数据HTML，根据HTML的语法对其进行格式化，并在浏览器窗口中显示。**

**例如：在浏览器地址栏键入URL，按下回车之后会经历以下流程：**  
1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;  
2、解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;  
3、浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;  
4、服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;  
5、释放 TCP连接;  
6、浏览器将该 html 文本并显示内容;

##### GET和POST请求的区别 #####

1、GET提交，**请求的数据会附在URL之后（就是把数据放置在HTTP协议头中）**，**以?分割URL和传输数据，多个参数用&连接**，如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密；POST提交：把**提交的数据放置在是HTTP包的包体中**。因此，**GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变**

2、传输数据的大小：**首先声明：HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制。** 而在实际开发中存在的限制主要有：GET:**特定浏览器和服务器对URL长度有限制**，例如 IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系 统的支持。因此对于GET提交时，传输数据就会受到URL长度的 限制。POST:由于不是通过URL传值，理论上数据不受 限。但实际各个**WEB服务器会规定对post提交数据大小进行限制**，Apache、IIS6都有各自的配置。

3、安全性

**POST的安全性要比GET的安全性高**。比如：通过GET提交数据，用户名和密码将明文出现在URL上，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击

4、get,post,soap协议都是在http上运行的

（1）get：请求参数是作为一个key/value对的序列（查询字符串）附加到URL上的， 查询字符串的长度受到web浏览器和web服务器的限制（如IE最多支持2048个字符），不适合传输大型数据集同时，它很不安全

（2）post：请求参数是在http标题的一个不同部分（名为entity body）传输的，这一部分用来传输表单信息，因此必须将Content-type设置为:application/x-www-form- urlencoded。post设计用来支持web窗体上的用户字段，其参数也是作为key/value对传输。 但是它不支持复杂数据类型，因为post没有定义传输数据结构的语义和规则。

（3）soap：是http post的一个专用版本，遵循一种特殊的xml消息格式，Content-type设置为: text/xml 任何数据都可以xml化。

Http协议定义了很多与服务器交互的方法，最基本的有4种，分别是GET,POST,PUT,DELETE. 一个URL地址用于描述一个网络上的资源，而HTTP中的GET, POST, PUT, DELETE就对应着对这个资源的查，改，增，删4个操作。 我们最常见的就是GET和POST了。GET一般用于获取/查询资源信息，而POST一般用于更新资源信息.

##### 我们看看GET和POST的区别 #####

**GET**提交的数据会放在URL之后，以?分割**URL**和传输数据，参数之间以&相连  
**GET**提交的数据大小有限制（因为浏览器对**URL**的长度有限制），而**POST**方法提交的数据没有限制.  
**GET**方式需要使用Request.QueryString来取得变量的值，而**POST**方式通过Request.Form来获取变量的值。  
**GET**方式提交数据，会带来安全问题，比如一个登录页面，通过**GET**方式提交数据时，用户名和密码将出现在URL上，如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.

##### 13、IP与端口的解释与说明 #####

IP：用来**定位计算机**  
端口号：用来**定位计算机内某个具体的软件**  
**一切需要联网通信的软件都会占用一个端口号，端口号从0~65536（2^16）**

# 四、简单服务器搭建 #

**开启一个本地服务器需要Node.js中http核心模块**

let http = require('http')

引入之后我们利用**http.createServer()方法得到一个服务器实例**。

let server = http.createServer() 				// createServer()方法返回一个server实例，所以我们需要一个变量来接收

经过以上两步，我们已经搭建好了一个服务器实例，然后我们给服务器实例绑定接收request的事情处理函数，代码如下：

server.on('request', (req, res) => { 			// 这里的回调函数有两个参数
      console.log(req.url) 							// 获取到请求的路径（请求路径永远以“/”开头）
    })
    // 给服务器绑定接收请求的处理事件，当服务器接收到客户端发送的请求后，会调用后面的处理函数，处理函数接收两个参数：请求信息对象，响应信息对象。

**绑定监听端口号，并同时开启服务器**。代码如下：

server.listen(80, () => { 						// 一般调试用其他的端口，而上线时用80端口
      console.log('服务器开启成功，可以通过访问http://127.0.0.1/')
    })
    // server.listen()用来绑定监听的端口号，可以传入第二个参数，当服务器开启成功后，触发后面的回调函数

**具体事例：**

let http = require('http')
    let server = http.createServer()
    
    server.on('request', (req, res) => { 
      let url = req.url 							// 得到请求的路径 （请求的路径永远以‘/’开头）
      if (url === '/') { 							// 默认页面
        res.end('index page')
      } else if (url === '/login') { 				// 登录页面
        res.end('login page')
      } else if (url === '/register') { 				// 注册页面
        res.end('register page')
      } else if (url === '/product'){ 				// 产品页面
        let arr = [									// 需要返回的数据
          { 
            name: 'iphone X',
            price: 8888
          },
          { 
            name: 'iphone 7',
            price: 4320
          }
        ]
        res.end(JSON.stringify(arr))				// 把响应的数据处理成字符串类型，因为响应的数据类型必须是字符串或者二进制数据，并发送响应内容
      } else { 
        res.end('404 NOT found')					// 无效的地址
      }
    })
    
    server.listen(3000, () => { 						// 监听端口，并启动服务
      console.log('服务器启动成功了，，可以访问http://127.0.0.1:3000/')
    })

**以下是服务器的request事件里面的回调函数的参数 （request、response） 的一些方法与属性**

// 请求的地址(属性)
    request.url
    // 请求的头部信息(属性)
    request.headers
    
    
    // 设置状态码和响应头
    response.writeHead(200, {  'Content-Type': 'text/plain; charset= utf-8' });
    // 设置响应头
    response.setHeader('Content-Type', 'text/html; charset= utf-8');
    // 写入内容
    response.write(fileData);
    // 结束响应,并返回括号内的内容
    response.end();

本文只用于个人学习与记录

[Link 1]: https://github.com/cheeriojs/cheerio
[Puppeteer]: https://zhaoqize.github.io/puppeteer-api-zh_CN/#/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230312/b75c80cf2dae45f5981d95bea105cd97.png
[TCP_IP]: /images/20230312/c2a7ef99e1354f31936c3ee9fa52f6f7.png
[Link 2]: http://www.runoob.com/http/http-status-codes.html