AJAX复习总结

于 2024-07-17 09:58:39 发布
阅读量669 收藏 16
点赞数 13
分类专栏： 前端学习 文章标签： ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62831076/article/details/140486094
版权

AJAX复习总结

AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术）,是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。简单来说，AJAX就是让网页变得更快、更灵活的一种方法

举个例子：当你浏览一个网站时有一个搜索框，每次你输入搜索内容提交后，整个页面重新刷新，再显示搜索结果，这样也太慢了些！！！

但有了AJAX之后，当我们在搜索框输入内容提交时，它会悄悄在后台与服务器通信，获取搜索结果，然后只更新网页搜索结果部分，页面其它部分保持不变

在这里插入图片描述

基础知识

axios基本使用

  • axios是一个基于 Promise 的 HTTP 客户端，是一个第三方库

1）引入 axios.js 文件到自己的网页中：axios.js文件链接: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2）明确axios函数的使用语法

axios({
  url: '目标资源地址'
}).then((result) => {
  // 对服务器返回的数据做后续处理
})
错误处理
  • 使用 axios 的 catch 方法，捕获这次请求响应的错误并做后续处理
axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

认识URL

  • 定义：统一资源定位符，简称网址，用于访问服务器上资源

  • 组成：三部分组成（协议-钥匙、域名-地址、资源路径-物品位置）

在这里插入图片描述

1）http协议：超文本传输协议，规定了浏览器和服务器传递数据的格式
在这里插入图片描述

2）域名：标记服务器在互联网中的位置，想访问哪台服务器，就得先知道它的域名

在这里插入图片描述

3）资源路径：一个服务器有多个资源，根据标记看你想要访问哪条
在这里插入图片描述

查询参数

  • 定义：携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

  • 用法：在 url 网址后面用?拼接格式：http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2

  • axios携带参数

<body>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <p></p>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      // 查询参数
      params: {
        pname: '辽宁省'
      }
    }).then(result => {
      console.log(result.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </script>
</body>

常用请求方法

  • 如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作

在这里插入图片描述

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户: http://hmajax.itheima.net/api/register
      请求方法: POST
      参数名:
        username: 用户名 (中英文和数字组成, 最少8位)
        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册
      需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户
    */
   document.querySelector('.btn').addEventListener('click', () => {
    axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'itheima007',
        password: '7654321'
      }
    }).then(result => {
      // 成功
      console.log(result)
    }).catch(error => {
      // 失败
      // 处理错误信息
      console.log(error)
      console.log(error.response.data.message)
      alert(error.response.data.message)
    })
   })
  </script>
</body>

GET 和 POST 请求方法的区别

  1. GET是从服务器上获取数据，POST是向服务器上传递数据的
  2. GET通过URL来传递参数，POST是放在请求体中
  3. GET会被浏览器主动缓存, POST不会，需要手动设置
  4. 浏览器回退的时候, GET不会重新提交, 而POST会重新提交表单
  5. Params主要用于传递GET请求的URL（查询）参数；data主要用于传递POST请求的请求体数据

HTTP协议-请求报文

  • 就是浏览器发送给服务器的内容，如注册用户，发送的请求报文

  • 组成：请求行（1）、请求头（2-11）、空行（12）、请求体（13）
    在这里插入图片描述

  • 通过谷歌的网页面板查看请求报文
    在这里插入图片描述

HTTP协议-响应报文

  • 响应行（状态行）：协议、HTTP响应状态码、状态信息

  • 响应头：以键值对的格式携带的附加信息，比如 Content-Type

  • 空行：分隔响应头，空行之后的是返回给浏览器的资源

  • 响应体：返回的资源
    在这里插入图片描述

  • HTTP 响应状态码用来表明请求是否成功完成
    在这里插入图片描述

form-seralize插件

  • 是为了快速收集表单元素的值
<body>
  <form action="javascript:;" class="example-form">
    <input type="text" name="username">
    <br>
    <input type="text" name="password">
    <br>
    <input type="button" class="btn" value="提交">
  </form>
  <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
    1. 把插件引入到自己网页中
  -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      /**
       * 2. 使用serialize函数，快速收集表单元素的值
       * 参数1：要获取哪个表单的数据
       *  表单元素设置name属性，值会作为对象的属性名
       *  建议name属性的值，最好和接口文档参数名一致
       * 参数2：配置对象
       *  hash 设置获取数据结构
       *    - true：JS对象（推荐）一般请求体里提交给服务器
       *    - false: 查询字符串
       *  empty 设置是否获取空值
       *    - true: 获取空值（推荐）数据结构和标签结构一致
       *    - false：不获取空值
      */
      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true })
      // const data = serialize(form, { hash: false, empty: true })
      // const data = serialize(form, { hash: true, empty: false })
      console.log(data)
    })
  </script>
