AJAX初步与原理

news2024/11/28 2:40:27

AJAX的语法

       服务器和浏览器之间的通信,AJAX可以在浏览器内访问另一服务器。服务器是存储数据的电脑。

AJAX是用axios库,与服务器进行数据通信。 

       

原理之后讲到Promise对象再讲,这里是axios函数内传参可以对服务器进行访问,然后对服务器访问成功内部会调用then传的参数(函数),否则会调用catch传的参数(函数)。

且调用then/catch函数传的函数时,参数是服务器返回的对象。

axios函数的参数是对象,对象内的url是目标资源地址,会访问对应的服务器。

axios函数的url

axios函数的参数对象且对象内的属性名也得是固定的,url,会访问url的属性值,

进行服务器访问。

url是统一资源定位符,网址。我们拿到属性值进行访问时,是可以通过网址来。域名能找到

是哪一台服务器,资源路径是服务器内的资源的路径。

传递时协议是传递的规定格式,和传回的格式。

常用请求方法

请求方法有以上的几种,且请求方法不同,进行的操作也不同,如果是GET,axios函数

调用时,会获取到信息在then回调函数的参数中有信息。如果时POST方法,调用时

会在回调函数的参数中有对应是否调用成功,且改服务器上资源的数据。

查询参数

在服务器对应的某一个资源上,有对应参数的下的资源,如果写了对应的条件,会找

对应资源下的资源数据。

查找数据可以直接写在url后面?参数名=值&参数名=值

或者写在params属性内,写对应的参数名:值。会去找会解析params属性下的对象,method

写查询的具体方法,写不同方法,可以对访问到的服务器资源进行对应的操作。返回不同的值。

如果是提交需要把提交的数据写在data属性值上,data对象上的属性值都是服务器上有的。

Http请求报文

当axios可以访问到服务器时,会发送请求报文。

HTTP协议的格式:

在网络的载荷/负载内可以查看请求和响应报文。

当给服务器Post两次,修改同一个值,会报错。

响应状态码可以看出是否请求成功。

接口文档

我们访问的服务器的网址都是特定的,且内部的params下的属性,和data修改的属性都是特定的

接口文档可以告诉我们要访问某一个服务器下的某些是那些属性/或者改变某些属性需要是网址下的那些属性。

form-serialize插件

引入该JS,JS下的serialize函数,第一个参数写DOM对象,且是表单对象,会查找该表单对象下所有name属性且有属性值的表单的value,name属性值作为对象的属性名。value作为对象的属性值,返回一个对象。且第二个参数,写对象,对象内有hash/empty可以控制返回对象。empty如果是true可以获取value值为空的,空字符串。我们可能将最后的对象传给服务器,以data/params需要和服务器内的属性名一样,设置name时。设置第二个参数的第一个hash如果是true,返回值是对象,false则是查询参数属性值=属性名&属性值=属性名。empty是是否获取value是空字符串的,value是字符类型。这种只是得到表单内的DOM对象的value但是不能修改,只是能得到,并不能改变这些值。

Bootstrap弹框

1.引入bootstrap.css/bootstrap.js文件

modal类的display:none,对于

标签上有这些属性,data-bs-toggle写以下几个属性,会对该DOM对象当何时点击/悬停等,对data-bs-target内选择器的整个标签,进行显示。只是引入css/js和html标签是隐藏的。

以上写了上述的属性,可以进行对应动作时,显示

boostrap构造函数有Modal构造函数,参数是对应的DOM对象,这个构造函数的show,hidden可以对传入的DOM对象显示/隐藏。弹窗,modal类开始。modal类开始的对象。

图片上传

我们如果是POST上传,获取没事,关键是上传,上传的 不是简单的数据,而是图片,不能直接和src一样,写地址,需要将图片包装成另一种对象,这种对象是FormData,将图片存入某个键中,append方法可以存入,且存入时不是src,时Files对象,change方法可以e.target.files[0]选中图片的该类型文件。且获取没事,传入data,内些数据,如果是普通的数据,需要属性名,则是对象,如果是图片则需要传FormData对象。传入之后的信息有对应的url,url是存入到服务器的哪里的资源能访问到这个图片。我们如果get去获取图片,知道也是可以的。

AJAX原理

XHR

该构造函数的实例send方法可以访问服务器,且也会看实例对象的方法,和地址,实例对象的方法和地址通过open方法写到实例对象中,loadend事件触发是请求结束(响应也是请求过程)

