博学谷学习记录 | 学习总结，用心分享 | 前端学习之Ajax（一）

程序二次猿

已于 2023-02-05 20:36:41 修改

阅读量49

点赞数

文章标签：学习 javascript 开发语言前端 html

于 2023-02-01 20:10:48 首次发布

本文链接：https://blog.csdn.net/m0_47321226/article/details/128824379

版权

本文介绍了Web服务器和客户端的基本概念，包括浏览器、服务器的角色以及它们之间的HTTP通信。详细讲解了URL的组成部分和Ajax技术，特别是使用axios进行GET和POST请求的方法。同时，阐述了请求响应报文、响应状态码与业务状态码的区别。

摘要由CSDN通过智能技术生成

服务器相关知识

1 服务器相关概念

1.1 客户端

在前端开发中，客户端特指“Web 浏览器”，它的作用是将互联网世界中的 Web 资源加载、并呈现到浏览器窗口中供用户使用。

常见的客户端浏览器有 Google的Chrome浏览器、 Mozilla的Firefox浏览器、Microsoft的Edge浏览器、Apple的Safari浏览器。

1.2 服务器

服务器是提供服务的设备，它的作用就是在上网过程中，服务器专门负责存放资源和对外提供服务。例如，

1.3 客户端与服务器的通信

客户端与服务器之间的通信过程分为请求 -- 响应两个步骤。其中，“请求”就是客户端通过网络去找服务器要资源的过程；“响应”就是服务器把资源通过网络发送给客户端的过程。

1.4 URL地址

URL，即统一资源定位系统（uniform resource locator），是英特网的万维网服务程序上用于指定信息位置的表示方法，其作用就是让通信的双方能够明确资源的具体位置。

URL地址格式为：protocol :// hostname[:port] / path ，例如

1.协议（protocol）

http 为网络协议（protocol），其目的是用来保证通信的双方能读懂彼此发送过来的消息内容。

2.主机名（hostname）

主机名用来标识互联网中服务器的唯一性，通过主机名能个精确地访问到目标服务器。

3.端口（port）

由于一台服务器上可能运行着多个网站（多个进程），因此该服务器会为每个网站提供一个访问的入口（即进程端口），即端口（port），它的主要作用是表示一台计算机中的特定进程所提供的服务，其范围为0 - 65535 之间的整数。

（在 http 协议中，如果 URL 地址中的端口号是 80，则 :80 端口可以省略不写，有且仅有:80 端口可以被简写）

4.路径（path）

路径用来表示资源在服务器上具体的存放位置。

2 Ajax

2.1 Ajax相关概念

Ajax（Asynchronous Javascript And XML），中文名为异步的 JavaScript 和 XML，是一种用来实现客户端向服务器请求数据的一种技术。正因为它是一项请求数据的技术，因此才变得无比重要。

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

2.3 axios

axios是一个专注于数据请求的库，它的基本语法如下：

1.GET 请求的查询参数

（1）params写法

    axios({
      url: 'http://www.xxxxxx.top:3009/api/getbooks',
      method: 'get',
      // params 参数是用来指定查询条件
      params: {
        // 查询id为2的那一本书
        id: 2,
        //bookname: '红楼梦'
      }
    }).then((res) => {
      console.log(res)
    })

有 params 的结果，

没有 params 的结果，

（2）URL地址末尾写法

由于在使用 Ajax 发起 GET 请求时的参数，会以 ?键=值的形式拼接到 URL 地址的末尾。因此还有另一种写法，即

    axios({
      url: 'http://www.xxxxx.top:/api/getbooks?id=2', //直接写在路径后面
      method: 'get',
    }).then((res) => {
      console.log(res)
    })

http://www.liulongbin.top:3009/api/getbooks?id=1&bookname=love

如果遇到多个查询参数，则可用 & 符号进行分隔，

    axios({
      url: 'http://www.xxxxxx.top:3009/api/getbooks?id=1&bookname=love',
      method: 'get',
    }).then((res) => {
      console.log(res)
    })

2.POST请求

发起 POST 请求时，只需要将 method 属性的值设置为 'POST' 即可，需要提交的数据需作为 data 属性的属性值并会以请求体的形式提交（不会直接拼接到URL地址的末尾）

  <script>

    document.querySelector('#btnPOST').addEventListener('click', function () {
      axios({
        method: 'post',
        url: 'http://www.xxxxxx.top:3009/api/adddata',
        data: {
          // 发送给服务器的数据
          xxx: 'xxx',
          xxx: 'xxx',
          xxx: 'xxx'
        }
      }).then(({ data: res }) => {
        console.log(res) // 服务器响应回来的数据
      })
    })
  </script>

需要注意的是，data 属性的属性值并不局限于上述事例中的对象形式。

在数据传输量上，GET 请求只能在 URL 中携带少量的数据，而 POST 请求可以用提交大量数据（正因如此，POST 请求的数据需要单独放在请求体中）。