</body>

Bootstrap弹框

  • 不离开当前页面，显示单独的内容，如点击添加，出现一个小页面
<body>
  <!-- 
    目标：使用Bootstrap弹框
    1. 引入bootstrap.css 和 bootstrap.js
    2. 准备弹框标签，确认结构
    3. 通过自定义属性，控制弹框的显示和隐藏
   -->
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".my-box">
    显示弹框
  </button>

  <!-- 
    弹框标签
    bootstrap的modal弹框，添加modal类名（默认隐藏）
   -->
  <div class="modal my-box" tabindex="-1">
    <div class="modal-dialog">
      <!-- 弹框-内容 -->
      <div class="modal-content">
        <!-- 弹框-头部 -->
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <!-- 弹框-身体 -->
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <!-- 弹框-底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入bootstrap.js -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>
</body>

AJAX原理

XMLHttpRequest学习

基础使用

  • AJAX的原理就是window 提供的 XMLHttpRequest

  • axios 是对 XHR 相关代码进行了封装，让我们只关心传递的接口参数

  • 学习 XHR 可以了解 axios 内部与服务器交互过程的真正原理
    在这里插入图片描述

<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：使用XMLHttpRequest对象与服务器通信
     *  1. 创建 XMLHttpRequest 对象
     *  2. 配置请求方法和请求 url 地址
     *  3. 监听 loadend 事件，接收响应结果
     *  4. 发起请求
    */
    // 1. 创建 XMLHttpRequest 对象
    const xhr = new XMLHttpRequest()

    // 2. 配置请求方法和请求 url 地址
    xhr.open('GET', 'http://hmajax.itheima.net/api/province')

    // 3. 监听 loadend 事件，接收响应结果
    xhr.addEventListener('loadend', () => {
      console.log(xhr.response)
      const data = JSON.parse(xhr.response)
      console.log(data.list.join('<br>'))
      document.querySelector('.my-p').innerHTML = data.list.join('<br>')
    })

    // 4. 发起请求
    xhr.send()
  </script>
</body>
查询参数
  • 在调用 open 方法的时候，在 url? 后面按照指定格式拼接参数名和值
<body>
  <p class="city-p"></p>
  <script>
    /**
     * 目标：使用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()
  </script>
</body>
数据提交

1.这次没有axios帮助我们，需要自己设置请求体 Content-Type：application/json，告诉服务的，发过去内容为 JSON 字符串

2.需要自己将 JS 对象转成 JSON 字符串

3.原生 XHR 需要在 send 方法调用时，传入请求体携带

<body>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：使用xhr进行数据提交-完成注册功能
    */
    document.querySelector('.reg-btn').addEventListener('click', () => {
      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://hmajax.itheima.net/api/register')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)
      })

      // 设置请求头-告诉服务器内容类型（JSON字符串）
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 准备提交的数据
      const userObj = {
        username: 'itheima007',
        password: '7654321'
      }
      const userStr = JSON.stringify(userObj)
      // 设置请求体，发起请求
      xhr.send(userStr)
    })
  </script>
</body>

Promise学习

基础认识

  • 表示（管理）一个异步操作最终状态和结果值的对象

  • 通过学习Promise,可以知道成功和失败状态，可以关联对应处理函数，了解 axios 内部运作的原理。
    在这里插入图片描述

  • 语法：

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1. 创建Promise对象
    const p = new Promise((resolve, reject) => {
      // 2. 执行异步代码
      setTimeout(() => {
        // resolve('模拟AJAX请求-成功结果')
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 2000)
    })

    // 3. 获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })
  </script>
</body>
Promise三种状态
  • 每个 Promise 对象必定处于以下三种状态之一：
  1. 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
  2. 已兑现（fulfilled）：操作成功完成
  3. 已拒绝（rejected）：操作失败
    在这里插入图片描述
<body>
  <script>
    /**
     * 目标：认识Promise状态
    */
    // 1. 创建Promise对象（pending-待定状态）
    const p = new Promise((resolve, reject) => {
      // Promise对象创建时，这里的代码都会执行了
      // 2. 执行异步代码
      setTimeout(() => {
        // resolve() => 'fulfilled状态-已兑现' => then()
        resolve('模拟AJAX请求-成功结果')
        // reject() => 'rejected状态-已拒绝' => catch()
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 2000)
    })
    console.log(p)

    // 3. 获取结果
    p.then(result => {
      console.log(result)
    }).catch(error => {
      console.log(error)
    })
  </script>
</body>
用 Promise 管理 XHR 异步任务
<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：使用Promise管理XHR请求省份列表
     *  1. 创建Promise对象
     *  2. 执行XHR异步代码，获取省份列表
     *  3. 关联成功或失败函数，做后续处理
    */
    // 1. 创建Promise对象
    const p = new Promise((resolve, reject) => {
      // 2. 执行XHR异步代码，获取省份列表
      const xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://hmajax.itheima.net/api/province')
      xhr.addEventListener('loadend', () => {
        // xhr如何判断响应成功还是失败的？
        // 2xx开头的都是成功响应状态码
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response))
        } else {
          reject(new Error(xhr.response))
        }
      })
      xhr.send()
    })

    // 3. 关联成功或失败函数，做后续处理
    p.then(result => {
      console.log(result)
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    }).catch(error => {
      // 错误对象要用console.dir详细打印
      console.dir(error)
      // 服务器返回错误提示消息，插入到p标签显示
      document.querySelector('.my-p').innerHTML = error.message
    })
    
  </script>