请求结束,会调用事件的方法,且实例对象此时有response,是字符串。如果是POST方法,请传递的数据需要放到send方法内作为参数,且需要JSON字符串,就写成字符串,AJAX内部是用这个构造函数进行服务器访问。写data对象可以自动换。POST需要再写set...方法,到实例对象内,send方法访问时看这些。

Promise对象

promise对象.then方法和catch方法,传入参数,参数函数可以存入实例对象内。new Promise

时,new Promise参数是函数时,构造函数Promise会调用这个函数,传入的参数第一个和第二个是then里面参数,catch会放的地址。

第一个函数调用则会将then传入的参数排到任务队列,并且将resolve的参数作为then内函数的参数。另一个同理,且调用resolve/reject会改变Promise的状态.状态只能改变一次,也只能将任务队列放入一次。第二次改变的函数无效果。

axios库的函数参数传入对象,axios函数内部是调用Promise函数,且调用XHL,传入服务器,且内有异步,当调用reject等函数,给then,调用。loadend,有事件/set...会等主线程执行完,再执行.

疑问?返回信息response???

then/catch的传入的函数的参数都是xhr.response。

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

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

相关文章

Go新项目-调研关于go项目中redis的使用场景,lua实战(7)

文章目录 参考地址redis的使用场景的解释1、缓存2、排行榜3、计数器4、分布式会话5、分布式锁6、社交网络7、最新列表8、消息系统9、地理位置10、搜索引擎 常用命令实际场景1、缓存2、数据共享分布式3、分布式锁4、全局ID5、计数器6、限流7、位统计8、购物车9、用户消息时间线t…

【数据分析实战】冰雪大世界携程景区游客客源分布pyecharts地图

文章目录 引言数据集展示Python代码可视化展示本人浅薄分析 写在最后 今年冬天,哈尔滨冰雪旅游"杀疯了",在元旦假期更是被南方游客"包场"。据哈尔滨市文化广电和旅游局提供大数据测算,截至元旦假日第3天,哈尔…

第二讲_HarmonyOS应用创建和运行

HarmonyOS应用创建和运行 1. 创建一个HarmonyOS应用2. 运行新项目2.1 创建本地模拟器2.2 启动本地模拟器2.3 在本地模拟器运行项目 1. 创建一个HarmonyOS应用 打开DevEco Studio,在欢迎页单击Create Project,创建一个新工程。 选择创建Application应用。…

redis数据安全(三)数据持久化 AOF

接上一篇RDB,本篇看下Redis数据持久化的第二种方式AOF。 目录 一、AOF原理 1、写入机制: 2、缓冲机制: 3、重写机制 : 4、运行流程 二、AOF文件配置 1、开启AOF: 2、自动触发AOF重写 3、重写规则&#xff1…

VRPSolverEasy:支持VRP问题快速建模的精确算法Python包

文章目录 前言一步步安装免费版主要模块介绍1. depot point2. customer point3. links4. vehicle type VRPTW 算例数据说明模型建立输出求解状态及结果 前言 VRPSolverEasy 是用于车辆路径问题(VRP)的最先进的分支切割和定价算法求解器1,它的…

苹果要在iPhone上运行AI大模型?

近两年,人工智能(AI)技术已经成为各大科技公司的重点研究领域,苹果公司自然也不甘落后。最新消息称,苹果甚至打算在iPhone上直接运行AI大模型... 据苹果AI研究人员表示,他们发明了一种创新的闪存利用技术&a…

云服务器CVM_云主机_云计算服务器_弹性云服务器

腾讯云服务器CVM提供安全可靠的弹性计算服务,腾讯云明星级云服务器,弹性计算实时扩展或缩减计算资源,支持包年包月、按量计费和竞价实例计费模式,CVM提供多种CPU、内存、硬盘和带宽可以灵活调整的实例规格,提供9个9的数…

用冒泡排序谈默认参数应用

前面在调用函数提到为了将信息打印到ofil中&#xff0c;前面提到的办法是 ofstream ofil("text_out1"); void bubble_sort(vector<int> vec){ } 在file scope中定义ofil&#xff0c;这是一个不受欢迎的举动。这样比较难在其他环境重用 一般的程序编写法则是&…

本周五上海见 第二届证券基金行业先进计算技术大会暨2024低时延技术创新实践论坛(上海站)即将召开

低时延技术是证券基金期货领域业务系统的核心技术&#xff0c;是打造极速交易系统领先优势的关键&#xff0c;也是证券基金行业关注的前沿技术热点。 1月19日下午&#xff0c;第二届证券基金行业先进计算技术大会暨2024低时延技术创新实践论坛&#xff08;上海站&#xff09;即…

VL171 VL170配合LDR6020的type-c母座显示器方案

