HTTP协议（笔记）

向海風許愿
82 阅读5分钟

概念

中文叫超文本传输协议

基于TCP/IP的应用层通信协议

详细规定了浏览器和万维网服务器之间互相通信的规则

协议主要规定：

  • 客户端：向服务器发送数据，可称为请求报文
  • 服务端：向客户端返回数据，可称为响应报文

报文：可以简单理解为一堆字符串

请求报文

请求报文的组成

  • 请求行
  • 请求头
  • 空行
  • 请求体

http请求行

  • 请求方法（get,post,put,delete等）
  • 请求URL（统一资源定位器）
  • http协议版本号

举例：
www.baidu.com：80/index.html?…

  • http 协议（https,ftp,ssh等）
  • www.baidu.com 域名
  • 80 端口号
  • /index.html 路径
  • a=100&b=200 查询字符串
  • #logo 哈希（锚点链接）

http请求头

格式：『头名：头值』

http请求体

格式：

  • 空 --- GET请求
  • 字符串，JSON --- POST请求
    • 字符串：keywords=手机&price=2000
    • JSON:{"keywords":"手机","price":2000}

响应报文的组成

  • 响应行
    HTTP/1.1 200 OK
    • HTTP/1.1: HTTP协议版本号
    • 200：响应状态码
    • OK：响应状态描述
      注意：响应状态码和响应字符串的关系是一一对应的
  • 响应头
    • Cache-Control:缓存控制 private 私有的，只允许客户端缓存数据
    • Connection 链接设置
    • Content-Type:text/html;charset=utf-8 设置响应体的数据类型以及字符集,响应体为html，字符集 utf-8
    • Content-Length:响应体的长度，单位为字节
  • 空行
  • 响应体
    • 类型：HTML，CSS,JS,图片，JSON

创建http服务

使用Node.js创建http服务

  • 操作步骤
// 1.导入http模块
const http=require('http')
// 2.创建服务对象create创建server服务
// request  请求，对请求报文的封装对象，可以获得请求报文的数据
// response 响应，对响应报文的封装对象，可以设置响应报文
// http.createServer里的回调函数的执行时机：当接收到HTTP请求的时候，就会执行
const server=http.createServer((request,response)=>{
  response.end('创建服务')
})
// 3.监听端口，启动服务
server.listen(9000,()=>{
  console.log('服务启动')
})
  • 测试
    • 浏览器请求对应端口
      http://127.0.0.1:9000
  • 注意事项
    • 响应内容中文乱码的解决方法 response.setHeader('content- type','text/html;charset=utf-8')
    • 默认端口
      • http协议 80
      • HTTPS协议 443
    • 常用端口
      • 3000 8080 8090 9000

获取http请求报文

含义语法
请求方法request.method
url查询字符串request('url').parse(request.url,true).query
URL路径request('url').parse(request.url).pathname
请求路径request.url
请求头request.headers

注意：

  1. request.url只能获取路径以及查询字符串，无法获取URL中的域名和协议的内容
  2. request.headers将请求信息转化成一个对象，并将属性名都转化成了小写
  3. 关于路径：如果访问网站的时候，只填写了IP地址或域名信息，此时请求的路径为 /
  4. favicon.ico:浏览器自动发出的请求

设置HTTP响应报文

作用语法
设置响应状态码response.statusCode
设置响应状态描述response.statusMessage(比较少用）
设置响应头信息response.setHeader('头名','头值')
设置响应体response.write('xx')
response.end('xxx')
// write和end的两种使用情况
//1.结合使用 响应体相对分散
response.write('xx')
response.write('xx')
response.write('xx')
response.end()//每一个请求，在处理时必须要执行end方法
// 2.单独使用end方法 响应体相对集中
response.end('xxx')

静态资源服务

静态资源：内容长时间不发生改变的资源，例如图片，css文件，js文件，字体文件
动态资源：内容经常更新的资源，例如百度首页，京东搜索列表页面

  1. 网站根目录或静态资源目录
    • HTTP服务在哪个文件夹中寻找静态资源，那个文件夹就是静态资源目录，也称为网站根目录
  2. 网页中的url

    • 绝对路径
      可靠性强，相对容易理解，在项目中运用较多

      形式特点
      baidu.com/web直接向目标资源发送请求，容易理解。外链大多使用这种形式
      //baidu.com/web与页面URL的协议拼接形成完整URL再发送请求。大型网站用的较多
      /web与页面URL的协议，主机名，端口拼接形成完整URL再发送请求。中小型网站

    • 相对路径
      相对路径在发送请求时，需要与页面URL路径进行计算，得到完整的URL后，再发送请求，学习阶段用的较多

    • 网页中使用url的场景

      • video audio标签src
      • form中的URL
      • AJAX请求中的URL

3.设置资源类型（mime类型)

媒体类型（mime)是一种标准，用来表示文档，文件或字节流的性质和格式

HTTP服务可以设置响应头Content-Type来表明响应体的MIME类型，浏览器会根据该类型决定如何处理资源

代码：

html:'test.html',
css:'test.css'

案例：多个文件夹进行判断

require('http').createServer((request, response) => {
  // 获取路径和请求方法
  let { url, method } = request
  // 文件夹路径
  let rootDir = __dirname + './file'
  // 拼接文件路径
  let filePath = rootDir + url
  // 读取文件内容
  fs.readFile(filePath, (err, data) => {
    if (err) {
      response.statusCode = 404
      response.end('<h1>Not Found</h1>')
    } else {
      // 响应文件内容
      response.end(data)
    }
  }).listen(9000, () => {
    console.log('9000端口启动')
  })
})

4.GET和POST请求场景的情况

  • GET
    • 点击a链接
    • link标签引入css
    • form标签中的method为get
    • 在地址栏直接输入url访问
  • POST
    • form中的method为post

GET和POST请求的区别

  • GET主要用来获取数据，POST----提交数据
  • GET带参数请求是将参数缀到URL之后
    POST带参数请求是将参数放到请求体当中
  • POST相对安全，因为浏览器中参数会暴露在地址栏
  • GET请求大小有限制，一般为2k,POST请求没有大小限制
avatar
文章
阅读
粉丝