AJAX 原理

一、AJAX原理 - XMLHttpRequest

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

1.1 使用 XMLHttpRequest:

步骤:
1. 创建 XMLHttpRequest 对象
2. 配置请求方法和请求 url 地址
3. 监听 loadend 事件,接收响应结果
4. 发起请求
需求:获取并展示所有省份名字
问题:
1. 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 函数,获取省份列表展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/596388.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全 | 什么是双因子认证2FA?

关注WX: CodingTechWork 介绍 概念 双因子认证 (2FA),顾名思义,2个因子进行认证。2FA是一种身份验证方法,要求用户提供密码和另一个认证因子或者至少提供两个认证因子(代替密码),才能访问网站…

机器学习(理论第一课)

一、理解人工智能、机器学习、深度学习、强化学习? 人工智能、机器学习和深度学习之间存在递进关系,它们的覆盖范围逐层递减。 **人工智能(Artificial Intelligence,AI)**是最宽泛的概念,旨在研究、开发用于…

关于 VScode, 点击文件右键或者在文件夹中没有 【 在vscode中打开选项】 解决办法

关于 VScode, 点击文件右键或者在文件夹中没有 【 在vscode中打开选项】 解决办法 段子手-168 2024-4-6 1、在任意位置创建一个文本文件。如:a.txt 2、复制以下代码到 a.txt 文本文件中。 (注: 以 ; 开头的 , 是备注信息 , 不需要做任何修…

计算机网络 实验指导 实验12

路由信息协议(RIP)实验 1.实验拓扑图 名称接口IP地址网关Switch AF0/1192.168.1.1/24F0/2172.1.1.1/24Switch BF0/1192.168.1.2/24F0/2172.2.2.1/24PC1172.1.1.2/24172.1.1.1PC2172.1.1.3/24172.1.1.1PC3172.2.2.2/24172.2.2.1PC4172.2.2.3/24172.2.2.1…

Rust 基础语法和数据类型

数据类型 Rust提供了一系列的基本数据类型,包括整型(如i32、u32)、浮点型(如f32、f64)、布尔类型(bool)和字符类型(char)。此外,Rust还提供了原生数组、元组…

Redis中的Sentinel(四)

Sentinel 接收来自主服务器和从服务器的频道消息。 当Sentinel与一个主服务器或者从服务器建立起订阅连接之后,Sentinel就会通过订阅连接,向服务器发送以下命令: SUBSCRIBE _sentinel_:helloSentinel对_sentinel_:hello频道的订阅会一直持续到Sentine…

linux之文件系统、inode和动静态库制作和发布

一、背景 1.没有被打开的文件都在磁盘上 --- 磁盘级文件 2.对磁盘级别的文件,我们的侧重点 单个文件角度 -- 这个文件在哪里,有多大,其他属性是什么? 站在系统角度 -- 一共有多少文件?各自属性在哪里&#xff1f…

linux 安装 pptp 协议

注意:目前iOS已不支持该协议 yum -y install ppp wget https://download-ib01.fedoraproject.org/pub/epel/7/x86_64/Packages/p/pptpd-1.4.0-2.el7.x86_64.rpm yum -y install pptpd-1.4.0-2.el7.x86_64.rpm vi /etc/pptpd.conf 去除 localip 和 remoteip的注释 …

《图解Vue3.0》- 调试

如何对vue3项目进行调试 调试是开发过程中必备的一项技能,掌握了这项技能,可以很好的定义bug所在。一般在开发vue3项目时,有三种方式。 代码中添加debugger;使用浏览器调试:sourcemap需启用vs code 调试:先开启node服…

栈的详解和例题(力扣有效括号)

感谢各位大佬的光临,希望和大家一起进步,望得到你的三连,互三支持,一起进步 个人主页:LaNzikinh-CSDN博客 收入专栏:初阶数据结构_LaNzikinh篮子的博客-CSDN博客 文章目录 前言一.什么是栈二.栈的实现三.例题&#xff…

深入浅出 -- 系统架构之分布式多形态的存储型集群

一、多形态的存储型集群 在上阶段,我们简单聊了下集群的基本知识,以及快速过了一下逻辑处理型集群的内容,下面重点来看看存储型集群,毕竟这块才是重头戏,集群的形态在其中有着多种多样的变化。 逻辑处理型的应用&…

Java设计模式—享元(FlyWeight)模式

享元模式(Flyweight),运用共享技术有效地支持大量细粒度的对象 public abstract class Piece {protected PieceColor m_color;protected PiecePos m_pos;public Piece(PieceColor color ,PiecePos pos){m_color color;m_pos pos;}public ab…