2024-04-22(AJAX)

1.什么是Ajax

使用浏览器的XMLHttpRequest对象和服务器进行通信

浏览器网页中,使用Ajax技术(XMLHttpRequest对象)发起获取服务器数据的请求,服务器将数据给前端,前端拿到数据后,展示到网页。

2.为什么学Ajax

以前前端页面的数据都是写在代码里面固定的,无法随时变化

现在通过Ajax可以动态的从服务器获取,让数据灵活变化

3.axios

第三方库axios,该库语法简单,让我们有更多精力关注在与服务器通信上,且后续Vue,React,也使用axios库与服务器通信

语法:

<script>axios({url: '目标资源地址',method: '请求方法',params:{参数名: 值}}).then((result) => {//对服务器返回的数据做后续处理})
</script>

4.为什么axios也要进行错误处理

因为普通用户不回去控制台查看服务器传过来的错误信息,所以我们要编写代码拿到错误信息并展示在前端页面上给用户看。

<script>axios({// 请求项}).then(result => {// 处理成功的数据}).catch(error => {// 处理失败的错误})
</script>

5.form-serialize插件用于快速收集表单范围内元素的值

参数1:hash

true:收集出来的是一个JS对象结构

false:收集出来的是一个查询字符串格式

参数2:empty

true:收集空的值

false:不收集空置

6.什么是事件委托?

事件委托,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,而不是目标元素。

当事件响应到目标元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。

7.事件对象e.target的作用是什么?

获取到这次触发事件目标标签元素

8.对于前端组件,什么时候用属性控制,什么时候用JS控制?

直接出线或者隐藏的时候,可以用属性方式来控制。如果需要先执行一段JS逻辑再显示/隐藏就要用JS的方式控制。

9.图片上传怎么做?

先依靠文件选择元素获取用户选择的本地文件,接着提交到服务器保存,服务器会返回图片的url网址,然后把网址加载到img标签的src属性中即可显示图片。

具体:

(1)先获取图片文件对象

(2)使用FormData表单数据对象装入(因为图片是文件而不是以前的数字和字符串,所以传递文件一般需要放入FormData对象中,以  键值对--文件流  的数据结构传递)

const fd = new FormData()
fd.append(参数名, 值)

(3)提交表单数据对象,使用服务器返回图片的url地址 

10.AJAX,XMLHttpRequest对象,axios

Ajax是浏览器与服务器通信的技术,采用XMLHttpRequest对象相关代码。axios是对XHR相关代码进行了封装,让我们只关心传递的接口参数。学习XHR可以了解axios内部与服务器交互过程的真正原理。

11.XMLHttpRequest语法

<script>const xhr = new XMLHttpRequest()xhr.open('请求方法', '请求url网址')xhr.addEventListerner('loadend', () => {//响应结果console.log(xhr.response)})xhr.send()
</script>

12.问答

AJAX原理是什么?

window提供的XMLHttpRequest

为什么学习XHR?

有更多与服务器数据通信的方式

XHR的查询参数

XHR的查询参数需要我们自己在url后面携带查询参数字符串,就没有axios帮我们把params参数拼接到url字符串后面了

没有了axios,我们向服务器发送请求时,连请求内容类型都需要我们自己来设置(xhr.setRequestHeader('Content-Type', 'application/json'))

13.Promise

表示(管理)一个异步操作最终状态和结果值的对象

Promise的好处:成功和失败状态,可以各自关联对应的处理函数,并了解到axios内部运作的原理。

语法:

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

示例代码:

<script>const p = new Promise((resolve, reject) => {setTimeout(() => {// resolve('模拟Ajax请求成功结果')reject(new Error('模拟Ajax请求失败结果'))}, 2000)})// 获取结果p.then(result => {console.log(result)}).catch(error => {console.log(error)})
</script>

 例子:

<script>// 获取省份数据const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()xhr.open('GET', '服务器省份资源地址')xhr.addEventListener('loadend', () => {if(xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})p.then(resule => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {console.log(error)document.querySelector('.my-p').innerHTML = error.message})
</script>

14.JS中有哪些异步代码?

setTimeout,setInterval,事件,AJAX等

15.异步函数如何接收结果?

依靠回调函数来接收

16.回调函数地狱

在回调函数中嵌套回调函数,一直嵌套下去就形成了回调函数地狱

缺点:可读性差,异常无法捕获,耦合性差,牵一发动全身

17.事件循环

概念:执行代码和收集异步任务,在调用栈空闲时,反复调用任务队列里回调函数执行机制

为什么有事件循环?

JS是单线程的,为了不阻塞JS引擎,设计执行代码的模型

JS内代码是如何执行的?

执行同步代码,遇到异步代码交给宿主浏览器环境执行。异步代码有了结果后,把回调函数放入任务队列排队,当调用栈空闲后,反复调用任务队列里的回调函数。

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

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

相关文章

椋鸟数据结构笔记#11:排序·下

文章目录 外排序&#xff08;外部排序&#xff09;文件拆分并排序归并文件两个文件归并多文件归并优化 萌新的学习笔记&#xff0c;写错了恳请斧正。 外排序&#xff08;外部排序&#xff09; 当数据量非常庞大以至于无法全部写入内存时&#xff0c;我们应该怎么排序这些数据呢…

Route Discovery Route Repair

1. Route Discovery 当单播消息从一台设备发送到另一台设备&#xff0c;并且没有预先存在的路由时&#xff0c;会发起路由发现。 我们假设没有现有的路由&#xff0c;因此网络软件将开始路由发现过程。为简单起见&#xff0c;假设所有设备的路由表都为空。 以设备A向设备C发送…

Java对象在什么时候被销毁?

在Java中&#xff0c;对对象的销毁主要是由Java 的垃圾回收机制&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;管理的&#xff0c;开发者一般无需显式地进行对象销毁。 当一个对象在内存中不再被任何地方引用的时候&#xff0c;它就会被视为“垃圾”&#xff0c…

[lesson49]多态的概念和意义

多态的概念和意义 函数重写回顾 父类中被重写的函数依然会继承给子类 子类中重写的函数将覆盖父类中的函数 通过作用域分辨符(::)访问父类中的同名成员 多态的概念和意义 面向对象中期望的行为 根据实际的对象类型判断如何调用重写函数父类指针(引用)指向 父类对象则调用…

【LeetCode】---118.杨辉三角

一、题目解析&#xff1a; 二、知识回顾&#xff1a; 1.二维数组&#xff1a; 2. C语言中的二维数组访问方式和vector二维数组的访问&#xff0c; 不同区别&#xff1a; &#xff08;1&#xff09;表面是一样的&#xff0c;但底层不同&#xff01; &#xff08;2&#xff09;静…

JAVA 项目<果园之窗>_2

上节主要是理论流程&#xff0c;这次直接用实际例子过一遍整个流程 目标是向数据库添加一个员工 上述是前端页面&#xff0c;点击保存 浏览器向我后端发送http请求 后端这一部分专门接收employee请求 在这里对http post请求进行转换成JAVA数据&#xff0c;并处理数据&#xff…

在linux系统中启动pycharm

1.找到pycharm的安装路径&#xff0c;一般在下载文件夹中 2.进入pycharm的安装路径&#xff0c;进入bin目录 3.右击&#xff0c;打开终端&#xff0c;输入./pycharm.sh

奇妙的探索——偶然发现的bug

今天想在腾讯招聘官网找几个前端的岗位投一下&#xff0c;最近自己也在找工作&#xff0c;结果简历还没有投出去&#xff0c;就发现了腾旭招聘官网的3个前端bug。 1.有时候鼠标hover还没有滑倒下拉选框的菜单上&#xff0c;就消失了&#xff0c;消失的太快了&#xff0c;根本点…

为智算产业高质量发展探寻路径,又一重要生态合作启动

4月22日&#xff0c;由中国工业经济联合会主办的“2024中国工业经济高峰论坛智能算力产业高质量发展论坛”落幕。院士专家、研究机构、以及来自智能算力产业上下游企业代表近180人出席&#xff0c;围绕完善算力基础设施、深化算力赋能行业应用、推动区域数字化发展等热点议题展…

信息物理系统技术概述_2.信息物理系统的建设和应用

1.CPS应用场景概览 目前&#xff0c;CPS受到工业领域的广泛关注&#xff0c;并已在多个环节得到应用和体现。通过对目前CPS在工业领域中的应用程度、重要性、代表性进行筛选和考量&#xff0c;本文选择从智能设计、智能生产、智能服务、智能应用这四个方面&#xff0c;结合CPS的…

Linux加强篇-Vim编辑器

目录 ⛳️推荐 Vim文本编辑器 编写简单文档 配置主机名称 配置网卡信息 配置软件仓库 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 Vim文本编辑器 在Linux系统中一切都…

重磅发布 | 《网络安全专用产品指南》(第一版)

2017年6月1日&#xff0c;《中华人民共和国网络安全法》正式实施&#xff0c;明确规定“网络关键设备和网络安全专用产品应当按照相关国家标准的强制性要求&#xff0c;由具备资格的机构安全认证合格或者安全检测符合要求后&#xff0c;方可销售或者提供。国家网信部门会同国务…

MySQL 基础语法(3)

文章目录 SELECT 语句WHERE 语句ORDER BYLIMIT 语句UPDATAE 语句DELETE 语句TRUNCATE插入查询结果聚合函数 本文内容主要是表数据查询的基本语法 库结构基础语法 表结构基础语法 SELECT 语句 全列查询 SELECT * FROM 表名;生产情况下几乎不能用&#xff0c;会导致MySQL服务器…

区区几行Python代码,就能实现全面自动探索性数据分析!

探索性数据分析是数据科学模型开发和数据集研究的重要组成部分之一。在拿到一个新数据集时首先就需要花费大量时间进行EDA来研究数据集中内在的信息。自动化的EDA Python包可以用几行Python代码执行EDA。在本文中整理了10个可以自动执行EDA并生成有关数据的见解的Python包&…

Java -- (part17)

一.等待唤醒 wait():线程等待,等待的过程中,释放锁,需要其他线程用notify去唤醒 notify():唤醒一个等待的线程,如果有多个线程等待,随机一条唤醒 notifyAll():唤醒所有等待的线程 二.Lock锁 1.概述 接口 2.使用 a.获取:ReentrantLock b.方法 lock():获取锁 unlock()…

ROM修改进阶教程------安卓7_____安卓13去除签名验证操作步骤解析

同类博文: 安卓玩机搞机技巧综合资源-----修改rom 制作rom 解包rom的一些问题解析【二十一】_qcn改区域锁-CSDN博客 安卓系列机型rom修改。如果你删减了系统相关的app。那么严重会导致开机系统卡米 定屏等问题。这类一般都是系统签名验证导致的。而破解签名验证一般都是修改…

API接口的用途以及接入示例

API接口的主要用途是允许不同的软件系统之间进行通信和数据交换。具体来说&#xff0c;API接口可以用于以下几个方面&#xff1a; 数据传输和交换&#xff1a;API接口可以用于不同系统之间的数据传输和交换&#xff0c;例如将数据从一个系统传递到另一个系统&#xff0c;或者从…

【springBoot】资源文件的变量替换

在Spring Boot项目中&#xff0c;可以从application.yml或application.properties中获取pom.xml中定义的变量。为了实现在application.yml中使用pom.xml中的属性&#xff0c;通常需要在构建过程中将这些属性注入到资源文件中。以下是实现这一目标的几种方法&#xff1a; 方法1…

component-全局透明遮罩层与点击遮罩层关闭

1.创建Overlay.vue的全局组件或子组件&#xff0c;用于显示透明遮罩层。 <template><div class"overlay" click"closeOverlay"></div></template><script>export default {methods: {closeOverlay() {// 子组件调用父组件方…

【office安装错误1402或1406】

office安装错误1402或1406 错误如图 解决方法 打开autoremove&#xff0c;点击扩展&#xff0c;输入1402&#xff0c;点击搜索 等待修复成功&#xff0c;再尝试安装office 软件每周六选择其他登录方式可以免费使用