Ajax、Axios --javaweb学习笔记

于 2024-04-20 12:00:00 发布
阅读量352 收藏 7
点赞数 5
分类专栏： JavaWeb学习笔记 文章标签： ajax 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71386740/article/details/137271971
版权

Ajax

  • 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML
  • 作用： 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等

同步与异步

原生Ajax（繁琐）

  • 准备数据地址
  • 创建XMLHttpRequest对象：用于和服务器交换数据 
  • 向服务器发送请求
  • 获取服务器响应数据
<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div></body>

<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>

       

Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发

官网：Axios中文文档 | Axios中文网

Axios入门

  1. 引入Axios的js文件
  2. 使用Axios发送请求，并获取响应结果

请求方式别名（推荐）

  • 发送GET请求 
    axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
    console.log(result.data);
});
  • 发送POST请求 
    axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
    console.log(result.data);
});

A泽予
关注
专栏目录
Ajax实例（JAVA）
lijiuu的专栏
02-07 2万+
这是一个用于留言板留言提交与读取的简单实例，不包括回复、编辑与删除等其它管理功能。 本实例的目的在于用一个简单的例子展示如果在java web应用中，用javascript开发Ajax应用。一、web页面 msbord.jsp1、本页面用于留言显示2、本页面提供留言功能，并利用httpxmlrequest提交给servlet保存数据并使用javascript对页面显示进行调整。3、
JavaWeb学习笔记
weixin_51633670的博客
04-13 416
tomcat & servlet 用户在浏览器通过form表单给服务器发送数据，发送方式为post方法。 服务器通过request对象的getParameter方法，参数为form表单的name属性，获取input标签内的文本内容。这样服务器就获取到了客户端提交的数据。 # html核心代码 <form action="add" method="post"> 名称：<input type="text" name="fname"><br>
java之ajax技术
weixin_43992033的博客
03-28 276
Insert title here
Java Ajax入门
weixin_30566111的博客
09-24 650
接下来整理一下Ajax相关的内容，AJAX（asynchronous js and xml），即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。 同步和异步 同步和异步的主要区别如下； （1）同步：一个响应结束后才能发送下一个请求，页面在请求期间不...
JavaWeb核心——ajax技术知识详解及示例分析（一）
清风不渡
10-21 764
ajax技术版权声明引言一、实例入门一、什么是Ajax? 版权声明 本文原创作者：清风不渡 博客地址：https://blog.csdn.net/WXKKang 引言   当我们在淘宝搜索栏输入我们要找的商品，还没有进行搜索的时候，搜索栏的下方就会显示一个下拉框并且里面有我们可能要搜索的东西，那么它里面的数据是怎么来的呢？不过是从服务器中获取并且显示在浏览器上的，那么我们要怎么才能做到在不...
java ajax_Java Ajax入门
weixin_35062801的博客
02-12 3万+
接下来整理一下Ajax相关的内容，AJAX(asynchronous js and xml)，即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。同步和异步同步和异步的主要区别如下；(1)同步：一个响应结束后才能发送下一个请求，页面在请求期间不能做其他事情。(2)异...
自学javaweb-b站黑马Xmind思维导图笔记
09-05
JavaWeb 是一种基于Java技术的Web开发框架，用于构建动态网站、企业级应用和服务端应用程序。在本自学课程中，我们将深入探讨多个关键知识点，...这是一个全面的JavaWeb学习路径，涵盖了开发过程中可能遇到的各个方面。
JavaWeb全套教程笔记_前端技术
weixin_46040278的博客
05-15 1244
本系列笔记仅作为JavaWeb阶段学习参考,不光记一定要上手实践操作
JavaWeb笔记3
敲代码的派大星
09-26 579
包含JSP、cookie、session、过滤器、AJAX、JSON等笔记
Vue快速入门学习笔记(更新ing)
喜欢前端的后端 MelodyJerry
11-15 4188
原在博客园发布，先同步到CSDN：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、CSDN等博客文章，以及个人的一些学习见解与体会。 由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios.
java+ajax
05-27
初学Ajax的可以来看看,简单的例子.
Ajax与Java交互
05-06
Ajax与Java交互，列举了POST和GET的交互,以及动态加载的效果。
java ajax注册
04-28
这是利用ajax技术做的注册小例子，服务器端验证，连接的是mysql数据库，希望大家多提意见，谢谢了
java/AJAX
代码解释生活
02-22 2034
1) asynchronous javascript and xml(异步的javascript和xml)。 为了解决传统的web应用当中“等待-响应-等待"的弊端而创建的一种技术，其实质可以理解 为:使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求，服务器返回xml数据 戒者是文本数据给浏览器，然后在浏览器端，使用这些数据更新部分页面，整个过程，...
java Ajax
热门推荐
Xiebo030212的博客
05-02 4万+
Ajax的介绍和使用 什么是Ajax 实例（搜索关键字，出来下拉框） index.jsp SearchServlet 什么是Ajax Ajax 全名 async javascript and XML(异步JavaScript和XML) 是前后台交互的方法，也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具 Ajax是在不重新加载整个页面的状态下与服务器交换数据并更新部分网页的技术 是一个默认异步执行机制的方法（同步：async=false，异步：async=true） 同步请求（async=fals
Ajax实现前后端交互
Pluto372的博客
12-24 1035
需求一： 从数据库中查询文章列表， 显示到html页面中 后端代码（ssm框架）： 省略了pojo层的JavaBean 引入json依赖 <!-- json依赖 --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version
【JavaWeb】Day14.前后端交互基础——Ajax
m0_74197695的博客
03-18 433
1.概念：异步的JavaScript和XML。不重新加载整个页面注意：AJAX 并不是编程语言。AJAX 是一种从网页访问 Web 服务器的技术。
Java（ajax）
taka_is_beauty的博客
07-31 284
目录 一.ajax的介绍 二.jquery中的ajax使用 三.json的介绍 一.ajax的介绍 概念： "Asynchronous Javascript And XML"（异步JavaScript和XML）, 即使用Javascript语言与服务器进行异步交互，传输的数据为XML（本质为字符串）。 作用： 通过在后台与服务器进行少量数据交换， AJAX 可以使网页实现异步更...
AJAX&&JSON
chenguoao1999的博客
09-13 593
课程笔记Day46 AJAX JSON 综合案例 第一章 AJAX 第01节 基础理论 1、概念说明 1. 什么是 AJAX ? AJAX是一项技术合集。他是由一套技术组合得到的新技术方案。 异步请求技术 2. AJAX有什么作用呢? 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上， 而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 3. 异步和同步的概念说明? A. 异步: 多个操作是相互独立的过程, 各自完成各自的操作,互不影响。 B. 同步: 多个操
axios-Ctrl
最新发布
04-13
axios-Ctrl是一个基于axios封装的库，用于简化前端与后端交互的过程。它提供了一些常用的请求方法和拦截器，使得发送请求和处理响应变得更加方便和高效。 axios-Ctrl的主要特点包括： 1. 封装了常用的HTTP请求方法：axios-Ctrl封装了常用的GET、POST、PUT、DELETE等HTTP请求方法，使得发送请求变得简单明了。 2. 支持请求拦截器和响应拦截器：axios-Ctrl提供了请求拦截器和响应拦截器，可以在发送请求前和处理响应时进行一些公共的操作，比如添加请求头、处理错误信息等。 3. 支持并发请求：axios-Ctrl支持同时发送多个请求，并且可以统一处理它们的响应结果。 4. 支持取消请求：axios-Ctrl提供了取消请求的功能，可以在发送请求后取消正在进行的请求。 5. 支持Promise API：axios-Ctrl使用Promise API，可以更好地处理异步操作，使得代码更加清晰易读。 6. 可扩展性强：axios-Ctrl基于axios进行封装，可以方便地扩展和定制，满足不同项目的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A泽予

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值