兼容基于VASEL控制引脚的10 Gbps USB3.2 Gen2和AM所有4通道视频&#xff0c;包括DP1.4 8.1 Gbps VL171配合LDR6020实现的type-c桌面显示器方案电路LDR6020是一个DRP的PD芯片&#xff0c;PD芯片与主机通讯完之后&#xff0c;通过PD芯片去控制VL171实现正反插与USB信号和DP信号的…

使用Go语言处理Excel文件的完整指南

xcel文件是广泛用于存储和处理数据的常见文件格式。在Go语言中&#xff0c;有许多库和工具可用于处理Excel文件。本文将介绍如何使用Go语言处理Excel文件&#xff0c;包括读取、写入和修改Excel文件&#xff0c;以及处理单元格、行和列等操作。无论是从头开始创建Excel文件&…

日期处理第一篇--优雅好用的Java日期工具类Joda-Time

日常开发中&#xff0c;处理时间和日期是很常见的需求。基础的java内置工具类只有Date和Calendar&#xff0c;但是这些工具类的api使用并不是很方便和强大&#xff0c;于是就诞生了Joda-Time这个专门处理日期时间的库。 简介 Joda-Time提供了Java日期处理的优雅的替代品&…

Gorm 应用开发时区问题与unique唯一索引字段数据冲突问题

文章目录 一、定义表模型时区问题1.1 time.Time 与int641.2 优势 二、unique唯一索引字段数据冲突问题 一、定义表模型时区问题 1.1 time.Time 与int64 一般情况下&#xff0c;我们在定义表模型的时候&#xff0c;会使用time.Time&#xff0c;但是会根据当前时间存储。返回给…

Javascript,到底要不要写分号?

小白随机在互联网上乱丢一些赛博垃圾&#xff0c;还望拨冗批评斧正。 要不要加分号&#xff1f; 先说结论&#xff1a;“不引起程序出错的前提下&#xff0c;加不加都可以&#xff0c;按自身习惯来。” 为什么JS可以不加分号&#xff1f; 实际上&#xff0c;行尾使用分号的风…

深度学习记录--归—化输入特征

归化 归化输入(normalizing inputs),对特征值进行一定的处理&#xff0c;可以加速神经网络训练速度 步骤 零均值化 通过x值更新让均值稳定在零附近&#xff0c;即为零均值化 归化方差 适当减小变量方差 解释 归化可以让原本狭长的数据图像变得规整&#xff0c;梯度下降的…

JavaScript基础(27)_内联样式的获取和修改、获取元素当前显示的样式

内联样式的获取和修改 获取元素的内联样式&#xff1a; 语法&#xff1a;元素.style.样式名 注意&#xff1a;通过style属性设置和读取的都是内联样式&#xff0c;无法读取样式表中的样式。 修改元素的内联样式&#xff1a; 语法&#xff1a;元素.style.样式名 样式值比如…

Apache JMeter 3.1压力测试监控服务器数据(cpu、内存、磁盘io等)

Apache JMeter 3.1压力测试 Apache JMeter 3.1压力测试监控cpu、内存情况1.下载Apache JMeter 3.11.1 添加线程组1.2 添加http请求1.3 增加http请求头设置1.4 添加csv配置1.5 添加测试结果监控配置 2. 监控插件下载3. 服务端插件下载并启动3.1 下载3.2 解压并启动3.3 增加服务器…

136基于matlab的自适应滤波算法的通信系统中微弱信号检测程序

基于matlab的自适应滤波算法的通信系统中微弱信号检测程序&#xff0c;周期信号加入随机噪声&#xff0c;进行滤波&#xff0c;输出滤波信号&#xff0c;程序已调通&#xff0c;可直接运行。 136 matlab自适应滤波算法LMS (xiaohongshu.com)

提高支撑座效率的重要性

自动化机械设备在运行过程中需要消耗大量的能源和资源&#xff0c;提高效率意味着更有效地利用这些资源&#xff0c;降低运行成本&#xff0c;而支撑座作为自动化机械设备中重要的传动元件&#xff0c;提高支撑座的效率对于自动化机械设备的可持续发展和企业的竞争力具有重要意…

2024华数杯国际赛A题B题思路及代码!

大家好&#xff0c;这里是本次华数杯国际数学建模竞赛的AB题思路代码讲解贴。 关于思路&#xff0c;可以移步我的视频讲解&#xff1a; 2024华数杯国际赛数学建模选题建议及初步思路&#xff01;_哔哩哔哩_bilibili 本篇主要讲解代码。 问题A&#xff1a;日本放射性废水 对…