Ajax复习01-(Ajax 的基础用法,http协议的请求报文 & 响应报文)

本文链接：https://blog.csdn.net/m0_64526818/article/details/122546821

服务器相关的基础概念:

客户端

广义的理解: pc电脑,笔记本,pad,电子手表,手环...

狭义的理解：在前端开发中，客户端特指“浏览器”。

作用：将互联网世界中的Web 资源加载、并呈现到浏览器窗口中供用户使用。

服务器

概念：服务器是提供服务的设备(本质上就是一台电脑主机)。

作用：在上网过程中，服务器专门负责存放资源和对外提供服务。

前端开发中客户端一般指浏览器

服务器的作用是存放程序员的代码,为客户端提供网络资源的

客户端与服务器通信的过程

客户端与服务器之间的通信过程，分为请求(request) - 响应(response)两个步骤。其中：

请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”

响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应”

URL地址

URL 地址用来表示服务器上每个资源的确切访问路径。

一个标准的 URL 地址主要由以下 4 个部分构成：

①客户端与服务器之间的通信过程是基于请求和响应的。

②URL 地址的主要组成部分，从前到后分别是协议、 主机号、 端口号 和路径。

③在 http 协议中，URL 地址中的 :80 端口号可以被省略

服务器对外提供的资源

文字，image图片，audio音频，video视频，数据(数据是网页的灵魂)

在网页中如何请求服务器的数据:需要用到的技术Ajax

Ajax 的基础用法

Ajax的概念

Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。

它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。

网页中 Ajax 的应用场景无处不在，有数据的地方就有 Ajax！

使用Ajax请求数据的5种方式

客户端浏览器在请求服务器上的数据时，根据操作性质的不同，可以分为以下 5 种常见的操作：

post: 提交数据

get : 获取数据

delete: 删除数据

put: 更新数据(全部更新)

patch: 更新数据(部分更新)

Ajax的基础用法

axios的概念

axios专注于数据请求的库

axios的基础语法

axios({
  method:'请求的类型'，
  url:'请求的URL地址'
  data: { 'post请求参数'},
  params: { 'get请求参数'}
}).then((result)=>{
  // .then用来指定请求成功之后的回调函数
  // 形参中的result是请求成功之后的结果
})

axios发起get请求

  <script>
    // axios测试get请求
    axios({
      // method:请求方式 大小写都行
      method:'get',
      // url:请求地址
      url:'http://www.liulongbin.top:3009/api/getbooks'
    }).then((result)=>{
      console.log(result)
    })
  </script>

axios发起get请求携带参数

如果想指定查询的条件，可以通过 params 选项来指定查询的参数

axios发起get请求携带参数的本质

在使用 Ajax 发起 GET 请求时，data 中的参数，会以 ?键=值的形式拼接到 URL 地址的末尾。

注意：?后面的都是查询参数，查询参数的键和值之间使用 = 进行分隔

axios发起get请求携带多个参数

如果要携带多个参数，只需要在 params 对象中指定多个查询参数项即可

最终，在 URL 地址的末尾，多个查询参数之间使用 &符号进行分隔

URI编码，解码

在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理

浏览器内置了encodeURI()和 decodeURI()两个方法，用来实现 URL 的编码和解码处理：

  <script>
    // 浏览器会自动的处理中文
    axios({
      // method:请求方式 大小写都行
      method:'get',
      // url：请求地址
      url:'http://www.liulongbin.top:3009/api/getbooks?',
      // params设置参数
      params:{
        id:2,
        bookname:'红楼梦'
       }
    }).then((result)=>{
      console.log(result)
    })

    // encodeURI()编码
    console.log(encodeURI('红')) // %E7%BA%A2

    // decodeURI()解码
    console.log(decodeURI('%E7%BA%A2')) // 红
  </script>

result是axios套壳的结果

服务器端响应给 axios 的原始数据，被 axios 在外面“套了一层壳”

在函数的形参中使用解构赋值

使用解构赋值，可以轻松地获取到axios 请求回来的真实数据

    <script>       
        axios({
            // method:请求方式  get大小写都行
            method:'get',
            // url:请求地址
            url:'http://www.liulongbin.top:3009/api/getbooks',
            // params设置参数
            params:{
              id:1,
              bookname:'西游记'
            }
            // 从.then(fn) 回调函数的形参中，解构赋值出 data 属性，重命名为 res
        }).then(({data:res})=>{
            console.log(res);
        })  
    </script>

axios发起post请求

使用 axios 发起post请求时，只需要将method 属性的值设置为 'POST' 即可,携带参数时需设置data属性

  <script>
    // axios测试get请求
    axios({
      // method:请求方式 大小写都行
      method: 'post',
      // url:请求地址
      url: 'http://www.liulongbin.top:3009/api/addbook',
      // 注意：post请求传参要data属性
      data: {
        bookname: '阿巴阿巴',
        author: '阿巴阿巴',
        publisher: '武汉出版社'
      }
    }).then(({data: result}) => {
      //成功回调
      console.log(result)
    })
  </script>

post提交数据的方式

通过 Chrome 浏览器的 Network网络请求面板，可以发现 POST 请求提交的数据，并没有拼接到 URL 地址的末尾

原因：各个浏览器对 URL 的长度有限制

GET和POST提交数据的区别

GET 请求只能在 URL 中携带少量的数据

POST 请求适合用来提交大量的数据

结论：POST 为了能够提交大量的数据，所以没有把数据拼接到 URL 的末尾；而是放到了独立的“请求体”中。