</body>
基于 Promise 和 XHR 封装 myAxios 函数
<body>
  <p class="my-p"></p>
  <script>
    /**
     * 目标：封装_简易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
    })
  </script>
</body>

AJAX进阶

同步代码和异步代码

同步代码：逐行执行，需原地等待结果后，才继续向下执行

异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发回调函数传递结果；如：setTimeout 、 setInterval，事件，AJAX；依靠回调函数来接收

const result = 0 + 1
console.log(result)
setTimeout(() => {
  console.log(2)
}, 2000)
document.querySelector('.btn').addEventListener('click', () => {
  console.log(3)
})
document.body.style.backgroundColor = 'pink'
console.log(4)
//打印顺序：1，4，2

回调函数地狱

  • 在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱

  • 问题：可读性差，异常捕获困难

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：演示回调函数地狱
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
     * 概念：在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱
     * 缺点：可读性差，异常无法获取，耦合性严重，牵一发动全身
    */
    // 1. 获取默认第一个省份的名字
    axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
      const pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      // 2. 获取默认第一个城市的名字
      axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }}).then(result => {
        const cname = result.data.list[0]
        document.querySelector('.city').innerHTML = cname
        // 3. 获取默认第一个地区的名字
        axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }}).then(result => {
          console.log(result)
          const areaName = result.data.list[0]
          document.querySelector('.area').innerHTML = areaName
        })
      })
    }).catch(error => {
      console.dir(error)
    })
  </script>
</body>

Promise链式调用

基本用法

  • 依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束

  • 解决回调函数嵌套问题
    在这里插入图片描述

<body>
  <script>
    /**
     * 目标：掌握Promise的链式调用
     * 需求：把省市的嵌套结构，改成链式调用的线性结构
    */
    // 1. 创建Promise对象-模拟请求省份名字
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('北京市')
      }, 2000)
    })

    // 2. 获取省份名字
    const p2 = p.then(result => {
      console.log(result)
      // 3. 创建Promise对象-模拟请求城市名字
      // return Promise对象最终状态和结果，影响到新的Promise对象
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(result + '--- 北京')
        }, 2000)
      })
    })

    // 4. 获取城市名字
    p2.then(result => {
      console.log(result)
    })

    // then()原地的结果是一个新的Promise对象
    console.log(p2 === p)
  </script>
</body>
解决回调函数地狱问题
  • 每个 Promise 对象中管理一个异步任务，用 then 返回 Promise 对象，串联起来
    在这里插入图片描述
<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：把回调函数嵌套代码，改成Promise链式调用结构
     * 需求：获取默认第一个省，第一个市，第一个地区并展示在下拉菜单中
    */
    let pname = ''
    // 1. 得到-获取省份Promise对象
    axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
      pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      // 2. 得到-获取城市Promise对象
      return axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
    }).then(result => {
      const cname = result.data.list[0]
      document.querySelector('.city').innerHTML = cname
      // 3. 得到-获取地区Promise对象
      return axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
    }).then(result => {
      console.log(result)
      const areaName = result.data.list[0]
      document.querySelector('.area').innerHTML = areaName
    })
  </script>
</body>

async 函数和 await

基本用法

  • 在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值

  • await替代 then 方法来提取 Promise 对象成功状态的结果

