关于程序员:AJAX-学习笔记Day3

写在后面

本文为黑马程序员 AJAX 教程的学习笔记。本着本人学习、分享别人的态度，分享学习笔记，心愿能对大家有所帮忙。举荐先按程序浏览往期内容：\
1. AJAX 学习笔记（Day1）

::: block-1

目录

• 3 AJAX 原理

  • 3.1 XMLHttpRequest
  • 3.2 Promise
  • 3.3 封装简易版 axios
  • 3.4 案例 – 天气预报
    :::

3 AJAX 原理

3.1 XMLHttpRequest

P33：https://www.bilibili.com/video/BV1MN411y7pw?p=33

什么是 XMLHttpRequest：

关系：axios 外部采纳 XMLHttpRequest 与服务器交互

应用 XMLHttpRequest 步骤：

1. 创立 XMLHttpRequest 对象
2. 配置申请办法和申请 url 地址
3. 监听 loadend 事件，接管响应后果
4. 发动申请

XMLHttpRequest – 查问参数

P34：https://www.bilibili.com/video/BV1MN411y7pw?p=34

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

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

案例：应用 XHR 携带查问参数，展现某个省上司的城市列表

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname= 辽宁省')
xhr.addEventListener('loadend', () => {console.log(xhr.response)
  const data = JSON.parse(xhr.response)
  console.log(data)
  document.querySelector('.city-p').innerHTML = data.list.join('<br>')
})
xhr.send()

案例：地区查问

P35：https://www.bilibili.com/video/BV1MN411y7pw?p=35

XMLHttpRequest – 数据提交

P36：https://www.bilibili.com/video/BV1MN411y7pw?p=36

步骤和语法：

1. 没有 axios 了，咱们须要本人设置申请头 Content-Type：application/json，来通知服务器端，咱们发过来的内容类型是 JSON 字符串，让他转成对应数据结构取值应用
2. 没有 axios 了，咱们前端要传递的申请体数据，也没人帮我把 JS 对象转成 JSON 字符串了，须要咱们本人转换
3. 原生 XHR 须要在 send 办法调用时，传入申请体携带

const xhr = new XMLHttpRequest()
xhr.open('申请办法', '申请 url 网址')
xhr.addEventListener('loadend', () => {console.log(xhr.response)
})

// 1. 通知服务器，我传递的内容类型，是 JSON 字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 2. 筹备数据并转成 JSON 字符串
const user = {username: 'itheima007', password: '7654321'}
const userStr = JSON.stringify(user)
// 3. 发送申请体数据
xhr.send(userStr)

3.2 Promise

P37：https://www.bilibili.com/video/BV1MN411y7pw?p=37

什么是 Promise？

Promise 对象用于示意一个异步操作的最终实现（或失败）及其构造值

Promise 的益处？

• 逻辑更清晰（胜利或失败会关联后续的处理函数）
• 理解 axios 函数外部运作的机制
• 能解决回调函数天堂问题

语法：

