AJAX 原理

一、AJAX原理 - XMLHttpRequest

定义:

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

好处:掌握使用 XHR 与服务器进行数据交互,了解 axios 内部原理。

1.1 使用 XMLHttpRequest:

步骤:

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

    需求:获取并展示所有省份名字


    问题:
  5. AJAX 原理是什么?
    答:XMLHttpRequest 对象
    2.为什么学习 XHR?
    答:有更多与服务器数据通信方式,了解 axios 内部原理。
    3.XHR 使用步骤?
    答:创建 XHR 对象,调用 open 方法,设置 url 和请求方法,监听 loadend 事件,接收结果,调用 send 方法,发起请求。

1.2 XMLHttpRequest - 查询参数

定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据
语法:http://xxxx.com/xxx/xxx?参数名1=值1\&参数名2=值2

1.3 XMLHttpRequest - 数据提交

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

二、Promise

定义:


好处:

  1. 逻辑更清晰
  2. 了解 axios 函数内部运作机制
  3. 能解决回调函数地狱问题
    语法:

2.1 Promise - 三种状态

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

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

三、封装简易版 axios

封装_简易axios_获取省份列表
需求:基于 Promise + XHR 封装 myAxios 函数,获取省份列表展示 。
步骤:

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

相关推荐
明月_清风8 小时前
🖥️ Electron 三进程 Host 实战:从架构设计到生产落地的完整指南
前端·electron·客户端
工业一体机老司机8 小时前
Python实现工业一体机Modbus-TCP通信-从协议解析到多设备轮询实战
开发语言·python·tcp/ip
GIS数据转换器8 小时前
智慧林草“一张图“平台
java·大数据·服务器·前端·javascript·数据库·人工智能
fpcc8 小时前
跟我学C++中级篇—static_assert和assert
开发语言·c++
2401_885885048 小时前
国际语音php接口代码示例:PHP使用cURL快速调用语音发送API
android·开发语言·前端·人工智能·python·php·语音识别
leoZ2318 小时前
AI+前端提效-08 AI自动化文档:前端组件、接口、项目文档自动生成
前端·人工智能·深度学习·神经网络·目标检测·自然语言处理·自动化
lilian2338 小时前
HarmonyOS 7 新特性(五)|ContainerReader 容器断点与自适应布局
前端·华为·harmonyos
萌动的小火苗8 小时前
Linux进程线程面试题【无答案】
linux·运维·服务器·c语言·开发语言
计算机魔术师8 小时前
Google DeepMind 将 AI 科学家 Co-Scientist 扩展为实验室集成研究伙伴
前端
2601_965798478 小时前
BrandBoost WordPress Theme Review: Fast Agency Web Architecture
前端