前后端交互学习笔记(四)：ajax及http_前后端hhtp请求-CSDN博客

本文链接：https://blog.csdn.net/flytrybest/article/details/128381526

ajax学习笔记

1. 服务器的基本概念

上网过程中，负责存放和对外提供资源的电脑，叫做服务器。负责获取和消费资源的电脑，叫做客户端。
URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
url地址一般由三个部分组成，如下所示：
打开 Chrome 浏览器，Ctrl+Shift+I 打开 Chrome 的开发者工具，切换到 Network 面板，选中 Doc 页签，刷新页面，分析客户端与服务器的通信过程
客户端发送数据请求服务器，服务器发送数据，响应客户端
如果要在网页中请求服务器上的数据资源，则需要用到 XMLHttpRequest 对象。XMLHttpRequest（简称 xhr）是浏览器提供的 js 成员，通过它，可以请求服务器上的数据资源。最简单的用法 var xhrObj = new XMLHttpRequest()
资源的请求方式，get从服务器拿资源，post，向服务器发送资源

2. ajax的基本使用

Ajax 的全称是 Asynchronous Javascript And XML（异步 JavaScript 和 XML）。通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。用户与网页进行数据的交互，而网页与服务器之间的交互使用的是ajax
jq中的三个ajax请求，$.get()//拿资源 $.post()//发送资源 $.ajax()//即可拿，又可发送
get的使用，回调函数里面就是拿到服务器返回的数据，谷歌调试工具中的Network下的XHR可以监听ajax的请求：

$.get(url, [data], [callback])

在这里插入图片描述
如下述写法，res打印出服务器返回的数据：

 $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 },function (res) {
       console.log(res)
   })

post的使用，语法如下，无论post 还是get，data这个参数是要用对象的形式表示：

$.post(url, [data], [callback])

在这里插入图片描述
5. ajax使用：

$.ajax({
   type: '', // 请求的方式，例如 GET 或 POST（大小写都可以）
   url: '',  // 请求的 URL 地址
   data: { },// 这次请求要携带的数据
   success: function(res) { } // 请求成功之后的回调函数
})

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。
postman是一个测试接口的工具，对于get请求，参数直接写在Params这一栏，而对于post请求，data需要写在下述的位置：

3. form表单的基本使用

表单主要用来在网页中采集数据，由三个部分组成：表单标签form ，表单域（文本框）以及表单按钮（如提交按钮），表单常用的属性如下：
action属性用来规定当提交表单时，向何处发送表单数据。action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。当表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址
target属性常用的值及其意义：
method属性，get 方式适合用来提交少量的、简单的数据，直接显示在url地址栏，安全性较低。post 方式以一种更隐蔽的方式进行提交，适合用来提交大量的、复杂的、或包含文件上传的数据。在实际开发中，表单的 post 提交方式用的最多，默认是get。
enctype 属性用来规定在发送表单数据之前如何对数据进行编码。不要和method弄混，一个内部自己的，一个外部的，在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data其它的使用默认的就好，如下：

3. ajax提交form表单

如果使用表单提交数据，则会导致以下两个问题：页面会发生跳转，页面之前的状态和数据会丢失
解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。
ajax获取表单元素，使用.submit,或者1使用.on(‘submit’ ),使用事件函数e.preventDefault()阻止表单的提交和跳转
serialize() 函数的好处：可以一次性获取到表单中的所有的数据。在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！，后面调用url传递的时候，直接将其赋值给data，传入参数即可

$(表单选择器selector).serialize()

清空表单的写法（固定，记着）

 $(表单选择器)[0].reset()

如果不阻止表单的默认行为，那么提交之后会刷新页面，如果阻止了不会刷新，需要自己刷新，同时添加的时候注意，重复操作之前，需要选择到列表然后调用.empty()函数进行清空

4. 模板引擎（根据返回的数据动态生成结果）

模板引擎，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。常用的是art-template模板引擎，官网：http://aui.github.io/art-template/zh-cn/index.html
在浏览器中访问 http://aui.github.io/art-template/zh-cn/docs/installation.html 页面，找到下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地，然后，通过 script 标签加载到网页上进行使用。
使用步骤：
导入：

  <script src="./lib/template-web.js"></script>

定义数据：let data={name:value1}
定义模板，必须放在script标签里面，并且type需要写上text/html：

<script type="text/html" id="tpl-user">
    <h1>{{name}}</h1>
  </script>

调用 template 函数，第一个参数是模板的id，注意只用id，不用加#，第二个参数是渲染的数据，返回是加入数据后的标签

    let htmlStr = template('tpl-user', data)//这个data可以认为是res

