异步编程

测试用接口

https://api.uomg.com/
测试工具：postman 或

1.什么是Ajax

Ajax 意思是异步网络请求，区别于传统web开发中采用的同步方式 Ajax 带来的最大影响就是页面可以无刷新的请求数据以往，页面表单提交数据，在用户点击完"submit"按钮后，页面会强制刷新一下，体验十分不友好

1.1 Ajax

Ajax （Asynchronous JavaScript and XML）
- 概念：就是使用浏览器异步对象去请求服务器的一种技术
- 作用：执行异步请求的一种技术，基于 js 和浏览器提供的 api函数

1.2 异步请求

浏览器分 主线程(浏览器) 和 子线程(异步对象)
- 主线程 主要负责和用户交互
- 子线程 可以协助与服务器进行交互

1.3 数据交互格式

双方交互数据，需要定义和遵守相同的一套格式，否则双方都不认识

两种交互格式：
- xml - 可扩展标记语言，说白了就是通过标签来定义数据格式 - [淘汰]
- json - 类似JS对象字面量表示法，使用起来方便 - [主流]

1.4 JSON详解

概念：JSON(JavaScript Object Notation)，JavaScript 对象字面量表示法
作用：在计算机与网络之间存储和传输数据
本质：就是字符串，表示 对象和数组

1.4.1 JSON对象

JS对象：{ key: 'value' , key1 : value...}
JSON字符串结构： '{ "key": value, "key": value, … }'
注意：
- key 必须使用英文双引号包裹
- value 的数据类型可以是数字、字符串、布尔值、null、数组、对象 6种类型
- value 如果是字符串，也必须用 双引号
错误和正确案例对比：

1.4.2 JSON数组

JS数组：["java",123,'abc',{name:'ruikry'},false....]
解构：'["java", "javascript", 30, true … ]'
注意：
- 类型可以是数字、字符串、布尔值、null、数组、对象6种类型
- 如果是字符串，也必须用 双引号

1.4.3 JSON 小结

属性名必须使用双引号包裹
字符串类型的值必须使用双引号包裹
不允许使用单引号表示字符串
不能写注释
最外层必须是对象或数组格式
不能使用 undefined 或函数作为 JSON 的值

1.5 JS和JSON互转

如何将 JSON格式字符串 转成 js对象或数组呢？如何将 JS对象或数组 转成 JSON格式字符串 呢？

JS提供了一个内置工具对象也叫： JSON，它提供了方法来互转数据
- JSON.parse：将 json字符串 转成 对象/数组
- JSON.stringify：将 对象/数组 转成 json字符串

代码

//1.【反序列化】将 json 转成 对象------------------
let jsonStr = '{"a": "Hello", "b": "world"}'
let obj = JSON.parse(jsonStr)
console.log(obj) // 对象 -> { a: 'hello', b: 'world', c: false }

//2.【序列化】将 对象 转成 json------------------
let obj2 = { a: 'hello', b: 'world', c: false }
let str = JSON.stringify(obj2)
console.log(str) // 字符串 -> '{"a":"hello","b":"world","c":false}'
console.log(typeof str) // 'string'

3.原生Ajax

浏览器本身就提供的功能，就是原生！

3.1 XMLHttpRequest

3.1.1 使用四步骤

创建异步对象
设置请求参数
设置回调函数 -> 判断 readyState是否==4，通过 reponseText 获取响应报文体数据
发送请求

