从零开始的web前端学习-AJAX

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

<script src="https://cdn.jsdelivr.net/npm/axios@1.8.3/dist/axios.min.js"></script>

<script>
  axios({
    url: '目标资源地址'
  }).then(result => {
    操作
  })
</script>

1统一资源定位符URL
2请求方法
3POST方法（数据上传）
4错误处理
5HTTP协议
6接口
7from-serialize库
8bootstrap库
9post方法（图片上传）
10XMLHttpRequest对象
11Promise对象
12同步及异步代码
13回调函数地狱
14宏任务与微任务

1统一资源定位符URL

概念：URL 是因特网上标准资源的地址，用于访问网络上的资源

组成：

协议（规定浏览器和服务器间传输数据的格式）
域名（标记服务器在互联网中的方位）
资源路径（标记资源在服务器下的具体位置）

查询参数：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据
协议://域名//资源路径?参数名1=值1&参数名2=值2...（格式）

端口号：标记服务器中不同功能的服务程序，是 0~65535 之间的任意整数，HTTP 协议默认端口号为 80，注意 0-1023 和一些特定端口号已被占用
协议://域名:端口号//资源路径?查询参数

<script>
  axios({
    url: '目标资源地址',
    params: {
      参数名1: 值1,
      参数名2: 值2
    }
  }).then(result => {
    操作
  })
</script>

2请求方法

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

<script>
  axios({
    url: '目标资源地址',
    method: '请求方法', // 默认 get 方法，可省略 method
  }).then(result => {
    操作
  })
</script>

3POST方法（数据上传）

<script>
  axios({
    url: '目标资源地址',
    method: 'post',
    data: { // 提交的数据
      username: '000000',
      password: '123456'
    }
  }).then(result => {
    操作
  })
</script>

4错误处理

<script>
  axios({
    url: '目标资源地址'
  }).then(result => {
    操作
  }).catch(error => {
    处理
  })
</script>

5HTTP协议

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

组成：

请求行：请求方法、URL、协议
请求头：以键值对的格式携带的附加信息
空行：分割请求头，空行之后是发送至服务器的资源
请求体：发送的资源

响应报文：服务器按照 HTTP 协议规定格式，返回至浏览器的内容

组成：

响应行（状态行）：协议、HTTP 响应状态码、状态信息
响应头：以键值对的格式携带的附加信息
空行：分割响应头头，空行之后是发送至浏览器的资源
响应体：返回的资源

HTTP 响应状态码

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

6接口

接口：使用 AJAX 和服务器通讯时，使用的 URL、请求方法以及参数

接口文档：由后端提供的描述接口的文章

7from-serialize库

from-serialize 库能够帮助快速收集表单元素的值

<script src="https://cdn.jsdelivr.net/npm/form-serialize-js@0.1.0/build/cjs/src/index.min.js"></script>

<script>
  const form = document.querySelector('.example-form')
  const data = serialize(form, {hash: true, empty: true}) // {} 中代表参数配置
</sctipt>

参数配置	作用	说明
hash	是否获取数据结构	true 获取对象，false 获取查询参数
empty	是否获取空值	false 空值字段不获取

8bootstrap库

bootstrap 库属于弹框库

<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

注意：单纯对弹框进行操作利用 CSS，需要对弹框进行额外的逻辑操作利用 JavaScript

9post方法（图片上传）

<input type="file" class="upload"> <!-- 文件选择元素 -->
<img src="" alt="" class="myPng">

<script>
  document.querySelector('.upload').addEventListener('change', e = > {
    let f = e.target.files[0] // 获取文件
    
    const fd = new FormData()
    fd.append('png', f) // 保存文件

    axios({
      url: '目标资源地址',
      method: 'post',
      data: fd
    }).then(result => {
      pngUrl = result.data.data.url
      document.querySelector('myPng').src = pngUrl
    })
})
</style>

10XMLHttpRequest对象

基本使用

axios 内部采用 XMLHttpRequest 对象与服务器进行交互

const xhr = new XMLHttpRequest() // 创建对象
xhr.open('请求方法', '请求URL地址') // 对象配置
xhr.addEventListener('loadend', () => {
  console.log('xhr.response') // 打印响应结果
  其他操作
})
xhr.send() // 发送请求

查询参数

