当前位置: 首页 > news >正文

JavaWeb 19 AJAX

目录

一、什么是AJAX

同步交互和异步交互

同步交互

异步交互

Ajax工作原理

Ajax实现方式

原生JavaScript方式进行ajax(了解):


"我就是希望你好,就像很多人希望我好一样,特别简单,特别真挚。也不为了什么,就是希望你好"

                                                                                                                            —— 24.10.13

一、什么是AJAX

AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML)

AJAX不是新的编程语言,而是一种使用现有标准的新方法;

AJAX最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容;

AJAX不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行;

XMLHttpRequest 只是实现 Ajax 的一种方式;


同步交互和异步交互

同步交互

异步交互


Ajax工作原理

简单来说,我们之前发的请求通过类 form 表单标签、a标签这种方式。现在通过运行js代码动态决定什么时侯发送什么样的请求;

通过运行JS代码发送的请求浏览器可以不用跳转页面 ,我们可以在JS代码中决定是否要跳转页面;

通过运行JS代码发送的请求,接收到结果后,我们可以将结果通过dom编程到渲染到页面的某些元素 上,实现局部更新;


Ajax实现方式

类比数据库交互方式JDBC

1 原生JS的实现方式               代码繁琐 涉及到回调函数问题                 原生JDBC
2 第三方封装好的工具             jquery                                                      BaseDAO
3 使用框架                               VUE axios                                                Mybatis

原生JavaScript方式进行ajax(了解):

