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

目录

1.Ajax概述

2.Axios库

 3.认识URL

4.Axios常用请求方法

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

6.HMLHttpRequest对象

7.前后端分离开发(接口文档)

8.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协议:Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器发送及服务器返回内容的格式

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

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

6.HMLHttpRequest对象

使用XMLHttpRequest对象的步骤:

  1. 创建XMLHttpRequest 对象
  2. 配置请求方法和请求 url 地址
  3. 监听 loadend 事件,接收响应结果
  4. 发起请求

7.前后端分离开发(接口文档)

那么什么是接口文档呢?接口文档是描述接口的文章(后端工程师)
接口:使用 AJAX和服务器通讯时,使用的 URL,请求方法,以及参数,如下所示url、method、pname就是接口,接口文档里需要声明这些信息

        axios({url: "服务器注册网址",method:"post",param:{pname:" "}})

8.Element组件库

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

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

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

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

相关文章

linux文件的权限

前言 在linux操作系统中&#xff0c;账户分为两类&#xff0c;一类是普通用户&#xff0c;一类是超级用户&#xff0c;普通用户在许多方面受权限约束&#xff0c;而超级用户几乎不受约束。 root账户和普通账户的切换 有三种方式能够切换账号 su su 直接使用&#xff0c;会弹…

【CSS3】css开篇基础(5)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

net framework 3.5组件更新失败错误代码0x80072f8f怎样解决

浏览器地址栏输入www.dnz9.com远程解决netframework问题 当遇到.NET Framework 3.5 组件更新失败&#xff0c;错误代码为 0x80072f8f 时&#xff0c;可以尝试以下几种解决方法&#xff1a; 一、检查网络连接和时间设置 网络连接 错误代码 0x80072f8f 通常与网络相关问题有关。首…

STM32F103C8T6学习笔记2--LED流水灯与蜂鸣器

1、简要说明与电路图 LED灯与蜂鸣器都是GPIO的输出操作&#xff0c;给高低电平实现。GPIO操作也是后续操作的基础&#xff0c;没有什么难度&#xff0c;记不住寄存器没关系&#xff0c;只要把流程理清楚就可以了。 端口配置成推挽输出模式&#xff0c;高低电平均有驱动能力。 …

计算机网络网络层笔记

互联网提供的两种服务 1.虚电路服务 2.数据报服务 需要记住的是现在只用第二种也就是数据报服务 网际协议IP 物理层的中断系统:转发器(hub) 链路层的中断系统:交换机 网络层的中断系统:路由器 网络层以上:网关 如上图所示,网关是用来访问其他的网段的一个接口,网关的地…

大屏可视化:舞动数据与美观的“设计秘籍”

大屏可视化鉴赏&#xff1a;踏入软件系统产品设计之旅&#xff0c;让我们一同鉴赏那些闪耀在智慧农业、智慧园区、智慧社区及智慧港口等领域的大屏可视化杰作。每一帧画面&#xff0c;都是科技与创新的完美融合&#xff0c;数据跃然屏上&#xff0c;智慧触手可及。 >> 数…

持续基础怎么搞?Jenkins+Docker+Git实战

在如今的互联网时代&#xff0c;随着软件开发复杂度的不断提高&#xff0c;软件开发和发布管理也越来越重要。目前已经形成一套标准的流程&#xff0c;最重要的组成部分就是持续集成&#xff08;Continuous Integration&#xff0c;CI&#xff09;及持续部署、交付&#xff08;…

EDA --软件开发之路

之前一直在一家做数据处理的公司&#xff0c;从事c开发&#xff0c;公司业务稳定&#xff0c;项目有忙有闲&#xff0c;时而看下c&#xff0c;数据库&#xff0c;linux相关书籍&#xff0c;后面跳槽到了家eda公司&#xff0c;开始了一段eda开发之路。 eda 是 electric design …

「Mac畅玩鸿蒙与硬件10」鸿蒙开发环境配置篇10 - 项目实战:计数器应用

本篇将通过一个简单的计数器应用,带你体验鸿蒙开发环境的实际操作流程。本项目主要练习组件的使用、事件响应和状态管理,帮助开发者熟悉基本的应用构建流程。 关键词 计数器应用组件操作事件响应状态管理HarmonyOS 应用开发一、创建计数器项目 1.1 在 DevEco Studio 中新建项…

window快捷键:window + v 打开剪切板历史记录 / 非常实用