<body>
  <form>
    <span>省份：</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市：</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区：</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标：掌握async和await语法，解决回调函数地狱
     * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
     * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
    */
    // 1. 定义async修饰函数
    async function getData() {
      // 2. await等待Promise对象成功的结果
      const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})
      const pname = pObj.data.list[0]
      const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
      const cname = cObj.data.list[0]
      const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
      const areaName = aObj.data.list[0]


      document.querySelector('.province').innerHTML = pname
      document.querySelector('.city').innerHTML = cname
      document.querySelector('.area').innerHTML = areaName
    }

    getData()
  </script>
</body>
捕获错误
  • 用 try catch 捕获同步流程的错误
<script>
    /**
     * 目标：async和await_错误捕获
    */
    async function getData() {
      // 1. try包裹可能产生错误的代码
      try {
        const pObj = await axios({ url: 'http://hmajax.itheima.net/api/province' })
        const pname = pObj.data.list[0]
        const cObj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
        const cname = cObj.data.list[0]
        const aObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
        const areaName = aObj.data.list[0]

        document.querySelector('.province').innerHTML = pname
        document.querySelector('.city').innerHTML = cname
        document.querySelector('.area').innerHTML = areaName
      } catch (error) {
        // 2. 接着调用catch块，接收错误信息
        // 如果try里某行代码报错后，try中剩余的代码不会执行了
        console.dir(error)
      }
    }

    getData()
  </script>

事件循环

  • JavaScript 单线程（某一刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型
  • 它允许代码在单线程上异步执行，在调用栈空闲时，反复调用任务队列里回调函数执行机制
    在这里插入图片描述
  • 习题练习：
<script>
    // 目标：回答代码执行顺序
    console.log(1)
    setTimeout(() => {
      console.log(2)
      const p = new Promise(resolve => resolve(3))
      p.then(result => console.log(result))
    }, 0)
    const p = new Promise(resolve => {
      setTimeout(() => {
        console.log(4)
      }, 0)
      resolve(5)
    })
    p.then(result => console.log(result))
    const p2 = new Promise(resolve => resolve(6))
    p2.then(result => console.log(result))
    console.log(7)
    // 1 7 5 6 2 3 4
  </script>

宏任务与微任务

  • ES6 之后引入了 Promise 对象， 让 JS 引擎也可以发起异步任务

  • 异步任务划分为：

宏任务：由浏览器环境执行的异步代码

微任务：由 JS 引擎环境执行的异步代码
在这里插入图片描述

Promise.all 静态方法

  • 合并多个 Promise 对象，等待所有同时成功完成（或某一个失败），做后续逻辑
    在这里插入图片描述
