什么是 HTTP

超文本传输协议

浏览器想获取数据那必然要向服务端索取，那么必然就要提到 http 和 https 了 http 协议是基于 TCP 协议和 IP 协议构建的，它是主要是用来规定浏览器与服务器之间传输数据的格式

https 和 http 的区别：

http 连接是简单的，无状态的，传输过程是明文的

https 是由 SSL+HTTP 协议构建的，数据传输是加密的

http 的端口号是 80

https 的端口号是 443

1. TCP 传输控制协议

HTTP 只规定了数据的格式，而 TCP 规定了服务器与浏览器之间应该如何进行数据传输

TCP 的特点

TCP 是可靠的，但是慢（发送请求后，能得到结果）
TCP 是面向连接的（浏览器与服务器之间进行连接）
TCP 相对较慢

TCP 的三次握手，四次挥手

浏览器与服务端每次建立连接之间都要进行三次对话，这三次对话大概是这样的：

浏览器A：浏览器A请求连接服务器A
服务器A：服务器A已收到浏览器A的连接请求，开始进行连接吧
浏览器A：浏览器A开始连接服务器A

浏览器与服务端断开连接需要四次对话，这四次对话大概是这样的：

浏览器A：浏览器A请求断开连接
服务器A：服务器A收到浏览器A请求断开连接的请求
服务器A：服务器A准备完毕，现在可以断开连接了
浏览器A：浏览器A收到，开始断开连接

2. UDP 用户数据报协议

UDP 是一种无连接的传输层协议

UDP 的特点

UDP 是不可靠的（发送请求后，不能得到结果）
UDP 是不面向连接的
UDP 相对较快

前端部分

HTTP 请求

1. 常用的请求方法

HTTP 定义了一组请求方法，代表了我这个请求是干嘛的

GET 请求用于向服务器获取数据
POST 请求用于将数据上传到服务器
PUT 请求是用于更新服务器上的数据
PATCH 请求是用于局部更新服务器上的数据
DELETE 请求用于删除指定的资源

一个请求最多有四部分组成，第四部分的请求内容可以省略

2. HTTP 请求格式

第一部分请求方法 /请求的路径协议名称/版本号 第二部分 key：vlaue 集合

Content-Type: application/x-www-form-urlencoded（Content-Type是表示请求的第四部分，请求内容的格式） Content-Length: 1234 Host: www.baidu.com Cookie: xxxxx

第三部分回车

第三部分的回车是为了区分第二部分和第四部分

第四部分请求的内容

头像，密码，文件等…

3. HTTP 响应格式

一个响应一共有四部分

第一部分协议名称/版本号状态码状态解释

状态码是服务器对浏览的一个反馈，比如：404 代表找不到请求的内容

第二部分 key：vlaue 集合

Content-Type: text/html（Content-Type表示响应内容的格式） Content-Length: 1234

第三部分回车 第四部分响应的内容

如何发送 HTTP 请求

在 js 中我们可以通过以下几种方式发送请求:

1. form 标签

这中方式的缺点是会刷新页面或新开页面

<form action="http://baidu.com" method='GET'>
  <input type="submit">
</form>

2. a 标签

这中方式的缺点是会刷新页面或新开页面，而且只能发送 GET 请求

<html>
    <a href="http://baidu.com" id="request"></a>
</html>
<script>
    request.click()
</script>

3. img 标签

这种方式只能以图片的方式展示，一般用于请求图片

<img src="URL"/>

4. link 标签

link 标签也能发送一个请求，link 一般用户请求一个 CSS 文件

<link rel="stylesheet" href="URL">

5. script 标签

script 标签也可以发送请求，但是只能以脚本的形式运行。因为 script 的 src 是可以跨域，所以开发者利用这个特性创造 JSONP 这门技术

<script type="text/javascript" src="URL"></script>

JSONP

JSONP 是一种可以解决跨域通信的方式，因为是利用 script 标签的 src ，所以只能发生 GET 请求

1. 请求方动态创建 script 标签，script 标签的 src 指向响应方，并同时传一个查询参数

这个查询参数是告诉响应方我要干什么，请你返回相应的数据

2. 响应方根据查询参数，填充数据然后返回给请求方

6. AJAX

AJAX 是 JavaScript 执行异步网络请求的一种技术，全称为 Asynchronous JavaScript + XML（异步 JavaScript 和 XML）,AJXA 可以发生任何类型的请求，但是受同源政策的影响

AJAX 如何发送请求

它是利用 XMLHttpRequest 对象，构造一个新的 http 请求。

新建一个 resquest 实例对象

const resquest = new XMLHttpRequest()

设置下请求方法和，请求的地址

resquest.open('GET','URL')

open() 方法的第一个参数是请求的方法，第二个参数是你要请求的的 URL;它还可以接收第三参数，代表请求是不是异步的，如果不写默认是 true

配置下请求头信息

告诉服务你的请求体的类型

request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

告诉服务器你需要什么类型的数据

request.responseType = 'json'

""（空字符串）：等同于text，表示服务器返回文本数据。
"arraybuffer"：ArrayBuffer 对象，表示服务器返回二进制数组。
"blob"：Blob 对象，表示服务器返回二进制对象。
"document"：Document 对象，表示服务器返回一个文档对象。
"json"：JSON 对象。
"text"：字符串。

开始发出请求

request.send()

send() 方法的参数是你想发给响应方的数据

AJAX 如何处理响应

onreadystatechange 属性可以监听请求的状态变化

request.onreadystatechange = fn

readyState 值为 4 时代表完成请求

0 (未初始化) or (请求还未初始化)

1 (正在加载) or (已建立服务器链接)

2 (加载成功) or (请求已接受)

3 (交互) or (正在处理请求)

4 (完成) or (请求已完成并且响应已准备好)

完成响应后再request.status获响应的状态码，如果是 200 ，代表响应成功

function fn() {
    if(requset.readyState === 4){
        if(requset.status === 200){
           …
        }else{}
    }else{
        // 显示提示“加载中……”
    }
}

responseText 可以获取为字符串响应体，这段数据一般是一段 JSON ,获取到数据之后可以将数据转换成 JS 便于我们操作数据

function fn() {
    if(requset.readyState === 4){
        if(requset.status === 200){
           const dataJson = requset.responseText
           const data = JSON.parse(dataJson)
        }else{}
    }else{}
}

4 . 如果你要获取响应头可以用 request.getResponseHeader()或request.getAllResponseHeaders()

后端部分

后端实现代码

const http = require('http')
const fs = require('fs')

http.createServer(function (req,res){
    const path = req.url
    const method = req.method
    if(path.indexOf('index.html')!=-1){
        if(method === 'GET'){
            res.statusCode = 200
            res.setHeader('Content-Type','text/html')
            res.Encoding = 'utf8'
            const page = fs.readFileSync('./index.html')
            res.write(page)
            res.end()
        }
    }else{
        res.statusCode = 404
        res.write('NOT FOUND')
        res.end()
    }
}).listen(8080)

24前端成长日记 - HTTP