const xhr = new XMLHttpRequest()
xhr.open('get', '请求URL地址?参数1=值1&参数2=值2') // 添加查询参数
xhr.addEventListener('loadend', () => {
  console.log(xhr.response)
  const data = JSON.parse(xhr.response) // xhr.response 为 JSON 对象
  document.querySelector('.cityP').innerHTML = data.list.join('<br>') // 数组拼接字符串
})
xhr.send()

数据提交

const xhr = new XMLHttpRequest()
xhr.open('post', '请求URL地址')
xhr.addEventListener('loadend', () => {
  console.log('xhr.response')
})

xhr.setRequestHeader('Content-Type', 'application/json') // 请求头设置
const user = { // 请求体设置
  username: '000000',
  password: '123456'
}
const userData = JSON.stringify(user)

xhr.send(userData)

11Promise对象

Promise 对象用于表示一个异步操作的结果值，可用于管理异步任务

const p = new Promise((resolve, reject) => {
  setTimeout(() => { // setTimeout 属于异步任务
    if (true) {
      resolve('成功')
    } else {
      reject(new Error('失败'))
    }
  }, 2000)
})

p.then(result => { // 成功结果
  console.log(result)
}).catch(error => { // 失败结果
  console.log(error)
})

三种状态

待定状态（pending）：初始状态
已兑现（fulfilled）：表示操作成功完成
已拒绝（rejected）：表示操作失败

注意：Promise 对象一旦被兑现或拒绝，状态就无法再被改变

链式调用：依靠 then 方法返回生成新的 Promise 对象，串联下一任务，解决回调函数地狱

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('北京市')
  }, 2000)
})

const p2 = p1.then(result => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(result + '北京')
    }, 2000)
  })
})

p2.then(result => {
  console.log('p2' + result)
})

Promise.all 静态方法：合并多个 Promise 对象，等待所有同时完成或某一个失败，执行后续逻辑

const p = Promise.all([p1, p2, p3, ...]) // 合并 Promise 对象
p.then(result => { // 全部成功完成
  ...
}).catch(error => { // 某一完成失败
  ...
})

12同步及异步代码

同步代码：逐行执行，在上一行完成后才会执行下一行
异步代码：在执行一个可能长期运行的任务的同时继续对其他事件作出反应而不必等待任务完成，任务完成后显示结果（setTimeout、setInterval、DOM 事件、AJAX）

13回调函数地狱

回调函数嵌套即回调函数调用，代码可读性差、异常无法捕获、耦合性严重

链式调用解决回调函数地狱

let pname = ''
axios({url: '目标资源地址'}).then(result => {
  pname = result.data.list[0]
  document.querySelector('.province').innerHTML = pname
  return axios({url: '目标资源地址', params: {pname}})
}).then(result => {
  const cname = result.data.list[0]
  document.querySelector('.city').innerHTML = cname
  return axios({url: '目标资源地址', params: {pname, cname}})
}).then(result => {
  const aname = result.data.list[0]
  document.querySelector('.area').innerHTML = aname
})

async 和 await 关键字解决回调函数地狱
async 和 await 关键字可以简化基于 Promise 的异步代码，无需刻意链式调用

async function getData () {
  try { // 异常捕获
    const pObj = await = axios({url: '目标资源地址'})
    const pname = pObj.data.list[0]
    const cObj = await = axios({url: '目标资源地址', params: {pname}})
    const cname = cObj.data.list[0]
    const aObj = await = axios({url: '目标资源地址', params: {pname, cname}})
    const aname = aObj.data.list[0]

    document.querySelector('.province').innerHTML = pname
    document.querySelector('.city').innerHTML = cname
    document.querySelector('.area').innerHTML = aname
  } catch (error) {
    console.dir(error.response.message)
  }
}

14宏任务与微任务

事件循环中消息队列分为两部分：宏任务队列、微任务队列，优先调度微任务队列，微任务队列为空时，调度宏任务队列

宏任务：由浏览器环境执行的异步代码（JavaScript 脚本执行事件、setTimeout、setInterval、AJAX 请求完成事件、用户交互事件）
微任务：由 JavaScript 引擎环境执行的异步代码（Promise 对象的 then 方法）

posted @ 2025-03-14 21:27 /O_o\ 阅读(35) 评论(0) 收藏举报

刷新页面返回顶部

kidss