• AJAX 入门 day3

    目录

    1.XMLHttpRequest

    1.1 XMLHttpRequest认识

    1.2 用ajax发送请求

    1.3 案例

    1.4 XMLHttpRequest - 查询参数

    1.5 XMLHttpRequest - 数据提交

    2.Promise

    2.1 Promise认识

    2.2 Promise - 三种状态

    2.3 案例

    3.封装简易版 axios

    3.1 封装_简易axios_获取省份列表

    3.2 封装_简易axios_获取地区列表

    3.3 封装_简易axios_注册用户

    4.案例 - 天气预报

    4.1 天气预报 - 获取并渲染城市天气

    4.2 天气预报 - 搜索城市列表

    4.2 天气预报 - 展示城市天气

    学习之前先了解一下ajax和axios之间的区别

    • Ajax：是一种允许网页在后台与服务器进行数据交换的技术，而不需要重新加载整个页面。它不是一种特定的库或框架，而是一种实现异步数据传输的通用方法。Ajax通常使用 XMLHttpRequest 对象来发起 HTTP 请求。

    • Axios：是一个基于 promise 的 HTTP 客户端，它适用于浏览器和 node.js。它提供了更加简洁的 API，以方便发送 HTTP 请求。Axios 的底层实现仍然依赖于 XMLHttpRequest（在浏览器中）或 node.js 的原生 HTTP 模块，但它抽象了它们的复杂性，使得发送请求更加容易。

    在现代前端开发中，Axios 被广泛推荐用来发起 HTTP 请求，因为它简单易用，并且容易集成到常见的进程式任务中，如 React、Vue 或 Angular 应用。

    1.XMLHttpRequest

    1.1 XMLHttpRequest认识

    XMLHttpRequest 是一种在网页上执行异步请求的 API，它允许你在不重新加载整个页面的情况下与服务器交换数据。它广泛用于实现 AJAX（Asynchronous JavaScript and XML）功能，从而使网页能够动态更新内容

    关系：axios 内部采用 XMLHttpRequest 与服务器交互

    1.2 用ajax发送请求

    步骤：
    • 1. 创建 XMLHttpRequest 对象
    • 2. 配置请求方法和请求 url 地址
    • 3. 监听 loadend 事件，接收响应结果
    • 4. 发起请求

    1.3 案例

    需求：获取并展示所有省份名字
    效果图：

    代码：

    1. <body>
    2.   <p>p>
    3.   <script>
    4.     /**
    5.      * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
    6.     */
    7.     const p = document.querySelector('p')
    8.     /*     步骤：
    9.           1. 创建 XMLHttpRequest 对象
    10.           2. 配置请求方法和请求 url 地址
    11.           3. 监听 loadend 事件，接收响应结果
    12.           4. 发起请求 */
    13.     const xml = new XMLHttpRequest()
    14.     xml.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
    15.     xml.addEventListener('loadend', function () {
    16.       // {"message":"获取城市成功","list":["沈阳市","大连市"]}
    17.       console.log(xml.response)
    18.       // 将json字符串转换为对象
    19.       const data = JSON.parse(xml.response)
    20.       console.log(data.list.join('
      '      ))
    21.       p.innerHTML = data.list.join('
      '      )
    22.     })
    23.     xml.send()
    24.  
    25.  
    26.   script>
    27. body>

    1.4 XMLHttpRequest - 查询参数

    定义：浏览器提供给服务器的 额外信息 ，让服务器返回浏览器想要的数据
    语法：http://xxxx.com/xxx/xxx ? 参数名1=值1 & 参数名2=值2
    查询字符串直接写在opne方法的URL后面

    1.5 XMLHttpRequest - 数据提交

    需求：通过 XHR 提交用户名和密码，完成注册功能
    核心：
    • 请求头设置 Content-Type：application/json
    • 请求体携带 JSON 字符串

    代码：

    1. <body>
    2.   <button class="reg-btn">注册用户button>
    3.   <script>
    4.     /**
    5.      * 目标：使用xhr进行数据提交-完成注册功能
    6.     */
    7.  
    8.     /**
    9.      * 需求：通过 XHR 提交用户名和密码，完成注册功能
    10.         核心：
    11.         请求头设置 Content-Type：application/json
    12.         请求体携带 JSON 字符串
    13.      */
    14.     document.querySelector('.reg-btn').addEventListener('click', () => {
    15.  
    16.       const xml = new XMLHttpRequest()
    17.       xml.open('POST', 'http://hmajax.itheima.net/api/register')
    18.       xml.addEventListener('loadend', function () {
    19.         console.log(xml.response)
    20.  
    21.       })
    22.  
    23.       // 让浏览器知道，传递的数据是json字符串
    24.       xml.setRequestHeader('Content-Type', 'application/json')
    25.       const obj = {
    26.         username: 'linhanxin',
    27.         password: '1234567'
    28.       }
    29.       // 转为JSON字符串
    30.       const data = JSON.stringify(obj)
    31.  
    32.       // 发送请求体的数据
    33.       xml.send(data)
    34.     })
    35.  
    36.   script>
    37. body>

    2.Promise

    2.1 Promise认识

    promise对象用于表示一个异步操作的最终完成（或失败）及其结果值的对象。

    好处：
    • 1. 逻辑更清晰
    • 2. 了解 axios 函数内部运作机制，以及简化 ajax的开发
    • 3. 能解决回调函数地狱问题

    当你使用 axios 发起 HTTP 请求时，它会返回一个 Promise 对象，这个 Promise 对象会在请求完成时解决（resolve）或拒绝（reject）。

    语法：

    2.2 Promise - 三种状态

    作用：了解Promise对象如何 关联 的 处理函数 ，以及代码执行顺序
    概念：一个Promise对象，必然处于以下几种状态之一
    • ✓ 待定（pending） ：初始状态，既没有被兑现，也没有被拒绝
    • ✓ 已兑现（fulfilled） ：意味着，操作成功完成
    • ✓ 已拒绝（rejected） ：意味着，操作失败

    注意：Promise对象一旦被 兑现/拒绝 就是 已敲定 了，状态无法再被改变

    2.3 案例

    使用Promise + XHR 获取省份列表
    需求：使用 Promise 管理 XHR 获取省份列表，并展示到页面上
    步骤：
    • 1. 创建 Promise 对象
    • 2. 执行 XHR 异步代码，获取省份列表
    • 3. 关联成功或失败函数，做后续处理

    效果图：

    代码： 
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>案例_使用Promise+XHR_获取省份列表title>
    9. head>
    10.  
    11. <body>
    12.   <p class="my-p">p>
    13.   <script>
    14.     /**
    15.      * 目标：使用Promise管理XHR请求省份列表
    16.      *  1. 创建Promise对象
    17.      *  2. 执行XHR异步代码，获取省份列表
    18.      *  3. 关联成功或失败函数，做后续处理
    19.     */
    20.     const p = document.querySelector('.my-p')
    21.     const promise = new Promise((resolve, reject) => {
    22.       const xml = new XMLHttpRequest()
    23.       xml.open('GET', 'http://hmajax.itheima.net/api/province')
    24.       xml.addEventListener('loadend', function () {
    25.         if (xml.status >= 200 && xml.status < 300) {
    26.           // xml如何响应响应成功或者失败?
    27.           // 2xx开头的响应状态码都是代表成功
    28.           // console.log(xml.status)
    29.           // console.log(xml.response)
    30.           resolve(JSON.parse(xml.response))
    31.         } else {
    32.           reject(new Error(xml.response))
    33.           // console.log(xml)
    34.         }
    35.       })
    36.       xml.send()
    37.     })
    38.  
    39.     promise.then(result => {
    40.       console.log(result.list)
    41.       p.innerHTML = result.list.join('
      '      )
    42.     })
    43.  
    44.     promise.catch(error => {
    45.       //   Error: 
      404 Not Found
    46.       // at XMLHttpRequest. (index.html:32:18)
    47.       // 可以看出直接打印error错误信息不详细
    48.       // console.log(error) 
    49.  
    50.       // 显示详细的错误信息,会返回一个对象，里面有message属性
    51.       console.dir(error)
    52.       p.innerHTML = error.message
    53.     })
    54.   script>
    55. body>
    56.  
    57. html>

    3.封装简易版 axios

    3.1 封装_简易axios_获取省份列表

    需求：基于 Promise + XHR 封装 myAxios 函数，获取省份列表展示
    步骤：
    • 1. 定义 myAxios 函数，接收配置对象，返回 Promise 对象
    • 2. 发起 XHR 请求，默认请求方法为 GET
    • 3. 调用成功/失败的处理程序
    • 4. 使用 myAxios 函数，获取省份列表展示

    代码：

    2.   <p>p>
    3.   <script>
    4.     /**
    5.      * 目标：封装_简易axios函数_获取省份列表
    6.      *  1. 定义myAxios函数，接收配置对象，返回Promise对象
    7.      *  2. 发起XHR请求，默认请求方法为GET
    8.      *  3. 调用成功/失败的处理程序
    9.      *  4. 使用myAxios函数，获取省份列表展示
    10.     */
    11.     const p = document.querySelector('p')
    12.  
    13.     function myAxios(config) {
    14.       // 返回一个promise对象
    15.       return new Promise((resolve, reject) => {
    16.         const xhr = new XMLHttpRequest()
    17.         // 如果config.method没有值，就默认GET
    18.         xhr.open(config.method || 'GET', config.url)
    19.         xhr.addEventListener('loadend', function () {
    20.           // console.log(xhr.response)
    21.           // 处理成功或者失败的处理程序
    22.           if (xhr.status >= 200 && xhr.status < 300) {
    23.             resolve(JSON.parse(xhr.response))
    24.           } else {
    25.             reject(new Error(xhr.response))
    26.           }
    27.         })
    28.         xhr.send()
    29.       })
    30.     }
    31.  
    32.     myAxios({
    33.       url: 'http://hmajax.itheima.net/api/province'
    34.       // method: 'GET'
    35.     }).then(result => {
    36.       console.log(result.list)
    37.       p.innerHTML = result.list.join('
      '      )
    38.     }).catch(error => {
    39.       console.log(error)
    40.       p.innerHTML = error.message
    41.     })
    42.   script>
    43. body>

    3.2 封装_简易axios_获取地区列表

    需求：修改 myAxios 函数支持 传递 查询参数 ，获取"辽宁省"，"大连市"对应 地区列表 展示
    步骤：
    • 1. myAxios 函数调用后，判断 params 选项
    • 2. 基于 URLSearchParams 转换查询参数字符串
    • 3. 使用自己封装的 myAxios 函数展示地区列表

    代码：

    2.   <p class="my-p">p>
    3.   <script>
    4.     /**
    5.      * 目标：封装_简易axios函数_获取地区列表
    6.      *  1. 判断有params选项，携带查询参数
    7.      *  2. 使用URLSearchParams转换，并携带到url上
    8.      *  3. 使用myAxios函数，获取地区列表
    9.     */
    10.     function myAxios(config) {
    11.       return new Promise((resolve, reject) => {
    12.         const xhr = new XMLHttpRequest()
    13.         if (config.params) {
    14.           // 使用URLSearchParams转换，并携带到url上
    15.           const paramsObj = new URLSearchParams(config.params)
    16.           const queryString = paramsObj.toString()
    17.           // pname=%E8%BE%BD%E5%AE%81%E7%9C%81&cname=%E5%A4%A7%E8%BF%9E%E5%B8%82
    18.           // console.log(queryString)
    19.           // 拼接查询字符串
    20.           config.url += '?' + queryString
    21.         }
    22.  
    23.         xhr.open(config.method || 'GET', config.url)
    24.         xhr.addEventListener('loadend', () => {
    25.           if (xhr.status >= 200 && xhr.status < 300) {
    26.             resolve(JSON.parse(xhr.response))
    27.           } else {
    28.             reject(new Error(xhr.response))
    29.           }
    30.         })
    31.         xhr.send()
    32.       })
    33.     }
    34.  
    35.     myAxios({
    36.       url: 'http://hmajax.itheima.net/api/area',
    37.       params: {
    38.         pname: '辽宁省',
    39.         cname: '大连市'
    40.       }
    41.     }).then(result => {
    42.       console.log(result)
    43.       document.querySelector('.my-p').innerHTML = result.list.join('
      '      )
    44.     })
    45.  
    46.   script>
    47. body>

    3.3 封装_简易axios_注册用户

    需求：修改 myAxios 函数支持 传递 请求体 数据 ，完成注册用户功能
    步骤：
    • 1. myAxios 函数调用后，判断 data 选项
    • 2. 转换数据类型，在 send 方法中发送
    • 3. 使用自己封装的 myAxios 函数完成注册用户功能

    代码：

    2.   <button class="reg-btn">注册用户button>
    3.   <script>
    4.     /**
    5.      * 目标：封装_简易axios函数_注册用户
    6.      *  1. 判断有data选项，携带请求体
    7.      *  2. 转换数据类型，在send中发送
    8.      *  3. 使用myAxios函数，完成注册用户
    9.     */
    10.     function myAxios(config) {
    11.       return new Promise((resolve, reject) => {
    12.         const xhr = new XMLHttpRequest()
    13.         // 判断是否有参数
    14.         if (config.params) {
    15.           const paramsObj = new URLSearchParams(config.params)
    16.           const queryString = paramsObj.toString()
    17.           config.url += `?${queryString}`
    18.         }
    19.         xhr.open(config.method || 'GET', config.url)
    20.  
    21.         xhr.addEventListener('loadend', () => {
    22.           if (xhr.status >= 200 && xhr.status < 300) {
    23.             resolve(JSON.parse(xhr.response))
    24.           } else {
    25.             reject(new Error(xhr.response))
    26.           }
    27.         })
    28.  
    29.         // 判断是否有数据提交信息
    30.         if (config.data) {
    31.           // 告诉浏览器,传输的数据是JSON字符串
    32.           xhr.setRequestHeader('Content-Type', 'application/json')
    33.           // 处理数据提交
    34.           const data = JSON.stringify(config.data)
    35.           xhr.send(data)
    36.         } else {
    37.           xhr.send()
    38.         }
    39.  
    40.       })
    41.     }
    42.  
    43.     const btn = document.querySelector('.reg-btn')
    44.     btn.addEventListener('click', function () {
    45.       myAxios({
    46.         url: 'http://hmajax.itheima.net/api/register',
    47.         method: 'POST',
    48.         data: {
    49.           username: 'linhanxin1111',
    50.           password: '1234567'
    51.         }
    52.       }).then(result => {
    53.         console.log(result)
    54.  
    55.       })
    56.     })
    57.  
    58.   script>

    3.4 简单封装完整版 axios

    代码：

    1. function myAxios(config) {
    2.   return new Promise((resolve, reject) => {
    3.     const xhr = new XMLHttpRequest()
    4.     if (config.params) {
    5.       const paramsObj = new URLSearchParams(config.params)
    6.       const queryString = paramsObj.toString()
    7.       config.url += `?${queryString}`
    8.     }
    9.     xhr.open(config.method || 'GET', config.url)
    10.     xhr.addEventListener('loadend', () => {
    11.       if (xhr.status >= 200 && xhr.status < 300) {
    12.         resolve(JSON.parse(xhr.response))
    13.       } else {
    14.         reject(new Error(xhr.response))
    15.       }
    16.     })
    17.     if (config.data) {
    18.       const jsonStr = JSON.stringify(config.data)
    19.       xhr.setRequestHeader('Content-Type', 'application/json')
    20.       xhr.send(jsonStr)
    21.     } else {
    22.       xhr.send()
    23.     }
    24.   })
    25. }

    4.案例 - 天气预报

    天气预报
    步骤：
    • 1. 获取北京市天气数据，展示
    • 2. 搜索城市列表，展示
    • 3. 点击城市，显示对应天气数据

    接口文档地址：https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8/api-87683404

    效果图：

    4.1 天气预报 - 获取并渲染城市天气

    需求：写一个渲染数据函数，方便后面的使用

    步骤：

    • 1.默认显示-北京市天气
    • 2.获取北京市天气数据
    • 3.数据展示到页面

    代码：

    1. /**
    2.  * 目标1：默认显示-北京市天气
    3.  *  1.1 获取北京市天气数据
    4.  *  1.2 数据展示到页面
    5.  */
    6. // 获取并渲染城市天气函数
    7. function getWeather(cityCode) {
    8.   // 1.1 获取北京市天气数据
    9.   myAxios({
    10.     url: 'http://hmajax.itheima.net/api/weather',
    11.     params: {
    12.       city: cityCode
    13.     }
    14.   }).then(result => {
    15.     console.log(result)
    16.     const wObj = result.data
    17.     // 1.2 数据展示到页面
    18.     // 阳历和农历日期
    19.     const dateStr = `${wObj.date}
    20.     农历 
    21.       ${wObj.dateLunar}
    22.     `
    23.     document.querySelector('.title').innerHTML = dateStr
    24.     // 城市名字
    25.     document.querySelector('.area').innerHTML = wObj.area
    26.     // 当天气温
    27.     const nowWStr = `
    28.     
    29.       ${wObj.temperature}
    30.       °
    31.     
    32.
  • ${wObj.psPm25}
  • ${wObj.psPm25Level}
    • ${wObj.weatherImg}" class="weatherImg" alt="">
    • ${wObj.weather}
    • ${wObj.windDirection}
    • ${wObj.windPower}
    • `
    • document.querySelector('.weather-box').innerHTML = nowWStr
    • // 当天天气
    • const twObj = wObj.todayWeather
    • const todayWStr = `
    • 今天：
    • ${twObj.weather}
    • ${twObj.temNight}
    • -
    • ${twObj.temDay}
    • ℃
      • 紫外线
      • ${twObj.ultraviolet}
      • 湿度
      • ${twObj.humidity}%
      • 日出
      • ${twObj.sunriseTime}
      • 日落
      • ${twObj.sunsetTime}
      • `
      • document.querySelector('.today-weather').innerHTML = todayWStr
      • // 7日天气预报数据展示
      • const dayForecast = wObj.dayForecast
      • const dayForecastStr = dayForecast.map(item => {
      • return `
      • ${item.dateFormat}
      • ${item.date}
      • ${item.weatherImg}" alt="" class="weatherImg">
      • ${item.weather}
      • ${item.temNight}-
      • ${item.temDay}
      • ℃
      • ${item.windDirection}
      • ${item.windPower}
        • `
      • }).join('')
      • // console.log(dayForecastStr)
      • document.querySelector('.week-wrap').innerHTML = dayForecastStr
      • })
      • }
      • // 默认进入网页-就要获取天气数据（北京市城市编码：'110100'）
      • getWeather('110100')

        • 4.2 天气预报 - 搜索城市列表

        需求：根据关键字，展示匹配城市列表
        步骤：

        代码：

        1. /**
        2.  * 目标2：搜索城市列表
        3.  *  2.1 绑定input事件，获取关键字
        4.  *  2.2 获取展示城市列表数据
        5.  */
        6. // 2.1 绑定input事件，获取关键字
        7. document.querySelector('.search-city').addEventListener('input', (e) => {
        8.   console.log(e.target.value)
        9.   // 2.2 获取展示城市列表数据
        10.   myAxios({
        11.     url: 'http://hmajax.itheima.net/api/weather/city',
        12.     params: {
        13.       city: e.target.value
        14.     }
        15.   }).then(result => {
        16.     console.log(result)
        17.     const liStr = result.data.map(item => {
        18.       return `
        19. ${item.code}">${item.name}
          20. `
        20.     }).join('')
        21.     console.log(liStr)
        22.     document.querySelector('.search-list').innerHTML = liStr
        23.   })
        24. })

        4.2 天气预报 - 展示城市天气

        需求：展示用户搜索查看的城市天气
        步骤：

        代码：

        1. /**
        2.  * 目标3：切换城市天气
        3.  *  3.1 绑定城市点击事件，获取城市code值
        4.  *  3.2 调用获取并展示天气的函数
        5.  */
        6. // 3.1 绑定城市点击事件，获取城市code值
        7. document.querySelector('.search-list').addEventListener('click', e => {
        8.   if (e.target.classList.contains('city-item')) {
        9.     // 只有点击城市li才会走这里
        10.     const cityCode = e.target.dataset.code
        11.     console.log(cityCode)
        12.     // 3.2 调用获取并展示天气的函数
        13.     getWeather(cityCode)
        14.   }
        15. })

      • 相关阅读:
        MySQL-数据操作语言（DML）详解
        React 的入门介绍
        Apereo CAS反序列化漏洞中数据加解密研究
        本周内容整理
        apple pencil一定要买吗？Ipad电容笔推荐品牌
        21天学习挑战赛--第三天打卡（动态更换app图标）
        初识OpenGL (-)顶点之“链接顶点属性“
        【干货】安全应用RPA的3个阶段
        CPU，ISA架构，CPU位数与内存
        全网最全谷粒商城记录_07、环境-虚拟机网络设置——2、固定IP，Windows和虚拟机ping通方式【简洁】
      • 原文地址：https://blog.csdn.net/2301_77358195/article/details/142268651