Ajax_3 Ajax原理+ （XMLHttpRequest + Promise ）+ 封装一个axios插件库，实现功能。

Forever_Hopeful2023-08-08 14:33

Ajax_3 Ajax原理

01-Ajax原理-XMLHttpRequest

使用XMLHttpRequest

步骤：

  1. 创建XMLHttpRequest对象
  2. 配置请求方法请求url网址
  3. 监听loadend事件，接受响应结果
  4. 发起请求

需求：使用XMLHttpRequest对象与服务器通信

代码示例
javascript 复制代码 
 //  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)
   // 数组转字符串
   console.log(data.list.join('<br>'))
   // 插入到页面中
   document.querySelector('.my-p').innerHTML = data.list.join('<br>')
 })

 //  4. 发起请求
 xhr.send()
</script>

02-XMLHttpRequest-查询参数

定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的结果。

语法：
  1. ?参数名1=值1&参数名2=值2 （在问号后面，多个值用&连接）

参数名是接口文档里面设定的哦！

需求：使用XHR携带查询参数，展示某个省下属的城市列表

代码示例
html 复制代码 
<script>  
// 1、创建xhr实例对象
 const xhr = new XMLHttpRequest()
 // 2、发起请求
 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)
   // 数组转字符串，用换行符分隔
   console.log(data.list.join('<br>'))
   // 插入渲染
   document.querySelector('.city-p').innerHTML = data.list.join('<br>')
 })
 xhr.send()

</script>

03-地区查询

需求： 根据省份和城市名字, 查询对应的地区列表

代码示例
html 复制代码 
<script>
 // 注册点击事件
 document.querySelector('.sel-btn').addEventListener('click', () => {
   // 2.收集省份和城市名字
   const pname = document.querySelector('.province').value
   const cname = document.querySelector('.city').value

   // 3.组织查询参数的字符串
   const qObj = {
     pname,
     cname
   }
   // 将查询参数对象   ->  查询参数的字符串
   const paramsObj = new URLSearchParams(qObj)
   // 使用toString（）方法将实例对象转为字符串
   const queryString = paramsObj.toString()
   console.log(queryString)


   // 1.创建xhr实例对象
   const xhr = new XMLHttpRequest()
   // 2.向服务器发送请求
   xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)
   // 3.监听函数监听服务器响应的信息
   xhr.addEventListener('loadend', () => {
     console.log(xhr.response)
     // 将返回结果对象转字符串
     const data = JSON.parse(xhr.response)
     console.log(data.list)
     // 将数组里面的数据通过map数组映射给标签，记得将数组转为大的字符串
     const htmlStr = data.list.map(item => {
       return `<li class="list-group-item">${item}</li>`
     }).join('')
     console.log(htmlStr)
     document.querySelector('.list-group').innerHTML = htmlStr
   })
   // 4.发送请求
   xhr.send()

 })

</script>

04-XMLHttpRequest-提交数据

需求： 通过XHR提交用户名和密码，完成注册功能

代码示例
javascript 复制代码 
 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)
   })
   // 自己配置请求参数
   xhr.setRequestHeader('Content-Type', 'application/json')
   // 准备好提交的数据
   const userObj = {
     username: 'liubuzhu',
     password: '7654321'
   }
   //将参数对象转为字符串  请求体
   const userStr = JSON.stringify(userObj)
   // 设置请求体：发起请求
   xhr.send(userStr)
 })
</script>

无论是请求还是查询都需要自己配置对象通过API转换后进行操作

查询参数使用路径传参在?后面。

提交请求参数则自己配置请求对象后，在xhr.send（请求参数）

05-认识 Promise

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

promise的好处
  1. 逻辑更清晰
  2. 了解axios函数内部运作机制
  3. 能解决回调函数低于问题
语法：
  1. 创建一个promise对象，传入resolve和reject参数
  2. 执行异步任务，并传递结果，成功传入resolve，失败传入reject
  3. 接受结果：成功then方法 ， 失败 catch方法
代码示例
html 复制代码 
<script>  
const p = new Promise((resolve,reject) => {
    // 2.执行异步代码
    setTimeout(() => {
      // 成功就直接给resolve传入实参
      resolve('模拟Ajax请求成功结果')

      // 失败就直接给reject传入实参
      reject('模拟Ajax请求失败结果')
      
    },2000)
  })
  // 3.获取结果
  p.then(result => {
    console.log(result)
  }).catch(error => {
    console.log(error)
  })
  </script>
  • 注意第二步的使用。

06-Promise对象的三种状态