// 二、切换图片 =====================================================
// 2.1 获取 图片 标签
let img1 = document.querySelector('#img1')
// 2.2 为 按钮 绑定 点击事件
document.querySelector('#btn2').onclick = function () {
    // https://api.uomg.com/api/rand.avatar?sort=男&format=json
    // a.创建 浏览器提供的 异步对象
    let xhr = new XMLHttpRequest()
    // b.设置 异步对象 的参数:请求方式 和 url
    xhr.open('GET', 'https://api.uomg.com/api/rand.avatar?sort=女&format=json')
    // c.设置 异步对象 的回调函数：告诉 异步对象 获取服务器响应数据后 做什么事情~！
    xhr.onreadystatechange = function () {
        // xhr.readyState 0,1,2,3,4
        // c1.判断 异步对象 的 readystate 状态 是否等于4
        // 因为 ==4的时候，说明 请求已经完成了，异步对象获取了 响应数据
        if (xhr.readyState === 4 && xhr.status === 200) {
            // 转成 js对象
            let data = JSON.parse(xhr.responseText) // {"code":1,"imgurl":"http:\/\/cdn.u2.huluxia.com\/g3\/M01\/32\/CC\/wKgBOVwODyOAKuj_AAC7y9lZ0Vc86.jpeg"}
            // 设置 图片 标签的 src属性
            img1.src = data.imgurl
        }
    }
    // d.发送请求
    xhr.send()
}

3.1.2 readState属性

XMLHttpRequest 对象有一个属性：readState(准备状态)
5个值：表示异步对象的请求状态

3.1.3 status属性

XMLHttpRequest 对象有一个属性：status(响应状态码)
记录服务器响应报文头里的状态码

3.2 fetch

4.http协议和报文

什么是http协议？
- 概念：浏览器和服务器通信时，所使用的内容语法规范！
- 浏览器和服务器必须同时遵守同一版本的http协议，才能确保相互读懂对方的数据！

4.1 报文

什么是报文？
- 概念：浏览器和服务器通信的内容，就是报文
- 分两种：
  - 请求报文：浏览器发给服务器
  - 响应报文：服务器响应浏览器

4.2 报文的结构

分：报文头和报文体
中间通过一个空行来分割！
状态行
- 就是报文的首行(第一行)

4.3 响应状态码

概念：就是响应报文状态行中间的数字
作用：服务器通过状态码告诉浏览器本次请求响应的结果状态
5大类：
- 1xx: 断点续传，eg：100 / 101 / 102....
- 2xx: 带表成功，eg：200/ 201 / 202 ...
- 3xx: 服务器命令，eg：300/ 301 / 302 ...
- 4xx: 请求报文有问题，eg： 400 / 401 / 402 /403 / 404 ....
- 5xx: 服务器有问题，eg：500/ 501 / 502 / 503 .....

4.4 请求方式

概念：
- 浏览器向服务器发送请求报文时，很多需要传递数据参数
- 此时，就需要决定数据参数在报文中的位置和格式
【重要】常见请求方式：
- get ：为了从服务器拿东西，获取文章列表，获取文章详情....
  - delete：为了从服务器删除东西，删除文章，删除商品...
- post：为了将数据传给服务器保存，新增文章，注册用户....
  - put：为了将大数据上传给服务器保存，上传图片，上传文件...
  - patch：为了修改服务器数据，修改文章......
补充：这些请求方式，本质上只有两种，剩下的都是语义化请求方法

4.5 请求方式与数据格式

resful 格式：url动态参数
联想到语义化标签
- 普通标签： div / span
- 语义化标签：header 头部 / footer 尾部 / section 中间 / asider 边上 / ....
  - 这些标签功能和 div是一模一样的，但是一眼就能看出起到什么作用！

5. 传参

传参，是只浏览器向服务器发送请求时，所携带的数据

5.1 get传参

特点：参数放在url中

5.1.1查询参数

定义：将参数放在url?后面，如： http://www.baidu.com/art?id=1&size=20

其中，id=1和 size=20 都是参数

格式：参数＝值 ，多个参数用 & 符号进行分隔

5.1.2 动态参数

定义：将参数放在url中，如：http//www.baidu.com/1/20

5.1.3 url编码

浏览器url中只能包含Ascii码表中的字符(英文和符号)，中文字符需要进行编码才能传递

本质：使用英文字符去表示非英文字符
方法：
- encodeURI() 编码的函数
- decodeURI() 解码的函数