渲染HTML结构,注意后面的show函数，通常之前会被默认隐藏掉，书写show函数后进行显示：

 <div id="container"></div>
  $('#container').html(htmlStr).show()

如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染，下述的输出语法都是放到模板标签里面的。 
{{@ value }}
如果要实现条件输出，则可以在 {{ }} 中使用 if … else if … /if 的方式，进行按需输出。
{{if 表达式}} 按需输出的内容 {{/if}}
{{if 表达式}} 按需输出的内容 {{else if 表达式}} 按需输出的内容 {{/if}}
如果要实现循环输出，则可以在 {{ }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问。（注意此时的index和value是固定写法）
{{each arr}}//直接协商res返回的数组名
    {{$index}} {{$value}}
{{/each}}

过滤器的使用：

//再模板中书写
{{属性名 | filterName}}
//在js中定义过滤器函数：
template.defaults.imports.filterName = function(value){/*return处理的结果*/}

清空列表可以用 $(‘#list’).empty().hide() 进行清空

5. XHR的基本使用

XMLHttpRequest（简称 xhr）是浏览器提供的 Javascript 对象，通过它，可以请求服务器上的数据资源。之前所学的 jQuery 中的 Ajax 函数，就是基于 xhr 对象封装出来的。
使用xhr发起GET请求步骤如下：

// 1. 创建 XHR 对象
let xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定 请求方式 与 URL地址（？后面可以携带传入的参数）
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&name=XXX')
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send()
// 4. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    // 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 4.2 打印服务器响应回来的数据
        console.log(xhr.responseText)
    }
}

其中readyState 属性，用来表示当前 Ajax 请求所处的状态，常用的状态入下:
在这里插入图片描述

对于上述ajax携带数据发起的请求，其实本质也都是用？拼接在url后面
URL 地址中，只允许出现英文相关的字母、标点符号、数字，因此，在 URL 地址中不允许出现中文字符。URL编码原则的通俗理解：使用英文字符去表示非英文字符。使用举例如下：注意，浏览器会自动进行，因此我们在传参的时候可以传递中文，了解即可

encodeURI('黑马程序员')
// 输出字符串  %E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98
decodeURI('%E9%BB%91%E9%A9%AC')
// 输出字符串  黑马

使用xhr post数据写法如下：

// 1. 创建 xhr 对象
let xhr = new XMLHttpRequest()
// 2. 调用 open()
xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook')
// 3. 设置 Content-Type 属性（固定写法）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 4. 调用 send()，同时将数据以查询字符串的形式，提交给服务器
xhr.send('bookname=水浒传&author=施耐庵&publisher=天津图书出版社')
// 5. 监听 onreadystatechange 事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}

6. 数据交换格式

数据交换格式，就是服务器端与客户端之间进行数据传输与交换的格式。常用xml和json。更常用json格式
xml和html类似，但和html毫无关系。英文全称是 EXtensible Markup Language，即可扩展标记语言。因此，也是一种标记语言。js中解析xml较为麻烦
HTML 被设计用来描述网页上的内容，是网页内容的载体。XML 被设计用来传输和存储数据，是数据的载体
- JSON 的英文全称是 JavaScript Object Notation，即“JavaScript 对象表示法”。简单来讲，JSON 就是 Javascript 对象和数组的字符串表示法，它使用文本表示一个 JS 对象或数组的信息，因此，JSON 的本质是字符串。
- 作用：JSON 是一种轻量级的文本数据交换格式，在作用上类似于 XML，专门用于存储和传输数据，但是 JSON 比 XML 更小、更快、更易解析。
- 现状：JSON 是在 2001 年开始被推广和使用的数据格式，到现今为止，JSON 已经成为了主流的数据交换格式。
json对象结构：用{}包裹，数据结构为 { key: value, key: value, … } 的键值对结构。其中，key 必须是使用英文的双引号包裹的字符串，value 的数据类型只能是数字、字符串、布尔值、null、数组、对象6种类型，如果value中需要用到引号，也必须是双引号
json数组结构：数组结构在 JSON 中表示为 [ ] 括起来的内容。数据结构为 [ “java”, “javascript”, 30, true … ] 。数组中数据的类型可以是数字、字符串、布尔值、null、数组、对象6种类型。同样引号也必须是双引号
json中不能写注释，其值不能是undefined或者函数，其主要是用来在计算机与网络之间存储与传输数据。
json与js对象之间的转换

//这是一个对象
let obj = {a: 'Hello', b: 'World'}

