[Java Web]AJAX Axios | 一种结合HTML来取代传统JSP的技术
⭐作者介绍:大二本科网络工程专业在读,持续学习Java,努力输出优质文章
⭐作者主页:@逐梦苍穹
⭐所属专栏:Java Web
目录
- 1、AJAX
- 1.1、简介
- 1.2、作用
- 1.3、同步和异步
- 1.4、代码实现
- 1.4.1、服务端
- 1.4.2、客户端
- 1.4.2.1、完善
- 1.4.2.2、请求方式
- 1.4.3、window.XMLHttpRequest
- 2、axios
- 2.1、简介
- 2.2、代码案例
- 2.2.1、后端部分
- 2.2.2、前端部分
- 2.2.3、axios-0.18.0.js下载
- 2.3、请求方式别名
1、AJAX
1.1、简介
Ajax(Asynchronous JavaScript and XML)是一种用于在不重新加载整个网页的情况下,异步请求服务器数据并更新部分网页内容的Web开发技术。它通过JavaScript和XMLHttpRequest对象实现,允许浏览器异步地向服务器发送请求并处理响应,从而更新部分网页内容。
Ajax技术的优点在于,它可以提高网站的用户体验和性能,因为它能够异步地更新部分页面内容,而无需重新加载整个页面,从而减少了网络传输的数据量和服务器端的负载,缩短了响应时间,提高了网页的交互性和动态性。
简单来说:AJAX就是异步的JavaScript和XML
1.2、作用
AJAX 作用有以下两方面:
- 与服务器进行数据交换:通过AJAX可以给服务器发送请求,服务器将数据直接响应回给浏览器。
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验,等等…
现在就可以使用HTML+AJAX来替代之前的JSP。回顾之前提到过的流程图,使用AJAX前后区别如下:
1.3、同步和异步
同步和异步是指在进行任务时,任务完成的时间与代码执行的时间之间的关系。
同步任务会阻塞代码执行,直到任务完成并返回结果,而异步任务不会阻塞代码执行,而是在后台执行任务,并在任务完成后通知代码执行。
具体来说,同步任务是指在执行任务时,代码会一直等待任务完成并返回结果,然后才能继续执行下一条语句。同步任务的执行顺序是按照代码的顺序执行的,不能中断或者跳过。
异步任务是指在执行任务时,代码会立即继续执行下一条语句,而不会等待任务完成。异步任务会在后台执行,当任务完成后,会通知代码执行回调函数,通过回调函数获取任务结果。异步任务的执行顺序是不确定的,它可以中断、跳过,也可以在其他事件触发时再执行。
异步任务通常用于需要等待耗时操作的任务,例如向服务器发送请求、文件读取、定时器等。同步任务则适用于不需要等待的简单任务,例如变量赋值、计算等。
异步和同步的区别主要有以下几个方面:
- 执行顺序:同步任务按照代码的顺序执行,不能中断或跳过,而异步任务执行顺序不确定,可以中断、跳过或在事件触发时再执行。
- 阻塞:同步任务会阻塞代码执行,直到任务完成并返回结果,而异步任务不会阻塞代码执行,而是在后台执行任务。
- 回调函数:异步任务通常需要通过回调函数获取任务结果,而同步任务直接返回结果。
- 性能:异步任务通常比同步任务更高效,因为它可以在后台执行任务,而不会阻塞代码执行,从而提高了代码的性能。
下面通过两张图来更好的理解同步和异步的区别:
综上所述,异步和同步任务各有优缺点,需要根据具体的需求选择合适的任务类型。
1.4、代码实现
关于代码具体怎么写,可以在w3school中找到:w3school_AJAX
主要步骤有两个:编写服务端代码和客户端代码。
1.4.1、服务端
package com.xzl.web;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;/*** @author 逐梦苍穹* @date 2023/4/3 8:35*/
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.getWriter().write("hello AJAX");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
1.4.2、客户端
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//1、创建核心对象var xhttp;if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}else {//code for IE6,IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2、发送请求xhttp.open("GET","http://localhost:8080/Filter_war/ajaxServlet");xhttp.send();//3、获取响应xhttp.onreadystatechange = function (){if (this.readyState == 4 && this.status == 200){alert(this.responseText);}}</script>
</body>
</html>
客户端代码里面的ajax部分,在文档里面都能找到,直接复制即可。
下面是对上面代码中AJAX部分的解释说明:
- 创建核心对象:首先,我们使用 XMLHttpRequest 对象来发起异步请求。我们创建一个变量 xhttp,并通过if…else… 判断当前浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建一个 XMLHttpRequest对象并将其分配给变量 xhttp。否则,我们使用 ActiveXObject 创建 Microsoft.XMLHTTP 对象(这是Internet Explorer 早期版本中的 AJAX 实现),并将其分配给变量 xhttp。
- 发送请求:使用xhttp.open() 方法来配置 AJAX 请求。这里使用的是 GET 方法,并且将请求 URL 设置为"http://localhost:8080/Filter_war/ajaxServlet",这是一个用于处理 AJAX 请求的Servlet。open() 方法只是将请求发送到服务器,并不会等待服务器响应,因此我们还需要使用 send()方法将请求发送到服务器。
- 获取响应:当服务器响应返回时,我们可以使用xhttp.onreadystatechange 事件处理程序来处理响应。在事件处理程序中,我们首先检查 readyState属性是否等于 4,表示响应已经完成。然后,我们检查 status 属性是否等于200(HTTPS状态码,表示OK),表示服务器已经成功地响应了我们的请求。 如果两个条件都满足,我们就可以通过this.responseText 属性来获取服务器的响应内容,并通过 alert() 方法将其显示出来。
总之,这段代码演示了如何使用 AJAX 技术进行异步通信。我们首先创建一个 XMLHttpRequest 对象,然后使用它来发送 HTTP 请求,并使用事件处理程序来处理服务器的响应。这使得我们能够在不重新加载整个页面的情况下,从服务器获取数据并动态更新页面内容。
1.4.2.1、完善
客户端代码有一个地方可以进一步修改:
把==改成"===全等于。
=== 和 == 都是 JavaScript 中用于比较两个值的运算符,它们之间的主要区别在于它们比较值的方式和类型的转换。
== 运算符在比较两个值之前会先进行类型转换,如果两个值的数据类型不同,则会尝试将它们转换为相同的类型,然后再进行比较。例如,5 == “5” 的结果为 true,因为字符串 “5” 会被转换为数字 5,然后再和数字 5 进行比较。这种类型转换有时可能会导致意外的结果,因此在比较时需要特别小心。
=== 运算符则不会进行类型转换,它只会比较两个值的类型和值是否完全相同。如果两个值的类型不同,或者它们的值不完全相同,则返回 false。例如,5 === “5” 的结果为 false,因为它们的类型不同。
因此,通常推荐使用 === 运算符进行比较,因为它可以避免类型转换带来的问题。只有在特定的情况下,比如需要进行强制类型转换或者需要忽略类型的差异时,才使用 == 运算符。
1.4.2.2、请求方式
GET 还是 POST?
GET 比 POST 更简单更快,可用于大多数情况下。
不过,请在以下情况始终使用 POST:
● 缓存文件不是选项(更新服务器上的文件或数据库)
● 向服务器发送大量数据(POST 无大小限制)
● 发送用户输入(可包含未知字符),POST 比 GET 更强大更安全
1.4.3、window.XMLHttpRequest
window.XMLHttpRequest是一个全局对象,它是 AJAX 技术的核心之一,用于在不刷新页面的情况下向服务器发出 HTTP 请求,并异步获取响应。它是一个 JavaScript 对象,由浏览器提供的原生 API。
在现代浏览器中,window.XMLHttpRequest 已经成为标准的 AJAX 实现,可以通过它来发出异步请求,而不必刷新整个页面。在早期版本的 Internet Explorer 中,它是通过 ActiveXObject 来实现的。
使用 XMLHttpRequest,可以向服务器发送 GET 或 POST 请求,以及其他 HTTP 方法,如 PUT、DELETE 等。通过设置相应的请求头,还可以指定请求的数据类型和编码方式,以及处理响应的方式等。在请求发送后,可以通过 readyState、status 等属性和事件来跟踪请求的状态和获取服务器的响应。
总之,window.XMLHttpRequest 是一个非常强大和常用的对象,为 Web 应用程序提供了高效的异步数据交换机制。
2、axios
Axios官网是:https://www.axios-http.cn
2.1、简介
Axios就是对原生的AJAX进行封装,用于简化书写
Axios 是一个基于 Promise 的 HTTP 请求库,可以用于浏览器和 Node.js 环境下进行 AJAX 操作。它提供了丰富的 API,支持异步请求和响应拦截,支持请求和响应的数据转换、错误处理等功能,是一个功能强大、易于使用的 HTTP 客户端。
以下是 Axios 的一些主要特点:
- 支持浏览器和 Node.js 环境下的请求。
- 基于 Promise 实现,支持异步操作和链式调用。
- 支持请求和响应的拦截器,可以在请求或响应被处理前对它们进行拦截和修改。
- 支持请求和响应的数据转换,可以自动将 JSON 数据转换为 JavaScript 对象或将 FormData 转换为 URL-encoded 字符串等。
- 支持取消请求,可以在请求还没有完成时取消它们。
- 支持防止 CSRF 攻击,可以自动为每个请求添加 CSRF token。
- 支持错误处理,可以通过 catch 方法来处理请求和响应的错误。
使用 Axios 可以极大地简化前端开发中的 AJAX 操作,提高代码的可读性和可维护性,因此 Axios 已经成为目前最流行的 HTTP 请求库之一。
2.2、代码案例
代码实现依旧是后端代码和后端代码两部分:
2.2.1、后端部分
定义一个用于接收请求的AxiosServlet:
package com.xzl.web; /*** @author 逐梦苍穹* @date 2023/4/3 10:51*/import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("get...");String username = request.getParameter("username");System.out.println(username);response.getWriter().write("hello Axios");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("post...");this.doGet(request, response);}
}
2.2.2、前端部分
首先引入JS文件:
然后是发送请求(这里演示两种请求,get和post):
get:
post:
在js中{} 表示一个js对象,而这个js对象中有三个属性
get和post的代码区别:请求参数的区别。get是直接拼接在url上,post是写在data部分。
整体代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="js/axios-0.18.0.js"></script><script>axios({method:"get",url:"http://localhost:8080/Filter_war/axiosServlet?username=zhangsan"}).then(function (response) {alert(response.data)})// axios({// method:"post",// url:"http://localhost:8080/Filter_war/axiosServlet",// data:"username=zhangsan"// }).then(function (response) {// alert(response.data)// })</script>
</body>
</html>
测试:
没有问题
2.2.3、axios-0.18.0.js下载
下载链接:https://github.com/axios/axios
在dist文件夹里面,可以下载axios.js。
想要axios-0.18.0.js,可以在下面这个链接下载:https://github.com/axios/axios/releases/tag/v0.18.0
2.3、请求方式别名
为了方便起见, Axios 已经为所有支持的请求方法提供了别名。如下:
我们只需重点关注 get 请求和 post 请求
get和post的另一种书写方式:
两种方式都可以,第二种写起来更方便,第一种写法的可读性更高。
[Java Web]AJAX Axios | 一种结合HTML来取代传统JSP的技术相关推荐
- Java Web - Ajax技术
一 为什么会有Ajax技术的出现 想必大家肯定用过百度,当我们在百度的搜索框中输入文字的时候,下面就会自动出现你可能希望搜索的内容,但是页面中的其他内容都没有变化: 可以想象,这些内容都是根据在输入框 ...
- 在Tomcat中部署Java Web应用程序几种方式
在Tomcat中部署Java Web应用程序有两种方式:静态部署和动态部署.在下文中$CATALINA_HOME指的是Tomcat根目录. 一.静态部署 静态部署指的是我们在服务器启动之 ...
- java web ajax异步刷新页面,ajax自动刷新页面有关问题
当前位置:我的异常网» Java Web开发 » ajax自动刷新页面有关问题 ajax自动刷新页面有关问题 www.myexceptions.net 网友分享于:2013-12-19 浏览:21 ...
- java web ajax加载更多_Javaweb学习之Ajax
学习目的 1.全局刷新和局部刷新 全局刷新: 整个浏览器被新的数据覆盖. 在网络中传输大量的数据. 浏览器需要加载,渲染页面. 局部刷新: 在浏览器器的内部,发起请求,获取数据,改变页面中的部分内容. ...
- java web中td_Java匹马行天下之JavaWeb核心技术——JSP
Java匹马行天下之JavaWeb核心技术--JSP JSP动态网页技术 一.JavaWeb简介 一.什么是JavaWeb? JavaWeb是用Java技术来解决相关web互联网领域的技术总称. 需要 ...
- java Web发布的两种方式
一种是直接调用API: Endpoint.publish("http://192.168.14.117:8888/java6ws/Java6WS", new Java6WS()); ...
- java web常用权限方式,java web项目的几种权限控制方法
一.spring boot项目,使用@Configuration注入WebMvcConfigurer来实现拦截器 如: @Configuration public class HighersoftWe ...
- java web 读取配置文件两种方法
package com.tsinghua.getDataBaseConn; import java.io.IOException; import java.io.InputStream; import ...
- Java web 初入
Java Web应用的核心技术包括以下几个方面: ● JSP:进行输入和输出的基本手段. ● JavaBean:完成功能的处理. ● Servlet:对应用的流程进行控制. ● JDBC:是与数据库进 ...
最新文章
- oracle 学习笔记之触发器
- jquery 替换括号里面内容_EXCEL单元格里提取、删除或替换部分内容
- jdk7启动时报“java.lang.VerifyError:Expecting a stackmap frame at branch target”
- appium-在页面点击一下处理(一般处理提示蒙层)
- 利用Python制作王者荣耀出装小助手,引来了老板的注意!
- nlp-tutorial代码注释1-2,词向量、Word2Vec、Skip-gram简述
- Vim编辑器运用的五个技巧
- 分享三:mysql跨库查询
- matlab打乱矩阵行,matlab 中,怎么让一个矩阵按某一列排列,并且行也跟着变动?...
- python短时傅里叶变换_Python scipy 计算短时傅里叶变换(Short-time Fourier transforms)...
- ADS designguide无法使用解决办法
- chmod -R xxx 3位数字权限对照表
- 阿里云高级技术专家白常明:边缘云的技术挑战和应用创新
- 推荐一个好用的在线pdf压缩工具
- 【营销获客二】如何用企业微信搭建私域流量营销平台
- 保险经纪人是什么鬼?
- CAD(dxf、dwg格式)文件的读取和显示,真正实现通过代码预览CAD文件,包含解析dwg、dxf文件,可以提取标注信息,可以转换为pdf、png、tiff、gif等6种格式的文件,可以永久免费实用
- java+selenium+autoIt 实现下载(打印)功能
- 关于餐饮软件开源相关(2)
- 微信多开txt_电脑上登录多个微信(微信多开)教程
热门文章
- IEEE754标准表示浮点数(详解)
- ThreeJS导入外部obj和mtl
- 【论文阅读 - YolTrack】YolTrack:基于MTL的自动车辆实时多目标跟踪和分割
- 【单片机项目】基于STM32的智能小车设计(一)流程设计
- append()与prepend()的区别
- android 弹幕框架DanmakuFlameMaster,解决 控制Ui和弹幕点击的问题.
- 数字化转型实例:国家电网
- js解析json字符串为json对象,js解析json的6种方法
- Ubuntu16.0.4 安装rebar3指南
- 我的2022和2023(技术总结、开发工具简介和未来展望)