一、剪切板历史记录功能介绍 1.1、window v 打开剪切板历史记录 / 文字、图片都可记录 1.2、window v 最近使用 1.3、window v 表情符号 1.4、window v GIF 1.5、window v 颜文字 1.6、window v 符号 二、欢迎交流指正

寻找专业在线微信投票和点赞服务团队攻略

在当今的社交网络时代&#xff0c;微信投票和点赞活动日益频繁&#xff0c;无论是企业评选、才艺比赛还是个人荣誉的角逐&#xff0c;都可能需要一定的投票和点赞支持。然而&#xff0c;要找到领先、高效、专业的在线微信投票和点赞服务团队并非易事。以下是一些关键步骤和注意…

115页PPT华为管理变革:制度创新与文化塑造的核心实践

集成供应链&#xff08;ISC&#xff09;体系 集成供应链&#xff08;ISC&#xff09;体系是英文Integrated Supply Chain的缩写&#xff0c;是一种先进的管理思想&#xff0c;它指的是由相互间提供原材料、零部件、产品和服务的供应商、合作商、制造商、分销商、零售商、顾客等…

Games101 05~06 - Raterization 光栅化

1.Viewport Transformation视口变换&#xff1a; 1.1Canonical Cube 之前我们通过MVP矩阵把物体坐标变换到正方体中&#xff08;每个顶点的x&#xff0c;y&#xff0c;z坐标都应该在-1.0到1.0之间&#xff09;也被称为裁剪空间clip space&#xff0c;接下来我们需要将该空间映…

为Meta Spark准备3D模型

有许多工具可以帮助你为 Meta Spark Studio 创建 3D 对象&#xff0c;包括 Cinema4D、Blender 和 3ds Max。你还可以使用 Meta Spark Toolkit 优化 Blender 对象。 在本指南中&#xff0c;我们将介绍正确的设置&#xff0c;以便你可以成功地为 Meta Spark Studio 准备对象&…

shodan7,shodan参数使用,常用端口,Google语法

参数使用 alert shodan alert -h(查看帮助文档 这个就是怎么去配置ip监控)我们能在web页面上面去做&#xff0c;而且更加方便&#xff0c;所以就不多讲了 info shodan info(查看你查询的扫描的一些次数每个账户都是每个月有限制次数的)domain shodan domain(查询域名信息…

MATLAB/Simulink学习|在Simulink中调用C语言-04使用C Function 实现PI运算(使用模块自定义代码-仿真自定义代码)

在上一篇博客中&#xff0c;介绍了如何使用C Function 实现PI运算&#xff0c;但是在模块内编辑C代码&#xff0c;而不能直接调用已经写好了的C代码。 在Simulink中使用C Function调用自定义代码有两种方法&#xff0c;本篇博客介绍其中一种方法。 添加头文件和源文件 在实际…

博图V19的DB块,批量导入组态王

最近在使用组态王做一个厂区的DCS项目&#xff0c;plc选用西门子1500系列。一共用了3个1500&#xff0c;5个io站点。整个项目下来&#xff0c;点位大约有5000多个。把这5000多个点位&#xff0c;一个一个导入到组态王&#xff0c;无疑是一个非常非常非常难受的工作&#xff0c;…

Kafka相关API开发

(一)引入依赖 用API直接去操作kafka(读写数据)在实际开发中用的并不多&#xff0c;学习它主要还是为了加深对Kafka功能的理解。kafka的读写操作&#xff0c;实际开发中&#xff0c;是通过各类更上层的组件去实现。而这些组件在读写kafka数据时&#xff0c;用的当然是kafka的jav…

linux离线安装Ollama并完成大模型配置(无网络)

这篇文章主要分享两方面内容&#xff1a; 1&#xff09;在纯内网环境下如何部署ollama 2&#xff09;在纯内网环境下如何配置大模型 话不多说直接开始。 ①离线部署ollama 一、通过浏览器访问ollama官方安装脚本&#xff0c;获取脚本内容。复制里面的内容。 在Linux中执行…

Centos安装配置Jenkins

下载安装 注意&#xff1a;推荐的LTS版本对部分插件不适配&#xff0c;直接用最新的版本&#xff0c;jenkins还需要用到git和maven&#xff0c;服务器上已经安装&#xff0c;可查看参考文档[1]、[2]&#xff0c;本次不再演示 访问开始使用 Jenkins 下载jenkins 上传至服务器…