java中Ajax与Axios的使用

1，Ajax

1.1 概述

==AJAX (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。==

我们先来说概念中的 JavaScript 和 XML，JavaScript 表明该技术和前端相关；XML 是指以此进行数据交换。而这两个我们之前都学习过。

1.1.1 作用

AJAX 作用有以下两方面：

  1. 与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。如下图

我们先来看之前做功能的流程，如下图：

如上图，Servlet 调用完业务逻辑层后将数据存储到域对象中，然后跳转到指定的 jsp 页面，在页面上使用 EL表达式 和 JSTL 标签库进行数据的展示。

而我们学习了AJAX 后，就可以==使用AJAX和服务器进行通信，以达到使用 HTML+AJAX来替换JSP页面==了。如下图，浏览器发送请求servlet，servlet 调用完业务逻辑层后将数据直接响应回给浏览器页面，页面使用 HTML 来进行数据展示。

  1. 异步交互：可以在==不重新加载整个页面==的情况下，与服务器交换数据并==更新部分网页==的技术，如：搜索联想、用户名是否可用校验，等等…

上图所示的效果我们经常见到，在我们输入一些关键字（例如 奥运）后就会在下面联想出相关的内容，而联想出来的这部分数据肯定是存储在百度的服务器上，而我们并没有看出页面重新刷新，这就是 ==更新局部页面== 的效果。再如下图：

我们在用户名的输入框输入用户名，当输入框一失去焦点，如果用户名已经被占用就会在下方展示提示的信息；在这整个过程中也没有页面的刷新，只是在局部展示出了提示信息，这就是 ==更新局部页面== 的效果。

1.1.2 同步和异步

知道了局部刷新后，接下来我们再聊聊同步和异步:

  • 同步发送请求过程如下

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。

  • 异步发送请求过程如下

    浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

1.2 快速入门

1.2.1 服务端实现

在项目的创建 com.itheima.web.servlet ，并在该包下创建名为 AjaxServlet 的servlet

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 响应数据response.getWriter().write("hello ajax~");}
​@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
1.2.2 客户端实现

在 webapp 下创建名为 01-ajax-demo1.html 的页面，在该页面书写 ajax 代码

  • 创建核心对象，不同的浏览器创建的对象是不同的

     var xhttp;
if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();
} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

  • 发送请求

    //建立连接
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
//发送请求
xhttp.send();

  • 获取响应

    xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {// 通过 this.responseText 可以获取到服务端响应的数据alert(this.responseText);}
};

完整代码如下：

<!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/ajax-demo/ajaxServlet");xhttp.send();
​//3. 获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {alert(this.responseText);}};
</script>
</body>
</html>
1.2.3 测试

在浏览器地址栏输入 http://localhost:8080/ajax-demo/01-ajax-demo1.html ，在 01-ajax-demo1.html加载的时候就会发送 ajax 请求，效果如下

我们可以通过 开发者模式 查看发送的 AJAX 请求。在浏览器上按 F12 快捷键

这个是查看所有的请求，如果我们只是想看 异步请求的话，点击上图中 All 旁边的 XHR，会发现只展示 Type 是 xhr 的请求。如下图：

1.3 案例

需求：在完成用户注册时，当用户名输入框失去焦点时，校验用户名是否在数据库已存在

1.3.1 分析

  • 前端完成的逻辑

    1. 给用户名输入框绑定光标失去焦点事件 onblur

    2. 发送 ajax请求，携带username参数

    3. 处理响应：是否显示提示信息

  • 后端完成的逻辑

    1. 接收用户名

    2. 调用service查询User。此案例是为了演示前后端异步交互，所以此处我们不做业务逻辑处理

    3. 返回标记

整体流程如下：

1.3.2 后端实现

在 com.ithiema.web.servlet 包中定义名为 SelectUserServlet 的servlet。代码如下：

@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收用户名String username = request.getParameter("username");//2. 调用service查询User对象，此处不进行业务逻辑处理，直接给 flag 赋值为 true，表明用户名占用boolean flag = true;//3. 响应标记response.getWriter().write("" + flag);}
​@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
1.3.3 前端实现

将 04-资料\1. 验证用户名案例\1. 静态页面 下的文件整体拷贝到项目下 webapp 下。并在 register.html 页面的 body 结束标签前编写 script 标签，在该标签中实现如下逻辑

第一步：给用户名输入框绑定光标失去焦点事件 onblur

