【ajax基础01】ajax简介

目录

一:ajax简介

1 什么是ajax

二:ajax使用

1 如何使用ajax

2 axios使用(重点)

三:案例

四:如何赚钱

一:ajax简介

1 什么是ajax

AJAX(Asynchronous JavaScript And XML )是一种在 Web 应用中通过异步发送 HTTP 请求向服务器获取内容,并使用这些新内容更新页面中相关的部分,而无需重新加载整个页面的 Web 开发技术。这可以让网页更具有响应性,因为只请求了需要更新的部分。

一开始的时候 AJAX 通过使用 XMLHttpRequest 接口实现,但是 fetch() API 更适合用于开发现代 Web 应用:更出色、更灵活、更好地与一些 Web 应用的基础技术相结合(如 Service Worker)。现代 Web 框架也为 AJAX 提供了抽象。

简言,ajax是浏览器与服务器进行数据通信的技术,从而实现页面数据的动态显示

二:ajax使用

1 如何使用ajax

  1. 引入axios库,用于与服务器进行数据通信
    1. 基于XMLHttpRequest封装,代码简单
  2. 再学习XMLHttpRequest对象的使用,了解AJAX底层原理

2 axios使用(重点)

  1. 引入axios.js库:cdn.jsdelivr.net/npm/axios/dist/axios.min.js
  2. 使用axios函数
    1. 传入配置对象
    2. 再用.then回调函数接收服务器返回的数据结果,并对数据做后续处理
//语法格式如下
axios({url:'目标资源地址'
}).then((result)=>{
//对服务器返回的数据做后续处理
})

三:案例

需求:服务器端获取数据后,将数据渲染到页面中

