Ajax(一)

Ajax(一)

服务器相关基础概念

常见的客户端浏览器

谷歌，IE/Edge , Safari

服务有哪两个重要作用：

1. 资源存放服务

2. 对外提供具体服务

客户端和服务器的通讯是基于 请求 和 响应

URL主要有哪几部分组成：

协议 主机名 端口号 资源存放路径

协议

http: 使用明文传输 不安全

https: s 表示 SS L加密协议，安全

端口号

默认端口号

http: 80

https: 443

URL编码

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

浏览器内置了 encodeURI() 和 decodeURI()两个方法，用来实现 URL：

Ajax含义

Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。
它的英文全称是 Asynchronous Javascript And

基础用法

Ajax请求数据的5种方式

请求方式	描述
POST	向服务器新增数据
GET	从服务器获取数据
DELETE	删除服务器上的一条数据
PUT	更新服务器上的数据（侧重于完整更新）全量更新
PATCH	更新服务器上的数据（侧重于部分更新）打补丁 局部更新

axios

是前端圈最火的、专注于数据请求的。

基础语法

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

GET请求

axios({
      method : 'GET', // 请求方式
      url : 'http://www.liulongbin.top:3009/api/getbooks'  // 请求地址
    }).then(result => {
      console.log(result)
    })

查询参数：params

// 发起get请求，并传入查询参数
// 查询参数的本质 ： 把参数 以？拼接在url后面  key = value    即 url?key=value
    axios({
      method: 'GET',
      url: 'http://www.liulongbin.top:3009/api/getbooks',
      params: {  // 查询参数
        id : 1
      }
    }).then(result => {
      console.log(result)
    })

/*
	// 上面这种写法就相当于：
	 axios({
      method: 'GET',
      url: 'http://www.liulongbin.top:3009/api/getbooks?id=1'
    }).then(result => {
      console.log(result)
    })
*/

在 GET 请求中携带多个查询参数

axios({
      method: 'GET',
      url: 'http://www.liulongbin.top:3009/api/getbooks',
      params: {
        id : 1,
        publisher: '北京图书出版社'

      }
    }).then(result => {
      console.log(result.data)
    })

/*
	// 上面这种写法就相当于：
	// 两个及以上参数用&符进行连接
	 axios({
      method: 'GET',
      url: 'http://www.liulongbin.top:3009/api/getbooks?id=1&publisher=%E5%8C%97%E4%BA%AC%E5%9B%BE%E4%B9%A6%E5%87%BA%E7%89%88%E7%A4%BE'
    }).then(result => {
      console.log(result)
    })
*/

result 是 axios 套壳的结果

示例图：

所以需要对result进行解构赋值：

axios({
      method : 'GET', // 请求方式
      url : 'http://www.liulongbin.top:3009/api/getbooks'  // 请求地址
    }).then(({data:{data}}) => {  // 深层解构
      console.log(data)
    })

POST请求

let btnPOST = document.querySelector('#btnPOST')
    btnPOST.addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3009/api/addbook',
        data: {
          bookname: '美人是如何炼成的',
          author: 'Tricia',
          publisher: '个人出版社'
        }

      }).then(({ data: res }) => {
        console.log(res)
      })

    })

提交数据方式

由于提交的数据太多，所以没有把数据拼接到 URL 的末尾；而是放到了独立的请求体中。

let btnPOST = document.querySelector('#btnPOST')
    btnPOST.addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3009/api/addbook',
        data: {
          bookname: '美人是如何炼成',
          author: 'Tricia',
          publisher: '个人出版社'
        }
        
      }).then(({ data: res }) => {
        console.log(res)
      })
      
    })

请求报文&响应报文

请求报文

请求报文由请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成。图示如下：

注意：

• 在浏览器中，GET 请求比较特殊， 没有请求体。
• 在浏览器中，POST、PUT、PATCH、DELETE 请求有请求体。

响应报文

响应报文由状态行、响应头部、空行 和 响应体 4 个部分组成。图示如下：

http响应状态码

概念：

http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态。

作用：

客户端浏览器根据响应状态码，即可判断出这次 http 请求是成功还是失败了。

常见的响应状态码

状态码	状态码描述	说明
200	OK	请求成功。
201	Created	资源在服务器端已成功创建
304	Not Modified	资源在客户端被缓存，响应体中不包含任何资源内容
400	Bad Request	客户端的请求方式、或请求参数有误导致的请求失败
401	Unauthorized	客户端的用户身份认证未通过，导致的此次请求失败
404	Not Found	客户端请求的资源地址错误，导致服务器无法找到资源
500	Internal Server Error	服务器内部错误，导致的本次请求失败

http 响应状态码 Vs 业务状态码

正确区分响应状态码和业务状态码的不同，是保证使用 Ajax 不迷茫的必要前提。从如下 3 个方面进行区分：
① 所处的位置

• 在状态行中所包含的状态码，叫做“响应状态码”
• 在响应体的数据中所包含的状态码，叫做“业务状态码”
  

② 表示的结果

• 响应状态码只能表示这次请求的成功与否（成功或失败）
• 业务状态码用来表示这次业务处理的成功与否
  

③ 通用

• 响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用
• 业务状态码是后端程序员自定义的，不具有通用性

接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。
同时，每个接口必须有对应的请求方式。例如：

• http://www.liulongbin.top:3009/api/getbooks 获取图书列表的接口(GET 请求)-
• http://www.liulongbin.top:3009/api/addbook 添加图书的接口（POST 请求）

接口测试工具 postman

GET测试

POST测试