//1. 给用户名输入框绑定 失去焦点事件
document.getElementById("username").onblur = function () {}

第二步：发送 ajax请求，携带username参数

在 第一步 绑定的匿名函数中书写发送 ajax 请求的代码

//2. 发送ajax请求
//2.1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();
} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.2. 发送请求
xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet);
xhttp.send();
​
//2.3. 获取响应
xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {//处理响应的结果}
};

由于我们发送的是 GET 请求，所以需要在 URL 后拼接从输入框获取的用户名数据。而我们在 第一步 绑定的匿名函数中通过以下代码可以获取用户名数据

// 获取用户名的值
var username = this.value;  //this ： 给谁绑定的事件，this就代表谁

而携带数据需要将 URL 修改为：

xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);

第三步：处理响应：是否显示提示信息

当 this.readyState == 4 && this.status == 200 条件满足时，说明已经成功响应数据了。

此时需要判断响应的数据是否是 "true" 字符串，如果是说明用户名已经占用给出错误提示；如果不是说明用户名未被占用清除错误提示。代码如下

//判断
if(this.responseText == "true"){//用户名存在，显示提示信息document.getElementById("username_err").style.display = '';
}else {//用户名不存在 ，清楚提示信息document.getElementById("username_err").style.display = 'none';
}

综上所述，前端完成代码如下：

//1. 给用户名输入框绑定 失去焦点事件
document.getElementById("username").onblur = function () {//2. 发送ajax请求// 获取用户名的值var username = this.value;
​//2.1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.2. 发送请求xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);xhttp.send();
​//2.3. 获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {//alert(this.responseText);//判断if(this.responseText == "true"){//用户名存在，显示提示信息document.getElementById("username_err").style.display = '';}else {//用户名不存在 ，清楚提示信息document.getElementById("username_err").style.display = 'none';}}};
}

2，axios

Axios 对原生的AJAX进行封装，简化书写。

Axios官网是：https://www.axios-http.cn

2.1 基本使用

axios 使用是比较简单的，分为以下两步：

  • 引入 axios 的 js 文件

    <script src="js/axios-0.18.0.js"></script>

  • 使用axios 发送请求，并获取响应结果

    • 发送 get 请求

      axios({method:"get",url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){alert(resp.data);
})

    • 发送 post 请求

      axios({method:"post",url:"http://localhost:8080/ajax-demo1/aJAXDemo1",data:"username=zhangsan"
}).then(function (resp){alert(resp.data);
});

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数：

  • method 属性：用来设置请求方式的。取值为 get 或者 post。

  • url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。

  • data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 ==回调函数==，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

2.2 快速入门

2.2.1 后端实现