5.2 post传参

特点：数据放在请求报文体中

5.2.1 键值对格式

本质上就是字符串，用 k=v 组合，多个之间用 & 分隔

5.2.2 json格式

本质：就是 json字符串，方便后端接口读取后，转成对象使用！

5.2.3 formData格式

本质：使用分隔符分隔的数据包，每个包中可以存放文字或二进制数据

案例：图书管理

5.axios库

ajax异步请求库：就是别人写好的ajax代码，我们拿来使用！常见：
- jquery.ajax 方法
- **axios (推荐)：**在 vue/react 项目中使用较多

5.1 axios使用

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

官网：https://www.axios-http.cn/
特点：
- 支持浏览器端发送Ajax请求
- 支持服务端 Node.js 发送请求
- 基于Promise语法
- 提供请求和响应拦截器功能
- 自动转换JSON数据

使用步骤：
- 下载 axios.js 代码
- 导入到页面上使用 axios 对象的各种方法
- axios.get 发送 get请求，特点，如果有参数，需要通过 {params:{数据}}
- axios.post 发送post请求，特点，如果与参数，则直接通过 {数据}
- axios 请求成功或失败的回调函数，需要通过 then 或 catch 传入

5.2 请求和响应数据的格式

注意：使用axios 进行 post 传参时，请求报文体数据，默认使用 json格式

5.3 axios配置参数

axios 本质就是一个函数，所以有两种调用方式

// 1.通过 axios.get/ axios.post /axios.put 等... 发送请求----------
axios.get('http://www.liulongbin.top:3006/api/getbooks').then(function (res) {
   console.log(res)
})

// 2.通过 axios 方法 来发送 请求 ----------------------------------
axios({
   method: 'get',
   url: 'http://www.liulongbin.top:3006/api/getbooks'
}).then(function (res) {
   console.log(res)
})

6.Promise

6.1 回调地狱

定义：由很多层回调函数嵌套组成的代码

解决方案：Promise!

6.2 Promise

作用：解决回调地狱语法格式的
语法：

let p1 = new Promise(业务函数)
p1.then(成功回调函数)
p1.catch(失败回调函数)

6.2 执行2个异步任务

6.3 执行多个异步任务

补充

1.所有请求方式

序号	方法	描述
1	GET	请求指定的页面信息，并返回实体主体。
2	HEAD	类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头
3	POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4	PUT	从客户端向服务器传送的数据取代指定的文档的内容。
5	DELETE	请求服务器删除指定的页面。
6	CONNECT	HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7	OPTIONS	允许客户端查看服务器的性能。
8	TRACE	回显服务器收到的请求，主要用于测试或诊断。
9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新。

Files

04.Ajax异步编程.md

Latest commit

History

04.Ajax异步编程.md

File metadata and controls

异步编程

测试用接口

1.什么是Ajax

1.1 Ajax

1.2 异步请求

1.3 数据交互格式

1.4 JSON详解

1.4.1 JSON对象

1.4.2 JSON数组

1.4.3 JSON 小结

1.5 JS和JSON互转

3.原生Ajax

3.1 XMLHttpRequest

3.1.1 使用四步骤

3.1.2 readState属性

3.1.3 status属性

3.2 fetch

4.http协议和报文

4.1 报文

4.2 报文的结构

4.3 响应状态码

4.4 请求方式

4.5 请求方式与数据格式

5. 传参

5.1 get传参

5.1.1查询参数

5.1.2 动态参数

5.1.3 url编码

5.2 post传参

5.2.1 键值对格式

5.2.2 json格式

5.2.3 formData格式

5.axios库

5.1 axios使用

5.2 请求和响应数据的格式

5.3 axios配置参数

6.Promise

6.1 回调地狱

6.2 Promise

6.2 执行2个异步任务

6.3 执行多个异步任务

补充

1.所有请求方式