AJAX原理(笔记)

68 阅读1分钟

XMLHttpRequest

  • AJAX原理-XMLHttpRequest
  • 定义:XHR对象用于与服务器交互。通过XHR可以在不刷新页面的情况下请求特定URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的布局内容。

    关系:axios内部采用XHR与服务器交互

    image.png

  • 使用XMLHttpRequest
  • 步骤

    1.创建XHR对象

    2.调用open方法,配置请求方法和请求url地址

    3.监听loadend事件,接收响应结果

    4.调用send方法,发起请求

    image.png

  • XMLHttpRequest-查询参数
  • 定义:浏览器提供给服务器的额外信息。让服务器返回浏览器想要的数据

    语法xxxx.com/xxx/xxx?参数名…

    // 1.创建URLSearchParams对象
    const paramsObj = new URLSearchParams({
      参数名1: 值1,
      参数名2: 值2
    })
    // 2.生成指定格式查询参数 字符串
    const queryString = paramsObj.toString()
    // 结果:参数名1=值1&参数名2=值2
    

    image.png

    Promise

  • Promise
  • 定义:Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值

    好处

    1.逻辑更清晰

    2.了解axios函数内部运作机制

    3.能解决回调函数地域问题

    语法

    // 1.创建Promise对象
    const p = new Promise((resolve, reject) => {
      //2.执行异步任务-并传递结果
      // 成功调用:resolve(值) 触发then()执行
      // 失败调用:reject(值) 触发catch()执行
    })
    // 3.接收结果
    p.then(result => {
      //成功
    }).catch(error => {
      //失败
    })
    

  • Promise-三种状态
  • 概念:一个Promise对象,必然处于一下几种状态之一

    待定(pending):初始状态,既没有被兑现,也没有被拒绝

    已兑现(fulfilled):操作成功

    已拒绝(rejected):操作失败

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

    image.png