作用
  1. 了解Promise对象如何关联的处理函数，以及代码的执行顺序。
  1. pending状态（待定） new Promise() ： 初始状态，既没有被兑现，也没有被拒绝
  2. fulfilled状态 （已兑现） .then（回调函数） :意味着，操作成功完成
  3. rejected状态 （已拒绝） .catch(回调函数) : 意味着，操作失败
  • 注意：Promise对象一旦被 兑现 或者 拒绝，就已经被敲定了， 状态无法再被改变。
代码示例
html 复制代码 
<script>    
// Promise对象创建时(待定状态)，这里的代码都会被执行
      console.log('Promise对象内开始执行')
      // 2. 执行异步代码，等待执行结果返回给实参，然后兑现 或者 拒绝给结果
      setTimeout(() => {
        // resolve被调用后，  fulfilled状态-已兑现 then（）
        resolve('模拟AJAX请求-成功结果')

        // reject被调用后，rejected状态-已拒绝 catch（）
        reject(new Error('模拟AJAX请求-失败结果'))
      }, 2000)
</script>

了解三种状态的执行时机，先是执行Promise里面的同步语句，然后调用兑现和拒绝两种状态，等到 异步代码执行完结果在返回给两种状态。

07-使用Promise + XHR获取省份列表

步骤：

* 1. 创建Promise对象

* 2. 执行XHR异步代码，获取省份列表

* 3. 关联成功或失败函数，做后续处理

代码示例
html 复制代码 
<script>
        // 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',() => {
        // 查看响应状态码
        // console.log(xhr.status)
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve(JSON.parse(xhr.response))  //字符串转对象
        } else {
          // 错误我们需要创建一个错误实例对象，并且给构造函数传递错误信息。当实现传递给对调函数
          reject(new Error(xhr.response))  
        }
      })
      xhr.send()
    })

    // 3. 关联成功或失败函数，做后续处理
    p.then(result => {
      document.querySelector('.my-p').innerHTML = result.list.join('<br>')
    }).catch(error => {
      // 服务器返回的错误信息返回给页面
      document.querySelector('.my-p').innerHTML = error.message

    })

</script>

08-封装简易的axios-查询、请求、提交

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

  • 目标：封装_简易axios函数_获取省份列表
    1. 定义myAxios函数，接收配置对象，返回Promise对象
      * 2. 发起XHR请求，默认请求方法为GET
      * 3. 调用成功/失败的处理程序
      * 4. 使用myAxios函数，获取省份列表展示
代码示例
javascript 复制代码 
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))
      }
    })
    if (config.data) {
      const jsonStr = JSON.stringify(config.data)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(jsonStr)
    } else {
      xhr.send()
    }
  })
}
//下面直接调用函数（就先使用axios（）一样的）根据实际需求配置  
      myAxios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'POST',
        data: {
          usename: 'myaxios010',
          password: '99999999'
        }
      }).then(result => {
        console.log(result)
      }).catch(error => {
        console.dir(error)  
      })
    })

2023年8月7日15:38:27

会有综合案例，会单独出一期，同时会补全。

相关推荐
LuckySusu6 分钟前
【CSS篇】对position: sticky定位的深入理解
前端·css
JarvanMo12 分钟前
移动端应用代码审查：资深工程师提升质量与效率指南
前端
Gazer_S13 分钟前
【公司环境下发布个人NPM包完整教程】
前端·npm·node.js
你喜欢喝可乐吗？16 分钟前
Windows 安装 nodejs npm
前端·npm·node.js
yyds46720 分钟前
滑动窗口协议
前端·架构
LaoZhangAI22 分钟前
AI ASMR视频免费制作教程2025：TikTok爆火新趋势详解
前端·后端
LaoZhangAI22 分钟前
FLUX.1 Kontext API完全指南：文本图像编辑最强工具2025版
前端·后端
LuckySusu24 分钟前
【CSS篇】什么是 Margin 重叠问题？如何解决？
前端·css
一依不舍24 分钟前
百度文心大模型 4.5 系列开源：从技术突破到全球生态的中国力量
前端
LaoZhangAI25 分钟前
Claude 4 vs Gemini 2.5 Pro：2025年顶级AI模型权威对比分析
前端·后端
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02如何将markdown生成pdf03Coze扣子平台完整体验和实践（附国内和国际版对比）04GPU 进阶笔记（二）：华为昇腾 910B GPU05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南08鸽了六年的某大厂面试题：你会手写一个模板引擎吗？09DeepSeek各版本说明与优缺点分析10Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案