// 1. 创立 Promise 对象
const p = new Promise((resolve, reject) => {
 // 2. 执行异步工作 - 并传递后果
 // 胜利调用: resolve(值) 触发 then() 执行
 // 失败调用: reject(值) 触发 catch() 执行})
// 3. 接管后果
p.then(result => {// 胜利}).catch(error => {// 失败})

Promise – 三种状态

P38：https://www.bilibili.com/video/BV1MN411y7pw?p=38

一个 Promise 对象，必然处于以下几种状态之一:

1. 待定（pending）：初始状态，既没有被兑现，也没有被回绝
2. 已兑现（fulfilled）：操作胜利实现
3. 已回绝（rejected）：操作失败

留神：Promise 对象一旦被 兑现 / 回绝 就是 已敲定 了，状态无奈再被扭转

案例：应用 Promise + XHR 获取省份列表

P39：https://www.bilibili.com/video/BV1MN411y7pw?p=39

3.3 封装简易版 axios

封装_繁难 axios_获取省份列表

P40：https://www.bilibili.com/video/BV1MN411y7pw?p=40

需要：基于 Promise + XHR 封装 myAxios 函数，获取省份列表展现

/**
 * 指标：封装_繁难 axios 函数_获取省份列表
 *  1. 定义 myAxios 函数，接管配置对象，返回 Promise 对象
 *  2. 发动 XHR 申请，默认申请办法为 GET
 *  3. 调用胜利 / 失败的处理程序
 *  4. 应用 myAxios 函数，获取省份列表展现
*/
// 1. 定义 myAxios 函数，接管配置对象，返回 Promise 对象
function myAxios(config) {return new Promise((resolve, reject) => {
    // 2. 发动 XHR 申请，默认申请办法为 GET
    const xhr = new XMLHttpRequest()
    xhr.open(config.method || 'GET', config.url)
    xhr.addEventListener('loadend', () => {
      // 3. 调用胜利 / 失败的处理程序
      if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))
      } else {reject(new Error(xhr.response))
      }
    })
    xhr.send()})
}

// 4. 应用 myAxios 函数，获取省份列表展现
myAxios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)
  document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {console.log(error)
  document.querySelector('.my-p').innerHTML = error.message
})

封装_繁难 axios_获取地区列表

P41：https://www.bilibili.com/video/BV1MN411y7pw?p=41

需要：批改 myAxios 函数反对传递 查问参数，获取 ” 辽宁省 ”，” 大连市 ” 对应地区列表展现

function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()
    // 1. 判断有 params 选项，携带查问参数
    if (config.params) {
      // 2. 应用 URLSearchParams 转换，并携带到 url 上
      const paramsObj = new URLSearchParams(config.params)
      const queryString = paramsObj.toString()
      // 把查问参数字符串，拼接在 url？前面
      config.url += `?${queryString}`
    }

    xhr.open(config.method || 'GET', config.url)
    xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))
      } else {reject(new Error(xhr.response))
      }
    })
    xhr.send()})
}

// 3. 应用 myAxios 函数，获取地区列表
myAxios({
  url: 'http://hmajax.itheima.net/api/area',
  params: {
    pname: '辽宁省',
    cname: '大连市'
  }
}).then(result => {console.log(result)
  document.querySelector('.my-p').innerHTML = result.list.join('<br>')
})

封装_繁难 axios_注册用户

P42：https://www.bilibili.com/video/BV1MN411y7pw?p=42

需要：批改 myAxios 函数反对传递 申请体 数据，实现注册用户性能

function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()

    if (config.params) {const paramsObj = new URLSearchParams(config.params)
      const queryString = paramsObj.toString()
      config.url += `?${queryString}`
    }
    xhr.open(config.method || 'GET', config.url)

    xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))
      } else {reject(new Error(xhr.response))
      }
    })
    // 1. 判断有 data 选项，携带申请体
    if (config.data) {
      // 2. 转换数据类型，在 send 中发送
      const jsonStr = JSON.stringify(config.data)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(jsonStr)
    } else {
      // 如果没有申请体数据，失常的发动申请
      xhr.send()}
  })
}

document.querySelector('.reg-btn').addEventListener('click', () => {
  // 3. 应用 myAxios 函数，实现注册用户
  myAxios({
    url: 'http://hmajax.itheima.net/api/register',
    method: 'POST',
    data: {
      username: 'itheima999',
      password: '666666'
    }
  }).then(result => {console.log(result)
  }).catch(error => {console.dir(error)
  })
})

3.4 案例 – 天气预报

P43：https://www.bilibili.com/video/BV1MN411y7pw?p=43

P44：https://www.bilibili.com/video/BV1MN411y7pw?p=44

P45：https://www.bilibili.com/video/BV1MN411y7pw?p=45

P46：https://www.bilibili.com/video/BV1MN411y7pw?p=46

<center>完结 </center>

本文由 mdnice 多平台公布