//这是一个 JSON 字符串，本质是一个字符串
let json = '{"a": "Hello", "b": "World"}'

//把数据对象转换为字符串的过程，叫做序列化
let obj = JSON.parse('{"a": "Hello", "b": "World"}')
//结果是 {a: 'Hello', b: 'World'}
//把字符串转换为数据对象的过程，叫做反序列化
let json = JSON.stringify({a: 'Hello', b: 'World'})
//结果是 '{"a": "Hello", "b": "World"}'

7. 封装自己的ajax函数

代码举例如下，代替原来导入jq.js里面的数据交换的功能；：

function resolveData(data) {
  var arr = []
  for (var k in data) {
    var str = k + '=' + data[k]
    arr.push(str)
  }

  return arr.join('&')
}


//定义一个自己的ajax函数itheima
function itheima(options) {
  var xhr = new XMLHttpRequest()

  // 把外界传递过来的参数对象，转换为 查询字符串
  var qs = resolveData(options.data)

  if (options.method.toUpperCase() === 'GET') {
    // 发起GET请求
    xhr.open(options.method, options.url + '?' + qs)
    xhr.send()
  } else if (options.method.toUpperCase() === 'POST') {
    // 发起POST请求
    xhr.open(options.method, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}
//后续的调用举例：
 itheima({
      method: 'post',
      url: 'http://www.liulongbin.top:3006/api/addbook',
      data: {
        bookname: '水浒传',
        author: '施耐庵',
        publisher: '北京图书出版社'
      },
      success: function (res) {
        console.log(res)
      }
    })

8. XHR level2新特性

L1版本的缺点:只支持文本数据的传输，无法用来读取和上传文件；传送和接收数据时，没有进度信息，只能提示有没有完成
设置请求时限：

let xhr = new XMLHttpRequest()
 xhr.timeout = 3000//单位毫秒
 xhr.ontimeout = function(event){
     alert('请求超时！')
 }

FormData对象传输管理表单数据，个人理解：通常涉及到文件上传的时候使用这种方式，其它情况下还是考虑原来的方式

      // 1. 新建 FormData 对象
      let fd = new FormData()
      // 2. 为 FormData 添加表单项
      fd.append('uname', 'zs')
      fd.append('upwd', '123456')
      // 3. 创建 XHR 对象
      var xhr = new XMLHttpRequest()
      // 4. 指定请求类型与URL地址
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      // 5. 直接提交 FormData 对象，这与提交网页表单的效果，完全一样
      xhr.send(fd)

使用formData获取表单数据：

  // 1. 通过 DOM 操作，获取到 form 表单元素
    let form = document.querySelector('#form1')

    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()

      // 创建 FormData，快速获取到 form 表单中的数据
      let fd = new FormData(form)

      let xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }
    })

用户发送文件到服务器：

    // 1. 获取到文件上传按钮
    let btnUpload = document.querySelector('#btnUpload')
    // 2. 为按钮绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3. 获取到用户选择的文件列表
      let files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择要上传的文件！')
      }
      let fd = new FormData()
      // 将用户选择的文件，添加到 FormData 中
      fd.append('avatar', files[0])
      let xhr = new XMLHttpRequest()
      
       // 监听文件上传的进度
      xhr.upload.onprogress = function (e) {
        if (e.lengthComputable) {//必须是e.lengthComputable为true结果可计算的1时候使用
          // 计算出上传的进度
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete)
          // 动态设置进度条（可以使用bootstrap里面的属性）
          $('#percent').attr('style', 'width: ' + procentComplete + '%;').html(procentComplete + '%')
        }
      }
      //上传成功后更改进度条的属性
       xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success')
      }


      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功（配合html显示出该图片）
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log('图片上传失败！' + data.message)
          }
        }
      }
    })

使用jq实现上述文件上传功能

使用jq上传文件的时候必须且只能使用ajax

 $('#btnUpload').on('click', function () {
        var files = $('#file1')[0].files
        if (files.length <= 0) {
          return alert('请选择文件后再上传！')
        }

        var fd = new FormData()
        fd.append('avatar', files[0])

        // 发起 jQuery 的 Ajax 请求，上传文件
        $.ajax({
          method: 'POST',
          url: 'http://www.liulongbin.top:3006/api/upload/avatar',
          data: fd,
          //下述两行代码必须且固定
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res)
          }
        })
      })
    })

// 监听到Ajax请求被发起了
      $(document).ajaxStart(function () {
      })

      // 监听到 Ajax 完成的事件
      $(document).ajaxStop(function () {
      })