<div class="my-p"></div><!--1  引入axios --><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({//获取服务器数据的地址url: 'https://hmajax.itheima.net/api/province'}).then(result => {console.log(result)//找到result对象中,所需要的数据,将其渲染到页面中document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')})</script>

四:如何赚钱

现在是否厌倦了程序员朝九晚五的生活,想给自己生活寻找另一条路径;在校大学生是否愿意在校进行人生中的第一次创业,获取人生第一桶金;是否正在看此篇文章的你愿意通过五年努力,让自己开上梦想的中的车子;

那就从提升认知开始,加入微木的知识星球:微木的创业思考

专属于创业者的交流集中地,创业、认知提升找微木!

1 创业底层方法论

2 从千万本书书籍中挑选出的,人生必读书目清单。

3 认知提升学习资源(秘密)

4 寻找赚钱项目底层方法论

5 好书精华提炼

6 深度链接微木

每天仅需0.3元/天,欢迎加入专属于创业者的交流集中地,创业、认知提升找微木!

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

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

相关文章

展厅装修时候需要注意哪些细节

1、视觉方面 展厅应该具有很强的视觉冲击力。只有这样不论是领导视察还是合作的客户进行参观的时候才会对展厅产生浓厚的兴趣&#xff0c;同时产生一种亲和力&#xff0c;并直接加深对企业的识别度和记忆度。而个性化设计要跟企业文化相符合。这里&#xff0c;企业标志为寻求个…

为何云原生是未来?企业IT架构的颠覆与重构

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、什么是云原生 2、云原生的背景和起源 背景 起源 关…

[JS]数据类型

介绍 在计算中一切事物都是数据, 为了提高数据的存储和使用效率, 要对数据进行类型的分类 栈(操作系统): 由操作系统自动分配释放函数的参数值, 局部变量的值等, 其操作方式类似于数据结构中的栈; 基本数据类型存放在栈里面string, number, boolean, undefined, null 堆(操作…

matplotlib 创建多个子图

有些时候我们需要用for循环来创建多个子图&#xff0c;来对比特征。现在已画出8组随机数来作为示例。 from matplotlib import pyplot as plt import numpy as np #设置画布大小 figplt.figure(figsize(20,8)) #解决中文乱码问题 plt.rcParams[font.sans-serif] [SimHei] fo…

【2024最新精简版】Kafka面试篇

文章目录 Kafka和RabbitMQ什么区别讲一讲Kafka架构你们项目中哪里用到了Kafka?为什么会选择使用Kafka? 有什么好处 ?使用Kafka如何保证消息不丢失 ?消息的重复消费问题如何解决的 ?Kafka如何保证消费的顺序性 ?Kafka的高可用机制有了解过嘛 ?Kafka实现高性能的设计有了解…

[C#]winform基于opencvsharp实现黑白图像上色

【算法简介】 技术有时会提高艺术&#xff0c;但有时也会破坏艺术。着色黑白电影是一个可以追溯到1902年的古老想法。几十年来&#xff0c;许多电影创作者反对将黑白电影着色的想法&#xff0c;并将其视为对艺术的破坏。但今天它被接受为艺术形式的增强。该技术本身已经从艰苦…

PCB行业迈入数字化新时代,智能工厂引领未来制造

在传统的PCB生产过程中&#xff0c;人工操作、纸质记录、经验判断等方式占据了主导地位。然而&#xff0c;这种方式不仅效率低下&#xff0c;而且容易出现误差&#xff0c;导致产品质量不稳定。同时&#xff0c;随着市场竞争的加剧&#xff0c;客户对产品的交期、质量、成本等方…

自制HTML5游戏《开心消消乐》

1. 引言 游戏介绍 《开心消消乐》是一款基于HTML5技术开发的网页游戏&#xff0c;以其简单的操作方式、轻松的游戏体验和高度的互动性&#xff0c;迅速在社交平台上获得了广泛的关注和传播。玩家通过消除相同类型的元素来获得分数&#xff0c;游戏设计巧妙&#xff0c;易于上手…

力扣SQL50 项目员工 I ROUND AVG

Problem: 1075. 项目员工 I &#x1f468;‍&#x1f3eb; 参考题解 Code select project_id,ROUND(AVG(e.experience_years),2) as average_years FROMproject as p LEFT JOINemployee as e ONp.employee_id e.employee_id GROUP BYp.project_id;

SUSE linux 15的网络管理

1 手工配置网络 wicked提供了一种新的网络配置框架。自SUSE 12起&#xff0c;SUSE使用了新的网络管理工具wicked&#xff0c;这个是区别与其他常见发行版的。常见的发行版目前大多使用的是NetworkManager服务进行网络管理。 1.1 wicked网络配置 传统网络接口管理面临的挑战之…

sdlan如何智能组网?

【天联】组网是一款异地组网内网穿透产品&#xff0c;由北京金万维科技有限公司自主研发&#xff0c;旨在解决不同地区电脑与电脑、设备与设备、电脑与设备之间的信息远程通信问题。【天联】的操作简单、跨平台应用、无网络要求以及独创的安全加速方案等特点&#xff0c;使得它…

什么是局域网IP?

局域网IP&#xff08;Local Area Network IP&#xff09;指的是在局域网内使用的IP地址。局域网是指在某个地理区域内&#xff0c;由一组相互连接的计算机组成的小型网络&#xff0c;常见于家庭、学校、办公室等场所。局域网IP可以用来实现内网穿透&#xff0c;即在复杂的网络环…

【性能优化】表分区实践最佳案例

背景 随着数字化建设的持续深入&#xff0c;企业的业务规模迎来了高速发展&#xff0c;其数据规模也呈现爆炸式增长&#xff0c;如果继续使用传统解决方案&#xff0c;将所有数据存储在一个表中&#xff0c;对数据的查询和维护效率将是一个巨大的挑战&#xff0c;在这个背景下…

MySQL数据备份操作步骤

常见的数据备份命令 备份命令备份速度恢复速度介绍功能适用场景lvm2快照快快一般、支持几乎热备、速度快一般中小型数据量的备份cp快快物理备份、灵活性低很弱少量数据备份xtrabackup较快较快实现innodb热备、对存储引擎有要求强大较大规模的备份mysqldump慢慢逻辑备份、适用所…

【React】AntD组件---极客园--01.项目前置准备

项目搭建 基于CRA创建项目 CRA是一个底层基于webpack快速创建React项目的脚手架工具 # 使用npx创建项目 npx create-react-app react-jike# 进入到项 cd react-jike# 启动项目 npm start调整项目目录结构 -src-apis 项目接口函数-assets 项目资源文件&…

制作WIFI二维码,实现一键扫描连接WIFI

在现代社会&#xff0c;Wi-Fi已成为我们日常生活中不可或缺的一部分。无论是在家庭、办公室还是公共场所&#xff0c;我们都希望能够快速方便地连接到Wi-Fi网络。下面小编就来和大家分享通过制作WIFI二维码&#xff0c;来实现一键扫描就可以连接WIFI的方法。连接WIFI不用在告诉…

【仿真建模-anylogic】INetwork相关接口说明

Author&#xff1a;赵志乾 Date&#xff1a;2024-06-22 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 类图 2. 说明 INetwork为辊道网络、路线网路的顶层接口&#xff0c;其组成元素有节点和路径两种&#xff0c;对应的接口为INode、IP…

vue:vue2与vue3如何全局注册公共组件(包括涉及到的相关方法函数的讲解)

目录 第一章 vue2全局注册公共组件 1.1 方法一&#xff1a;逐个注册 1.2 方法二&#xff1a;批量注册 1.2.1 require.context()方法解释 第二章 vue3全局注册公共组件 1.1 方法一&#xff1a;逐个注册 1.2 方法二&#xff1a;批量注册 第一章 vue2全局注册公共组件 Vue…

[C++][数据结构][跳表]详细讲解

目录 0.什么是跳表&#xff1f;1.SkipList的优化思路2.SkipList的效率如何保证&#xff1f;3.SkipList实现4.SkipList VS 平衡搜索树 && Hash 0.什么是跳表&#xff1f; SkipList本质上也是一种查找结构&#xff0c;用于解决算法中的查找问题&#xff0c;跟平衡搜索树…

Linux测试服务器端口是否打开

前言 服务器端口在计算机网络通信中扮演着至关重要的角色&#xff0c;其作用可以归纳如下&#xff1a; 区分不同的应用程序或服务&#xff1a; 服务器端口用于标识和定位不同应用程序或服务在服务器上的通信入口。 通过不同的端口号&#xff0c;服务器可以同时运行多个应用程…