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 函数,获取省份列表展示

相关推荐
神三元12 小时前
大模型工具调用输出的 JSON,凭什么能保证不出错?
前端·ai编程
超级大只老咪12 小时前
线性递推通用模板
java·开发语言·算法
得物技术12 小时前
基于 Cursor Agent 的流水线 AI CR 实践|得物技术
前端·程序员·全栈
Dream of maid12 小时前
Python基础 6 (面向对象)
开发语言·python
郝学胜-神的一滴12 小时前
「栈与缩点的艺术」二叉树前序序列化合法性判定:从脑筋急转弯到工程实现
java·开发语言·数据结构·c++·python·算法
她说..12 小时前
Java Object类与String相关高频面试题
java·开发语言·jvm·spring boot·java-ee
Mr_Tony12 小时前
Swift 中的 Combine 框架完整指南(含示例代码 + 实战)
开发语言·swift
无心水12 小时前
22、Java开发避坑指南:日期时间、Spring核心与接口设计的最佳实践
java·开发语言·后端·python·spring·java.time·java时间处理
188号安全攻城狮12 小时前
【前端安全】Trusted Types 全维度技术指南:CSP 原生 DOM XSS 防御终极方案
前端·安全·网络安全·xss
Hello.Reader12 小时前
双卡 A100 + Ollama 最终落地手册一键部署脚本、配置文件、预热脚本与 Python 客户端完整打包
开发语言·网络·python