9. axios

Axios 是专注于网络数据请求的库。相比于原生的 XMLHttpRequest 对象，axios 简单易用。相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。
axios发起get请求，注意服务器返回的数据，使用之前记得先导入axios的js文件：

 // 请求的 URL 地址
 let url = 'http://www.liulongbin.top:3006/api/get'
 // 请求的参数对象
let paramsObj = { name: 'zs', age: 20 }
 // 调用 axios.get() 发起 GET 请求
 axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     let result = res.data
 })

axios 发起post请求：

// 请求的 URL 地址
let url = 'http://www.liulongbin.top:3006/api/post'
 // 要提交到服务器的数据
let dataObj = { location: '北京', address: '顺义' }
 // 调用 axios.post() 发起 POST 请求
 axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     let result = res.data
      })

直接使用axios 发请求：

 axios({
     method: '请求类型',
     url: '请求的URL地址',
     //两个选择其中的一个即可
     data: { /* POST数据 */ },
     params: { /* GET参数 */ }
 }) .then(function (res) {//成功运行后执行的函数
        console.log(res.data)
      })

10. 同源策略与跨域

如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。反之，则是跨域。如果没有特别指出端口号，默认是80
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。如：A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互。
浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！
解决跨域的方案：
- JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
- CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

JSONP

script 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。因此，JSONP 的实现原理，就是通过 script 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。，jsonp不属于ajax
src请求的js路径后面可以?callback=***来指定外部文件可以调用的函数名字，返回对哪个函数的调用，如:

  <script src="./js/getdata.js?callback=fun"></script>

jq中实现jsonp，举例如下：

 $.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 发送到服务端的参数名称，默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称，默认值为 jQueryxxx 格式，自动随机生成
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

jq中jsonp的实现原理是：在发起 JSONP 请求的时候，动态向 header中 append 一个 script标签；在 JSONP 请求成功以后，动态从 header中移除刚才 append 进去的 script标签；

11.防抖与节流

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。可以保证多次调用时，只请求一次，节省资源。常用场景：用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；
防抖的代码举例如下：

var timer = null                    // 1. 防抖动的 timer
 function debounceSearch(keywords) { // 2. 定义防抖的函数
    timer = setTimeout(function() {
    // 发起 JSONP 请求的函数
    getSuggestList(keywords)
    }, 500)
 }
 $('#ipt').on('keyup', function() {  // 3. 在触发 keyup 事件时，立即清空 timer
    clearTimeout(timer)
    // ...省略其他代码
    debounceSearch(keywords)//延时执行发起请求的函数
 })

缓存搜索数据，举例如下：

  1. 定义全局缓存对象
  var cacheObj = {} 
  2. 将搜索结果保存到缓存对象中
  var k = $('#ipt').val().trim()
   cacheObj[k] = res
  3. 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }

节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率,鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；常用的场景如下：懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
节流阀：节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。每次执行操作前，必须先判断节流阀是否为空。
举例如下：

$(function() {
  var angel = $('#angel')
  var timer = null // 1.预定义一个 timer 节流阀
  $(document).on('mousemove', function(e) {
    if (timer) { return } // 3.判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒，因此就不执行
    timer = setTimeout(function() {
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
      timer = null // 2.当设置了鼠标跟随效果后，清空 timer 节流阀，方便下次开启延时器
    }, 16)
  })
})

12. HTTP协议

简介

通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol），简称 HTTP 协议。
客户端要以HTTP协议要求的格式把数据提交到服务器，服务器要以HTTP协议要求的格式把内容响应给客户端。HTTP 协议采用了 请求/响应 的交互模型。

HTTP请求消息

客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息。HTTP 请求消息又叫做 HTTP 请求报文。
HTTP 请求消息由请求行（request line）、请求头部（ header ）、空行和请求体 4 个部分组成。
请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。常用的如下：

关于更多请求头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers
最后一个请求头字段的后面是一个空行。用来分隔请求头部与请求体
注意：只有 POST 请求才有请求体，GET 请求没有请求体！

HTTP响应消息

响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。主要构成如下：
响应头部：记录响应的基本信息，关于更多响应头字段的描述，可以查看 MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers，其它的基本和请求报文一样，但是，post和get是都具有响应体的。

HTTP请求方式

用来表明要对服务器上的资源执行的操作：
在这里插入图片描述

HTTP响应状态码

HTTP 响应状态码（HTTP Status Code），用来标识响应的状态。完整的 HTTP 响应状态码，可以参考 MDN 官方文档 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。
2-5开头常用的如下：