<script>
    /**
     * 目标：掌握Promise的all方法作用，和使用场景
     * 业务：当我需要同一时间显示多个请求的结果时，就要把多请求合并
     * 例如：默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code：
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */
    // 1. 请求城市天气，得到Promise对象
    const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    // 2. 使用Promise.all，合并多个Promise对象
    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    p.then(result => {
      // 注意：结果数组顺序和合并时顺序是一致
      console.log(result)
      const htmlStr = result.map(item => {
        return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`
      }).join('')
      document.querySelector('.my-ul').innerHTML = htmlStr
    }).catch(error => {
      console.dir(error)
    })
  </script>
太阳花ˉ
关注
  • 13
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax复习
可了不得
11-16 199
Ajax：Asynchronous JavaScript XML ,这一技术的核心是XMLHttpRequest对象（XHR），可以用一异步的方式从服务器取得更多的信息，可以不必刷新页面也能取得新数据，即使用XHR对象取得新数据，然后再通过DOM将数据插到页面中，ajax中虽然有xml的缩写，但是ajax和数据格式无关。   首先兼容性一直都是前端的头疼之事，在ajax中同样有对浏览器的判断IE
菜鸟蔡之Ajax复习第三篇(Ajax之无刷新登录)
12-01
本文以“菜鸟蔡之Ajax复习第三篇——Ajax之无刷新登录”为例，详细介绍如何实现一个简单的Ajax登录功能。 首先，创建一个`Login.html`页面，该页面用于用户输入登录信息，包括登录名和密码。在HTML部分，我们看到一...
Ajax复习总结
weixin_34111790的博客
07-23 166
目录ajax ajax入门程序: ajax-api详解 常用属性: 常用方法: jquery中的ajax 四种: 案例-使用jquery的ajax判断用户是否被占用 步骤分析: 实现 案例-模仿百度搜索 需求: 步骤分析: 实现 案例-省市联动 需求: 步骤分析: 实现 ajaxajax异步JavaScript和XML,AJAX...
ajax总结
qq_60152058的博客
10-12 162
最近开始了ajax的学习，为了巩固复习所学知识，我准备将他们总结一下，以方便我的学习。大家也可以共同进步，互相学习。 首先我们要清楚一件事，ajax到底是什么？ Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 第一个知识点： http 请求过程 1.建立tcp网络连接 2.客户端：发送请求头+请求体 3.服务端：返回响应头+响应体 4.断开tcp网络连接 5.浏览器渲染响应体 第二个知识点： 请求组成部分 1.请求行 ：又分为...
AJAX 知识点总结
小jiang的博客
05-05 732
前面学习了json，现在总结一下ajax的用法，方便自己查看复习。（是向@狂神说学习的） 1、AJAX定义： AJAX=Asynchronous JavaScript and Xml(异步的JavaScript和Xml)； AJAX是一种在无需重新加载整个网页的情况下，能够及时更新部分网页的技术； AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的WEB应用程序技术； 2、利用AJAX可以做： 搜索框搜索时，通过输入搜索框的内容来实时响应界面； 注册时，输入用户名自动检.
Ajax总结
90后中年人的博客
05-18 48
asynchronous JavaScript and xml，是一种无需重新加载整个页面可以更新部分网页的技术。
Ajax复习++++++++++5.24.zip
06-03
Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个...总结起来，Ajax是构建现代Web应用的重要技术，通过异步通信提升用户体验。理解并熟练运用上述知识点，有助于开发更高效、交互性强的Web应用。
asp.net 复习总结ppt
03-03
本复习总结PPT针对ASP.NET的关键知识点进行了深入的归纳与解析。 1. **ASP.NET概述** ASP.NET是一个服务器端的Web开发平台，它包含了用于构建和运行Web应用程序的各种服务。它支持多种编程语言，如C#、VB.NET等，...
mvc中ajax总结及运用
12-04
ajax的基本运用和js的复习，能够实现一些很好的效果，没有用过的朋友可以用用
ASP.net 复习资料总结
12-25
本复习资料主要涵盖了ASP.NET 3.5版本，这是一个重要的里程碑，引入了许多新特性和改进。下面我们将深入探讨其中的关键知识点。 一、ASP.NET基础 1. 页面生命周期：理解页面从请求到响应的生命周期至关重要，包括...
Spark学习之SparkSQL
最新发布
m0_58050808的博客
07-16 234
Spark SQL中的DataFrame DSL（Domain Specific Language，领域特定语言）是一种用于处理DataFrame的编程风格，它允许开发者以命令式的方式，通过调用API接口来操作DataFrame。这种风格**介于代码和纯SQL之间，**提供了一种更加灵活和强大的数据处理方式。DataFrame DSL（Domain Specific Language，领域特定语言）中的。idea里面将代码编写好打包上传到集群中运行，上线使用。
在layui中使用ajax不起作用
weixin_43839635的博客
07-15 191
#layui不起作用问题
ajax实时监测与springboot的实例分析
qq_55332182的博客
07-16 256
ajax实时监测和springboot举例分析
WEB07Vue+Ajax
2402_84667776的博客
07-12 944
刚才通过一个快速入门程序，大家快速感受了一下Vue的开发，并明确了Vue的开发步骤。那接下来，我们要来学习的是Vue中的常用指令，通过Vue中的指令，就可以将原始的数据，根据不同的需求，渲染展示在界面中。而在讲解Vue指令的时候呢，我们将会通过一个小案例来贯穿始终。那就是用户列表渲染的案例，需求如下所示：将Vue中定义的数据userList，渲染展示在视图的表格之中。在原始数据中，性别gender如果为1，展示为"男"；如果为2，展示为"女"。在原始数据中，职位job如果为1，展示为"讲师"；
【vue深入学习第1章】Vue.js 中的 Ajax 处理：vue-resource 库的深度解析
liyananweb的博客
07-15 837
在现代前端开发中，Ajax 请求是与后端进行数据交互的关键技术。Vue.js 作为一个渐进式 JavaScript 框架，提供了多种方式来处理 Ajax 请求，其中 `vue-resource` 是一个较为常用的库。
Ajax从零到实战
大学生小郑的博客
07-11 1680
Ajax从零到实战
JavaWeb（四：Ajax与Json）
xpy2428507302的博客
07-12 849
JavaScript Object Notation：⼀种轻量级数据交互格式，完成 js 与 Java 等后端开发语⾔对象数据之间的转换。客户端和服务器之间传递对象数据，需要用到 JSON 格式。
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 355
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 701
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
JAVA学习要点总结.pdf
12-07
JAVA学习要点总结.pdf

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值