(五)Web前端开发进阶2——AJAX

目录

2.Axios库

 3.认识URL

4.Axios常用请求方法

5.HTTP协议——请求报文/响应报文

6.前后端分离开发

7.Element组件库


1.Ajax概述

AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。简单点说,就是使用XMLHttpRequest 对象与服务器通信。它可以使用 JSON,XML,HTML 和 text 文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。简单来说,AJAX 是浏览器与服务器进行数据通信的技术

同步操作与异步操作的区别:同步操作就是当客户端在接收服务器端的响应时,进行其他任何操作都得不到响应,比如正在加载网页的时候,你点击网页加载出来的东西没用(同步等于死磕)

Ajax如何学习:

  • 先掌握 axios 使用
  • 再了解 XMLHttpRequest 原理

2.Axios库

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ajax&Axios的简单使用</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: "http://hmajax.itheima.net/api/province"}).then(result => {console.log(result)console.log(result.data.list)})</script>
</body>
</html>

 3.认识URL

URL:统一资源定位符(Uniform Resource Locator),俗称网页地址,简称网址,是因特网上标准的资源的地址(Address),如同在网络上的门牌,用于访问网络上的资源

一个URL网址分为三部分,以http://hmajax.itheima.net/api/province为例

  • http://是协议,规定了数据传输的规则,类似的还有https://   
  • hmajax.itheima.net是域名(必须),标记服务器在互联网中方位,类似于地址
  • /api/province是资源路径,标记资源在服务器下的具体位置,类似于房间

利用查询参数获取数据的语法:

<body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: "http://hmajax.itheima.net/api/city",params:{pname:"江西省"}}).then(result => {console.log(result)console.log(result.data.list)})</script>
</body>

4.Axios常用请求方法

请求方法:对服务器资源,要执行的操作

请求方法操作

get

从服务器获取数据
post向服务器提交数据
put修改数据(全部)
delete删除数据
patch修改数据(部分)
        axios({url: "服务器注册网址",method:"post",data:{username:"tianming",password:"123456"}}).then(result => {console.log(result)})

5.HTTP协议——请求报文/响应报文

HTTP协议:规定了浏览器发送及服务器返回内容的格式

请求报文:浏览器按照 HTTP 协议要求的格式,发送给服务器的内容

Content-Type表示发送的数据类型为json格式

6.前后端分离开发

7.Element组件库

Element是饿了么团队研发的,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

组件:组成网页的部件,例如 超链接、按钮、图片、表格、表单、分页条等等

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

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

相关文章

使用C#学习Office文件的处理(pptx docx xlsx)

Office文件 是指PPT 、word、Excel 这些常用工具生成的文件 &#xff0c;例如 pptx docx xlsx。 这些文件的读取和生成有很多很多库 例如 NOPI 、DevExpress、C1、Aspose、Teleric 等等&#xff0c;各有各的优缺点。俺今天不讲这个&#xff0c;俺只是讲讲如何了解Office文件的…

2020年下半年网络规划设计师上午真题及答案解析

1.在支持多线程的操作系统中&#xff0c;假设进程P创建了线程T1&#xff0c;T2&#xff0c;T3&#xff0c;那么下列说法中正确的是&#xff08; &#xff09;。 A.该进程中已打开的文件是不能被T1&#xff0c;T2和T3共享的 B.该进程中T1的栈指针是不能被T2共享&#xff0c;但…

Java 使用Maven Surefire插件批量运行单元测试

在基于Maven的Java项目中可以使用Maven 的 mvn test 命令来运行单元测试。 示例 有一个简单的Maven 项目&#xff0c; pom.xml 只导入了JUnit 5 的相关依赖&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://m…

Linux CentOS7下创建SFTP服务器

本文详细介绍了在Linux CentOS上部署安全文件传输协议&#xff08;SFTP&#xff09;服务器的全过程。SFTP基于SSH&#xff08;安全壳层协议&#xff09;提供文件传输服务&#xff0c;继承了SSH的安全特性&#xff0c;如数据加密、完整性验证和服务器认证等&#xff0c;确保数据…

电科金仓(人大金仓)更新授权文件(致命错误: XX000: License file expired.)

问题:电科金仓(人大金仓)数据库链接异常,重启失败,查看日志如下: 致命错误: XX000: License file expired. 位置: PostmasterMain, postmaster.c:725 解决方法: 一、下载授权文件 根据安装版本在官网下载授权文件(电科金仓-成为世界卓越的数据库产品与服务提供商)…

3D Gaussian Splatting代码详解(二):模型构建

3 模型构建 gaussians GaussianModel(dataset.sh_degree) 3.1 初始化函数 __init__ 构造函数 构造函数 __init__ 的主要作用是初始化 3D 高斯模型的各项参数和激活函数&#xff0c;用于生成 3D 空间中的高斯表示。 初始化球谐函数的参数&#xff1a; self.active_sh_degre…

一文讲明白大模型分布式逻辑(从GPU通信原语到Megatron、Deepspeed)

1. 背景介绍 如果你拿到了两台8卡A100的机器&#xff08;做梦&#xff09;&#xff0c;你的导师让你学习部署并且训练不同尺寸的大模型&#xff0c;并且写一个说明文档。你意识到&#xff0c;你最需要学习的就是关于分布式训练的知识&#xff0c;因为你可是第一次接触这么多卡…