<script>function load MLDoc(){var xmlhttp=new MLHttp e uest();// 设置回调函数处理响应结果xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}// 设置请求方式和请求的资源路径xmlhttp.open("GET","/try/a ax/a ax_info.txt",true);// 发送请求xmlhttp.send();}</script> 

相关文章:

JavaWeb 19 AJAX

目录 一、什么是AJAX 同步交互和异步交互 同步交互 异步交互 Ajax工作原理 Ajax实现方式 原生JavaScript方式进行ajax(了解)&#xff1a; "我就是希望你好&#xff0c;就像很多人希望我好一样&#xff0c;特别简单&#xff0c;特别真挚。也不为了什么&#xff0c;就是希望…...

element plus中menu菜单技巧

我在使用element plus的menu&#xff08;侧边栏&#xff09;组件的过程中遇到了一些问题&#xff0c;就是menu编写样式和路由跳转&#xff0c;下面给大家分享以下&#xff0c;我是怎么解决的。 1.页面效果 我要实现的网站布局是这样的&#xff1a; 侧边栏折叠以后的效果&#…...

数据结构-贪心算法笔记

前言&#xff1a;贪心无套路&#xff0c;狠狠刷就完事 分发饼干 455. 分发饼干 - 力扣&#xff08;LeetCode&#xff09; class Solution {/*** 找出最多有多少个孩子可以得到糖果。** param g 一个数组&#xff0c;表示每个孩子对糖果大小的满意度。* param s 一个数组&…...

基于SpringBoot的在线汽车票预订平台

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理汽车票网上预订系统的相关信息成为必然。开…...

ubuntu 安装nginx

sudo apt-get update sudo apt-get install nginx sudo nginx -vsudo systemctl status nginx sudo systemctl start nginx sudo systemctl stop nginx sudo systemctl restart nginx#浏览器输入&#xff1a;http://192.168.31.181/#查看文件结构 cd /etc/nginx sudo cp nginx.…...

fanuc远程PNS启动

参考 PNS & RSR区别 前者是8bit255 个程序 后者是bitN对应8个程序...

使用 Spring 框架构建 MVC 应用程序:初学者教程

Spring Framework 是一个功能强大、功能丰富且设计精良的 Java 平台框架。它提供了一系列编程和配置模型&#xff0c;旨在简化和精简 Java 中健壮且可测试的应用程序的开发过程。 人们常说 Java 太复杂了&#xff0c;构建简单的应用程序需要很长时间。尽管如此&#xff0c;Jav…...

集成Spring Security详解

集成Spring Security详解 一、Spring Security简介 Spring Security是一个功能强大且高度可定制的身份验证和访问控制框架&#xff0c;它专注于为Java应用程序提供全面的安全解决方案。作为Spring项目的一部分&#xff0c;Spring Security继承了Spring框架的灵活性和可扩展性…...

Kettle9.4支持Clickhouse数据源插件开发以及性能测试

前言 最近业务这边有个指标需要用到大数据这边的列式数据库进行处理&#xff0c;由于kettle不支持clickhouse数据源驱动&#xff0c;这里查了一下网上的相关资料&#xff0c;发现了一些别人开发好的驱动包&#xff0c;下载下来后使用效果不尽人意。总结下来有以下几个问题&…...

微信支付V3 yansongda/pay 踩坑记录

Pay - 让支付开发更简单 | Pay 使用laravel 8框架 2.1 报错 Parse [mch_public_cert_path] Serial Number Error 是mch_secret_cert&#xff0c;mch_public_cert_path配置错误 2.2 报错 Get Wechat Public Cert Error 是mch_secret_key配置错误 #正确 Pay::config(config(w…...

AndroidStudio实验报告——实验一、二

目录 实验一&#xff1a; AS安装与安卓环境搭建 一、实验目标 二、实验内容 &#xff08;一&#xff09;Android Studio安装 &#xff08;二&#xff09;JDK安装与配置 &#xff08;三&#xff09;Android SDK安装与配置 三、实验结果&#xff1a;&#xff08;实…...

Nginx超简洁知识:负载均衡-反向代理,动静分离,配置文件

首先介绍一下为什么需要nginx&#xff1f; 在低并发场景下&#xff08;也就是用户量特别少的情况下&#xff09;&#xff0c;我们只需要部署一台服务器就能满足用户数量少的需求。 但是如果用户量逐渐增多&#xff0c;只有一台服务器是不够的。于是我们需要部署多台服务器。 …...

云手机:社交平台运营的热门工具

随着互联网的飞速发展&#xff0c;社交平台已经成为企业推广和营销的核心渠道。传统的运营方式已经无法满足高效运营的需求&#xff0c;而云手机作为新兴工具&#xff0c;逐渐成为社交平台运营的前沿趋势。本文将深入分析云手机如何优化社交平台的运营流程&#xff0c;助力企业…...

iptables限速规则

环境&#xff1a; iptables服务器&#xff1a;172.16.12.33 client&#xff1a;192.168.1.2 1、在防火墙上配置客户端的下载速度是1M/s &#xff08;1个包是1.3KB&#xff09; #限速客户端每秒的下载速度是1024KB&#xff0c;超出限制的流量就丢弃 [rootiptables-172-16-12-…...

易泊车牌识别:海外车牌快速定制,开启智能识别新时代

在当今数字化快速发展的时代&#xff0c;车牌识别技术已经成为了智能交通系统中不可或缺的一部分。而在众多车牌识别解决方案中&#xff0c;易泊车牌识别系统以其卓越的性能和独特的优势脱颖而出&#xff0c;尤其是在海外车牌快速定制方面&#xff0c;更是展现出了强大的实力。…...

同一个交换机不同vlan的设备为什么不能通信

在同一个交换机上&#xff0c;不同 VLAN 的设备不能直接通信&#xff0c;这是因为 VLAN&#xff08;虚拟局域网&#xff09;通过在数据链路层&#xff08;OSI 第2层&#xff09;对设备进行逻辑隔离&#xff0c;将不同 VLAN 的设备视为属于不同的网络。具体原因如下&#xff1a;…...

《业务三板斧:定目标、抓过程、拿结果》读书笔记4

管理者抓技能的第二个动作是构地图 管理者如何构建能力地图&#xff1f; 梳流程 构建能力地图的关键是梳理业务流程&#xff0c;明确“要做什么”及“怎么 做”。管理者只有明晰每一项业务流程对应的策略、关键举措、风 险、工具、话术、案例等&#xff0c;才能将方法复制给每一…...

PRCV 2024 - Day2

主会场 —— 主旨报告 报告题目&#xff1a;大模型背景下的数字内容取证 讲者&#xff1a;谭铁牛(中科院自动化所&#xff0c;中国科学院院士) 图1 大模型背景下的数字内容取证 在数字化时代&#xff0c;随着人工智能技术的迅猛发展&#xff0c;尤其是深度学习的广泛应用&…...

大厂面试真题-了解云原生吗,简单说一下docker和k8s

K8s&#xff08;Kubernetes&#xff09;和Docker都是容器化技术中的关键组件&#xff0c;但它们各自扮演着不同的角色。以下是对这两者的详细解析&#xff1a; 一、Docker Docker是一个开源的容器化平台&#xff0c;它允许开发人员将应用程序及其依赖项打包为一个独立的镜像&…...

Python基础入门

目录 1. 简介 2. 安装与设置 2.1 检查是否已安装Python 2.2 使用Python解释器 2.3 使用代码编辑器 3. Python基础语法 3.1 注释 3.2 变量和数据类型 3.3 输入输出 3.4 基本运算 4. 条件语句与循环 4.1 条件判断 4.2 循环 while循环 for循环 break与continue 5.…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...