AJAX基础知识总结

码农学者
3,353 阅读8分钟
XMLHttpRequest
const xhr=new XMLHttpRequest()1.创建对象
xhr.open('请求方法','url地址')2.设置请求方法和URL
xhr.addEventListener('loadend', () => {xhr.response // 结果})3.添加事件监听,xhr.response就是用来结束发送结束返回的结果
xhr.send()4.发请求
查询参数本质就是拼接在URL后面
new URLSearchParams(参数对象).toString()多个参数拼接不方便, 可以借助 URLSearchParams 对象进行转换,可以将对象的参数变成查询参数式字符串返回给新的变量
请求体参数
xhr.setRequestHeader('Content-Type','appliaction/json') 修改请求头数据类型为json类型设置请求头
请求体里面要加的数据写 data 里面 xhr.send（data数据的json字符串格式）设置请求体
promise 的三种状态 状态的转换 ,只能从 pending 变成其他两种 不能从接收变成拒绝,从而知道同时调用两个就会执行最先调用的那一个 状态改变,会调用相关的函数 接收.then 拒绝.catch
创建时候是 待定 pending
调用 resolve 是成功 状态是 fulfilled
调用 reject 是失败 状态 是 rejected
status http状态码 1xx 2xx 3xx 4xx 5xx
new URLSearchParams（）转成每个属性中间为&隔开的转成计算机翻译的UTF-8 数据 toString（）转成字符串
封装_简易axios函数思路
1.创建一个myAxios函数,return一个 new Promise（（resolve,reject）=>{}）unction myAxios(config) {return new Promise((resolve,reject)={})
}
2.进行判断 传入数据中的属性有没有params 如果有就拼接到url上面 用 new URLSearchParams（）.toString（）转换数据 ,然后拼接到URL上
判断有没有method属性 ，没有就默认为get		如果有 params 需要将其转换成查询参数字符串: xxx=xxx&aaa=aaa
const obj = new URLSearchParams(config.params)将参数字符串拼接到 url 后面
config.url += ?${obj.toString()}
3.创建 小黄人 const xhr = new XMLHttpRequest（）
4 .传入方法跟地址 xhr.open（method，url）
5.给xhr添加loadend事件,用resolve和reject接收成功和失败的结果
6.判断有没有data 属性,如果有了就改变请求头跟请求体,如果没有就xhr.send()
7.改变请求头 xhr.setRequestHeader（‘Content-Type’，‘application/json’）
8.改变请求体 把data 写入的数据转换成 json格式放入 xhl.send（JSON.stringify(config.data)）

1.AJAX的介绍和axios使用

AJAX是浏览器与服务器进行数据通信的技术

5.png

axios({
	url:'接口'  //服务器的资源地址
}).then(res=>{
	//获取服务器返回的结果
	console.log(res.data.data)
	//渲染到页面
	document.querySelector('div').innerHTML=res.data.data.map(item=>``).join('')
})

2.认识URL

URL的组成:协议,域名,资源路径

6.png

3.URL查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

语法：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

axios({
    url:'目标资源地址',
    params:{
        参数名:值
    }
})

4.常用请求方法和数据提交

请求方法：对服务器资源，要执行的操作

请求方法操作
GET获取数据
POST数据提交
PUT修改数据(全部)
DELETE删除数据
PATCH修改数据(部分)

5.axios错误处理

语法：在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参

axios({
	//请求选项
    url:'目标地址',
    //POST请求
    method:'post',
    //携带数据给服务器
    data:{
    	username,
    	password
    }
}).then(res=>{
    //处理数据
}).catch(error=>{
    //处理错误
})

6.HTTP协议_请求报文

HTTP 协议：规定了浏览器发送及服务器返回内容的格式

请求报文：浏览器按照 HTTP 协议要求的格式，发送给服务器的内容

请求报文的组成部分有:

  • 请求行：请求方法，URL，协议
  • 请求头：以键值对的格式携带的附加信息，比如：Content-Type
  • 空行：分隔请求头，空行之后的是发送给服务器的资源
  • 请求体：发送的资源

4.png

9.png

7.HTTP协议_响应报文

响应报文：服务器按照 HTTP 协议要求的格式，返回给浏览器的内容

  • 响应行（状态行）：协议、HTTP 响应状态码、状态信息
  • 响应头：以键值对的格式携带的附加信息，比如：Content-Type
  • 空行：分隔响应头，空行之后的是服务器返回的资源
  • 响应体：返回的资源

8.png

HTTP响应状态码:用来表明请求是否成功

状态码说明
1xx信息
2xx成功
3xx重定向消息
4xx客户端错误
5xx服务端错误

=>常见状态码

  • 200 (成功)：服务器已成功处理请求。一般这表示服务器正常处理了请求，并且正常返回了相应的页面

  • 400 (错误请求)：表示客户端请求的语法错误，服务器无法理解,前端参数的问题,参数传递错误

  • 401 (未经授权，需要身份验证)：token=>没有权限,token过期

  • 403（禁止）：服务器理解请求客户端的请求，拒绝请求

  • 404 (未找到)：服务器无法根据客户端请求找到资源

  • 405（方法禁用）：禁用请求中指定的方法

  • 500（服务器内部错误）：服务器遇到一个未预料到的状况，导致无法完成对请求的处理

  • 502（错误网关）：服务器作为网关或者代理，从上游服务器收到无效响应

  • 503（服务不可用）：服务器目前无法使用。例如：超载、停机维护…

  • 504（网关超时）：服务器作为网关或代理，但未及时收到上游服务器的响应

8.form-serialize插件

作用:快速收集表单元素的值

用法:

  • 传入表单 DOM 元素

  • 传入配置项

hash: 收集参数的格式, true 表示转成对象(较常用), false 表示转成查询参数字符串 (查询字符串)

empty: 是否收集空值, true 表示收集为空字符串(较常用), false 表示不收集, 属性都没有

const form = document.querySelector('.example-form')
const data = serialize(form, { hash: true, empty: true })

9.图片上传案例

目标:图片上传,显示到网页上

步骤:

① 获取图片文件

②使用 FormData 携带图片文件

③提交到服务器，获取图片url网址使用

<input type="file" class="upload">
<img >
<script>
    // 给文件选择框绑定 change 事件
    document.querySelector('.upload').addEventListener('change', e => {
      // 1. 获取图片文件
      // console.log(e.target.files[0])
      // 2. 使用 FormData 携带图片文件
      const data = new FormData()
      // 往 FormData 中添加参数
      // 参数1: 提交给服务器用的参数名
      // 参数2: 提交给服务器的值
      data.append('img', e.target.files[0])
      // 3. 提交到服务器，获取图片url网址使用
      axios({
        url: '接口地址',
        method: 'post',
        data
      }).then(res => {
        // console.log(res.data.data.url)
        document.querySelector('img').src = res.data.data.url
      })
    })
  </script>

10.同步代码和异步代码

同步代码=>逐步执行代码,原地等待结果,才执行下一步

异步代码=>不阻塞代码运行,对其他事件做出反应而不必等待任务完成

11.回调函数地域

在回调函数一直向下嵌套回调函数,形成回调函数地域

问题: ①可读性差 ②异常捕获困难 ③耦合性严重

12.宏任务和微任务

=>宏任务:在浏览器的环境执行的异步代码

举例: ①setInterval和setTimeout ②在js脚本执行事件 ③AJAX请求完成事件 ④用户交互事件

=>微任务: 在js引擎环境执行的异步代码

举例: Promise对象.then()

13.Promise

作用:

解决回调地域

封装异步任务的API,可以返回异步任务的结果

=>then返回的是resolve(成功)的结果,catch返回的是reject(失败)的结果

语法:

new Promise((resolve, reject) =>{
  // 该函数会立即执行, 可以在这里做一些异步任务
  setTimeout(() => {
    // 成功就调用 resolve()
    // 失败就调用 reject()
  }, 1000)
}).then(res => {
  // res 就是成功的结果
}).catch(e => {
  // e 就是失败的结果
})

状态:

  • pending 待定 初始状态

  • fulfilled 已兑现 当resolve执行后的状态

  • rejected 已拒绝 当reject执行后的状态

注意:状态一旦改变不可再次修改,不可逆

案例_使用Promise+XHR_获取省份列表

1.png

14.Promise.all静态方法

概念 :

同时执行多个异步任务,合并多个Promise对象,等待所有同时成功完成(或某一个失败),做后续逻辑

axios的返回结果就是promise

用法:

const p=Promise.all([Promise对象,Promise对象,Promise对象,...])
p.then(result=>{
//result结果
}).catch(error=>{
//第一个失败的Promise对象,抛出的异常
})

相关案例: 业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并

2.png

15.事件循环

由于JavaScript是单线程的,意味着程序执行是逐步,会优先执行同步任务,只要碰到耗时操作,都将其作为

异步任务,异步任务会丢给宿主环境(比如浏览器)执行,不会阻塞线程,执行完后会放在任务队列中等待调用

栈全部执行完后再循环拿出执行。

异步任务分为宏任务和微任务,再执行微任务(promise的.then是微任务),最后执行宏任务。

Android开发使用的是java语言,而java是多线程的,多线程对UI开发是毁灭性打击的。

15.png

16.asnyc和await的使用

解决回调函数地狱问题

注意点:两者必须一起使用,获取Promise对象成功状态的结果值

await下面的代码会被阻塞

用法:

asnyc function render(){
	//res是访问服务器后返回的结果
	const res=await axios({
	url:'网址',	
	method:'请求方法',
	params:{参数}
	})
//得到res后可以渲染页面
console.log(res)
}
render()

相关代码:

3.png

5.png

avatar
文章
阅读
粉丝