Python毕业设计选题:基于协同过滤的校园音乐推荐系统小程序-django+uniapp

开发语言&#xff1a;Python框架&#xff1a;djangouniappPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 管理员登录界面 管理员功能界面 用户管理 音乐信息管理 音乐类型管理 留言板管…

【python】OpenCV—findContours(4.4)

文章目录 1、功能描述2、代码实现3、完整代码4、结果展示5、涉及到的库函数6、参考 1、功能描述 找出物体轮廓&#xff0c;根据 PCA 计算特征值和特征向量&#xff0c;绘制特征值和特征向量&#xff0c;来初步展示物体的方向 2、代码实现 导入库函数&#xff0c;读入图片&am…

Jmeter实际应用

环境准备 JDK1.8Jmeter 5.6.3 下载地址Jmeter 插件 下载地址 放到lib/ext下 常用命令 # 启动 sh jmeter# 集群模式下启动节点&#xff0c;不启动用不了集群 sh jmeter-server#生成ssl需要的证书, 这里会要求输入个密码&#xff0c;是要在jmeter中用的 keytool -import -ali…

Javaweb 实验4 xml

我发现了有些人喜欢静静看博客不聊天呐&#xff0c; 但是ta会点赞。 这样的人呢帅气低调有内涵&#xff0c; 美丽大方很优雅。 说的就是你&#xff0c; 不用再怀疑哦 实验四 XML 目的&#xff1a; 安装和使用XML的开发环境认识XML的不同类型掌握XML文档的基本语法了解D…

C#界面设计--9--fatal error C1083: 无法打开包括文件:“jruparse.h”: No such file or directory

1、VS2008-编译时报错“fatal error C1083: 无法打开包括文件:“jruparse.h”: No such file or directory” 2、问题出现的原因及解决方法 1、如果要引入的这些,h文件跟.cpp在同一个目录下&#xff0c;就不会出现这种问题&#xff0c;检査在工程的include目录下是不是真的存…

【机器学习】 15. SVM 支撑向量机 support vector machine,拉格朗日,软边界,核函数

SVM 支撑向量机 support vector machine&#xff0c;拉格朗日&#xff0c;软边界&#xff0c;核函数 1. 超平面边界 margin of hyperplane2. 边界越大的超平面越好原因 3. 线性模型通过决策边界分类4. SVM的问题5. 拉格朗日乘子与SVM结合求最大边界6. SVM软边界和硬边界7. 非线…

SpringBoot获取resources目录下的文件

在 Spring Boot 项目中&#xff0c;获取 resources 目录中的文件路径通常涉及到访问类路径资源&#xff08;classpath resources&#xff09;。Spring Boot 提供了一些工具类和方法&#xff0c;可以方便地访问这些资源。以下是一些常见的方法&#xff1a; 首先&#xff0c;我们…

GitLab代码仓管理安装配置使用

Gitlab介绍 GitLab是一个基于Git的开源项目管理工具&#xff0c;它集成了版本控制、代码审查、持续集成&#xff08;CI&#xff09;/持续部署&#xff08;CD&#xff09;、自动化测试等多种功能&#xff0c;是一个完整的DevOps平台。以下是对GitLab的详细介绍&#xff1a; 一…

C#/WinForm 基于ffmpeg视频流转GIF

源码&#xff1a;https://gitee.com/feng-cai/screenshot-recording

Pinctrl子系统pinctrl_desc结构体进一步介绍

往期内容 本专栏往期内容&#xff1a; Pinctrl子系统和其主要结构体引入 input子系统专栏&#xff1a; 专栏地址&#xff1a;input子系统input角度&#xff1a;I2C触摸屏驱动分析和编写一个简单的I2C驱动程序 – 末片&#xff0c;有往期内容观看顺序 I2C子系统专栏&#xff1a;…

基于OSS搭建在线教育视频课程分享网站

OSS对象存储服务是海量、安全、低成本、高持久的存储服务。适合于存储大规模非结构化数据&#xff0c;如图片、视频、备份文件和容器/虚拟机镜像等。 安装nginx wget https://nginx.org/download/nginx-1.20.2.tar.gz yum -y install zlib zlib-devel gcc-c pcre-devel open…

研究轮腿运动学方案的看法

本文学习自电科中山柳同学的方案分享 遇到的问题&#xff1a; 1、轮毂输出力矩不足以配合腿部收敛机体姿态&#xff08;即腿部关节输出和轮毂输出都被LQR拉大了&#xff0c;但是轮毂最大力矩不够用了&#xff09; 可以引入MPC对LQR输出的反馈增益矩阵K 进行反向增益&#xf…

Linux学习_11

第十章管理Linux的联网 主要包括配置网络&#xff0c;通过域名访问主机&#xff0c;从网站瞎子啊文件&#xff0c;VMware三种网络模式 配置网络 概念 网络接口是指网络中的计算机或网络设备与其他设备实现通讯的进出口&#xff0c;一般是指计算机的网络接口即网卡设备 从RHEL7开…