定义一个用于接收请求的servlet，代码如下：

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("get...");//1. 接收请求参数String username = request.getParameter("username");System.out.println(username);//2. 响应数据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 文件

    <script src="js/axios-0.18.0.js"></script>

  • 发送 ajax 请求

    • get 请求

      axios({method:"get",url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"
}).then(function (resp) {alert(resp.data);
})

    • post 请求

      axios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data:"username=zhangsan"
}).then(function (resp) {alert(resp.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>//1. get/* axios({method:"get",url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"}).then(function (resp) {alert(resp.data);})*/
​//2. post  在js中{} 表示一个js对象，而这个js对象中有三个属性axios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data:"username=zhangsan"}).then(function (resp) {alert(resp.data);})
</script>
</body>
</html>

2.3 请求方法别名

为了方便起见， Axios 已经为所有支持的请求方法提供了别名。如下：

  • get 请求 ： axios.get(url[,config])

  • delete 请求 ： axios.delete(url[,config])

  • head 请求 ： axios.head(url[,config])

  • options 请求 ： axios.option(url[,config])

  • post 请求：axios.post(url[,data[,config])

  • put 请求：axios.put(url[,data[,config])

  • patch 请求：axios.patch(url[,data[,config])

而我们只关注 get 请求和 post 请求。

入门案例中的 get 请求代码可以改为如下：

axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {alert(resp.data);
});

入门案例中的 post 请求代码可以改为如下：

axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {alert(resp.data);
})

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

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

相关文章

iOS开发Xcode中的ld64和-ld_classic是什么意思

iOS开发Xcode中的ld64和-ld_classic是什么意思

在iOS应用程序开发中&#xff0c;Xcode是一款广泛使用的集成开发环境&#xff08;IDE&#xff09;&#xff0c;而链接器是构建应用程序的关键组成部分之一。在Xcode中&#xff0c;我们常常会遇到两个重要的概念&#xff1a;ld64和-ld_classic。它们分别代表了默认链接器和经典链…
阅读更多...
前端大屏展示可视化——地图的绘制（持续更新）

前端大屏展示可视化——地图的绘制（持续更新）

一、ECharts 1、安装 npm install echarts2、引入 import * as echarts from echarts;3、渲染 3.1、前期准备&#xff0c;基础配置 // 地图实例 const myChart ref(null); // 地图配置 const option reactive({tooltip: {trigger: item,formatter: function (params) {re…
阅读更多...
电脑风扇控制温度软件 Macs Fan Control Pro 中文

电脑风扇控制温度软件 Macs Fan Control Pro 中文

Macs Fan Control Pro是一款专为Mac用户设计的风扇控制软件&#xff0c;旨在提供更精细的风扇转速控制和温度监控。这款软件通过实时监测Mac内部硬件的温度&#xff0c;自动或手动调整风扇的转速&#xff0c;以确保系统温度保持在理想范围内。 Macs Fan Control Pro提供了直观…
阅读更多...
【01】Linux 基本操作指令

【01】Linux 基本操作指令

带⭐的为重要指令 &#x1f308; 01、ls 展示当前目录下所有文件&#x1f308; 02、pwd 显示用户当前所在路径&#x1f308; 03、cd 进入指定目录&#x1f308; 04、touch 新建文件&#x1f308; 05、tree 以树形结构展示所有文件⭐ 06、mkdir 新建目录⭐ 07、rmdir 删除目录⭐…
阅读更多...
赋能未来社区：数据中台智慧园区的全方位解决方案_光点科技

赋能未来社区：数据中台智慧园区的全方位解决方案_光点科技

在信息技术与互联网快速发展的今天&#xff0c;传统的园区管理方式已无法满足时代对效率与智能化的追求。数据中台作为企业数字化转型的核心&#xff0c;正引领着智慧园区的发展趋势。一个集成了数据中台的智慧园区&#xff0c;不仅能有效地整合资源&#xff0c;优化管理流程&a…
阅读更多...
2024美赛数学建模B题思路+代码

2024美赛数学建模B题思路+代码

文章目录 1 赛题思路2 美赛比赛日期和时间3 赛题类型4 美赛常见数模问题5 建模资料 1 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 2 美赛比赛日期和时间 比赛开始时间&#xff1a;北京时间2024年2月2日&#xff08;周五&#xff…
阅读更多...
代码随想录算法刷题训练营day21

代码随想录算法刷题训练营day21

代码随想录算法刷题训练营day21&#xff1a;LeetCode(501)二叉搜索树中的众数、LeetCode(530)二叉搜索树的最小绝对差 LeetCode(501)二叉搜索树中的众数 题目 代码 import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;/*…
阅读更多...
【Linux】多线程（线程概念+线程控制）

【Linux】多线程（线程概念+线程控制）

&#x1f307;个人主页&#xff1a;平凡的小苏 &#x1f4da;学习格言&#xff1a;命运给你一个低的起点&#xff0c;是想看你精彩的翻盘&#xff0c;而不是让你自甘堕落&#xff0c;脚下的路虽然难走&#xff0c;但我还能走&#xff0c;比起向阳而生&#xff0c;我更想尝试逆风…
阅读更多...
旧物回收小程序：环保与便捷的完美结合

旧物回收小程序：环保与便捷的完美结合

随着社会的发展和人们生活水平的提高&#xff0c;消费行为也日益频繁&#xff0c;这导致了大量的废旧物品的产生。如何有效处理这些废旧物品&#xff0c;既保护环境&#xff0c;又节约资源&#xff0c;成为了一个重要的议题。此时&#xff0c;旧物回收小程序的出现&#xff0c;…
阅读更多...
跟着pink老师前端入门教程-day14+15

跟着pink老师前端入门教程-day14+15

2.6 main 主体模块制作 HTML&#xff1a; <div class"w"><div class"main"><!-- 焦点图模块 --><div class"focus"><ul><li><img src"./images/banner_bg.png" alt""></li>…
阅读更多...
python给word插入脚注

python给word插入脚注

1.需求 最近因为工作需要&#xff0c;需要给大量文本的脚注插入内容&#xff0c;我就写了个小程序。 2.实现 下面程序是我已经给所有脚注插入了两次文本“幸福”&#xff0c;给脚注2到4再插入文本“幸福” from win32com import clientdef add_text_to_specific_footnotes(…
阅读更多...
会议会务报名签到互动抽奖视频图片直播公众号开发

会议会务报名签到互动抽奖视频图片直播公众号开发

会议会务报名签到互动抽奖视频图片直播公众号开发 现在越来越多的人进行网络签到&#xff0c;特别是大型的会务/展会&#xff0c;网络签到进场形式应用的越来越广泛也是发展的趋势&#xff1b;会助力智能会议管理系统&#xff1a;可以实现在线报名&#xff08;免费/付费/后台导…
阅读更多...
Linux/ScriptKiddie

Linux/ScriptKiddie

Enumeration nmap 第一次扫描发现系统对外开放了22和5000端口&#xff0c;端口详细信息如下 22端口运行着openssh&#xff0c;5000端口则是werkzeug的httpd&#xff0c;tittle是kids hacker tools TCP/5000 首先从5000端口开始&#xff0c;先访问站点&#xff0c;站点是一个…
阅读更多...
RHCE 部署Ubuntu系统（ubuntu-23.10-live-server-amd64.iso）

RHCE 部署Ubuntu系统（ubuntu-23.10-live-server-amd64.iso）

目录 一、新建虚拟机 二、安装系统 1、 选择安装语言&#xff0c;默认 【 English 】&#xff0c;直接回车 2、选择键盘&#xff0c;默认回车 3、安装的服务器版本&#xff0c;根据需求自行选择&#xff0c;本次安装选择 【 Ubuntu Server 】 4、网络设置&#xff0c;此…
阅读更多...
Unix/Linux上的五种IO模型

Unix/Linux上的五种IO模型

a.阻塞 blocking 调用者调用了某个函数&#xff0c;等待这个函数返回&#xff0c;期间什么也不做&#xff0c;不停的去检查这个函数有没有返回&#xff0c;必须等这个函数返回才能进行下一步动作。 注意&#xff1a;阻塞并不是函数的行为&#xff0c;而是跟文件描述符有关。通…
阅读更多...
力扣题目训练（5）

力扣题目训练（5）

2024年1月29日力扣题目训练 2024年1月29日力扣题目训练345. 反转字符串中的元音字母349. 两个数组的交集350. 两个数组的交集 II96. 不同的二叉搜索树97. 交错字符串44. 通配符匹配 2024年1月29日力扣题目训练 2024年1月29日第五天编程训练&#xff0c;今天主要是进行一些题训…
阅读更多...
【云上建站】快速在云上构建个人网站3——网站选型和搭建

【云上建站】快速在云上构建个人网站3——网站选型和搭建

快速在云上构建个人网站3——网站选型和搭建 一、网站选型二、云市场镜像方式一&#xff1a;方式二&#xff1a;1. 进入ECS实例详情页面&#xff0c;点击停止&#xff0c;确保更换操作系统的之前ECS实例处于已停止状态&#xff0c;点击更换操作系统&#xff0c;进行镜像配置。2…
阅读更多...
appsmith安装手记:4.Sql server数据库容器安装

appsmith安装手记:4.Sql server数据库容器安装

appsmith安装好&#xff0c;那就可以看是练练手。 数据当然是来自数据库&#xff0c;那就连接局域网中现成的一台数据库服务器试试&#xff0c;但是连接数据库的时候一直错误。 找到/home/appsmith/backend 目录下的日志&#xff0c;看到了错误&#xff1a; [rootlocalhost bac…
阅读更多...
基于SSM的高校班级同学录网站设计与实现（有报告）。Javaee项目，ssm项目。

基于SSM的高校班级同学录网站设计与实现（有报告）。Javaee项目，ssm项目。

演示视频&#xff1a; 基于SSM的高校班级同学录网站设计与实现&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm项目。 项目介绍&#xff1a; Javaee项目&#xff0c;采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&…
阅读更多...
双非本科准备秋招（12.2）—— 力扣栈与队列

双非本科准备秋招（12.2）—— 力扣栈与队列

复习一下栈和队列的基础知识&#xff0c;刷几道题上上手。 1、102. 二叉树的层序遍历 广度优先遍历嘛&#xff0c;每次拓展一个新结点&#xff0c;就把新结点加入队列&#xff0c;这样遍历完队列中的元素&#xff0c;顺序就是层序遍历。 class Solution {public List<Lis…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023