AJAX和Axios异步框架

AJAX:Asynchronous JavaScript And XML 异步的JavaScript和XML

作用:1、与服务器进行数据交换,通过AJAX可以给服务器发送请求,并获取服务器响应数据。使用了AJAX和服务器进行通信,就可以使用ajax和html来代替jsp页面了。这样可以实现将前后端进行分离,因为jsp需要依赖浏览器才能运行,所以不能将前后端很好的分离。

           2、异步交互:可以在不重新加载该页面的情况下,与服务器进行交换数据并更新部分网页的技术。就是实时部分更新。就比如在用百度搜索时,我们需要完要搜索的内容,还没点搜索或者回车时,网页会自动给出很多类似的搜索内容。

这是写AJAX请求的官网文档:AJAX 简介

 

你可以通过点下一节来了解写ajax的多个步骤。 

编写步骤:1、编写AjaxServlet,并使用response输出字符串。

@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);}
}

  2、创建XMLHttpRequest对象:用于和服务器交换数据。

  3、向服务器发送请求

  4、获取服务器响应数据

<script>//1.创建核心对象var xhttp;if(window.XMLHttpRequest){xhttp=new XMLHttpRequest();}else {xhttp=new ActiveXObject("Microsoft.XMLHTTP");}//2.发送请求xhttp.open("GET", "/aJAXServlet");xhttp.send();//3.获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {alert(this.responseText);}};</script>

通过上面我们就可以对AJAX发送请求有了一个简单的认识,知道了我们可以运行AJAX简单的实现什么功能和基础代码应该怎么写。同时我们也不难发现AJAX的代码大部分都是重复且很难记住。

所以我们又有了Axios,Axios可以帮助我们简化代码。

Axios异步框架:对原生的AJAX进行封装,简化书写。

Axios使用:1、引入axios的js文件;2、使用axios发送请求,并获取响应数据。

下面这是我在网上找的下载ajax-0.18.0.js的网址:

axios-0.18.0.js 免费下载_axios-0.18.0.js下载-CSDN博客

我们下好文件后,我们最好在webapp项目下创建一个js包,然后把前面下好的文件复制一个到这个包中。

下面是代码的实现:

在使用axios时千万别忘了运用script标签把下载的axios js文件导入!

<!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>//getaxios({method:"get",url:"http://localhost:8080/axiosServlet?username=zhangsan",}).then(function (resp){alert(resp.data)})//postaxios({method:"post",url:"http://localhost:8080/axiosServlet",data:"username=zhangsan"}).then(function (resp){alert(resp.data)})
</script>
</body>
</html>

 发送get请求时,把需要传的参数直接加在url地址后面就行了,多个参数之间用 & 连接。

发送post请求时,需要把传的参数写在data:后面。

然后then中的resp.data 就是我们获取的响应数据。

axios还有一种简洁点的写法:

<!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>//getaxios.get("http://localhost:8080/axiosServlet?username=zhangsan").then(function (resp){alert(resp.data)})//postaxios.post("http://localhost:8080/axiosServlet","username=zhangsan").then(function (resp){alert(resp.data)})
</script>
</body>
</html>

这样写也是可以的,看个人喜好哪种了。

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

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

相关文章

图形化编程:开启无代码时代的编程之旅

在当今数字化时代&#xff0c;编程已经成为一项重要的技能。然而&#xff0c;对于许多初学者和非专业人士来说&#xff0c;传统的文本编程语言往往显得复杂和难以理解。图形化编程&#xff0c;作为一种新兴的编程范式&#xff0c;正逐渐改变这一现状&#xff0c;为更多人打开了…

【51单片机】数码管的静态与动态显示(含消影)

数码管在现实生活里是非常常见的设备&#xff0c;例如 这些数字的显示都是数码管的应用。 目录 静态数码管&#xff1a;器件介绍&#xff1a;数码管的使用&#xff1a;译码器的使用&#xff1a;缓冲器&#xff1a; 实现原理&#xff1a;完整代码&#xff1a; 动态数码管&#…

Flutter:跨平台移动应用开发的未来

Flutter&#xff1a;跨平台移动应用开发的未来 引言 Flutter的背景和概述 Flutter是由Google开发的一个开源UI工具包&#xff0c;用于构建漂亮、快速且高度可定制的移动应用程序。它于2017年首次发布&#xff0c;并迅速引起了开发者们的关注。Flutter采用了一种全新的方法来…

GMT学习记录

我主要根据GMT中文手册一步一步学习的&#xff01;&#xff01;&#xff01;&#xff01;B站视频介绍的是5.0老版本仅仅建立基础理解这个软件。 好的&#xff0c;学了一点发现直接把gmt转为shp&#xff0c;就得到我想的文件 gmt数据转shape格式数据 - 简书 (jianshu.com) 命…

如何在 ASP.NET Core 配置请求超时中间件

写在前面 本文参考官方文档&#xff0c;使用Asp.net core 8.0 的最小API 模板项目&#xff0c;配置超时中间件。 超时中间件可用于所有类型的ASP.NET Core应用&#xff1a;最小 API、带控制器的 Web API、MVC 和 Razor Pages。请求超时的属性位于命名空间 Microsoft.AspNetCo…

WAF攻防相关知识点总结2-代码免杀绕过

WAF的检测除了有对于非正常的流量检测外还对于非正常的数据包特征进行检测 以宝塔为例 在宝塔的后台可以放置一句话木马的文件 宝塔不会对于这个文件进行拦截&#xff0c;但是一旦我们使用菜刀蚁剑等webshell工具去进行连接的时候&#xff0c;数据报中有流量特征就会被拦截 …

Elastic Stack 8.12:通过对 ES|QL 等的改进增强了向量搜索

作者&#xff1a;来自 Elastic Tyler Perkins, Shani Sagiv, Gilad Gal, Ninoslav Miskovic Elastic Stack 8.12 构建于 Apache Lucene 9.9&#xff08;有史以来最快的 Lucene 版本&#xff09;之上&#xff0c;基于我们对标量量化和搜索并发性的贡献&#xff0c;为文本、向量和…

机器学习(一)—— 简介

参考书籍《机器学习和深度学习&#xff1a;原理、算法、实战》 文章目录 1 工业界流行的机器学习算法2 机器学习3 深度学习4 预备知识5 监督学习与无监督学习 1 工业界流行的机器学习算法 线型回归逻辑回归决策树随机森林梯度提升机人工神经网络卷积神经网络循环神经网络贝叶…

HTTP/HTTPS代理IP在多线程爬虫项目中的实践

在多线程爬虫项目中&#xff0c;HTTP/HTTPS代理IP的实践主要包括以下几个关键步骤&#xff1a; 1. 收集代理IP资源&#xff1a; - 从免费或付费代理IP提供商、公开代理列表网站&#xff08;如西刺代理、无忧代理等&#xff09;抓取代理IP和端口信息。 - 存储这些IP到数据库或者…

开发GPT的应用程序流程

开发一个基于GPT的应用程序&#xff08;GPT APP&#xff09;涉及到与GPT模型的集成&#xff0c;用户界面设计&#xff0c;以及应用程序的功能实现。以下是一个一般的开发流程&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&…

苹果Find My可查找添加32件物品,伦茨科技ST17H6x芯片加速产品赋能

苹果最近更新的支持文档证实&#xff0c;从 iOS 16 开始&#xff0c;"Find My"可查找添加物品从16件增加到32件&#xff0c;AirTag 和“查找”网络中的物品利用“查找”网络的强大功能来发挥作用&#xff0c;这个网络由数亿台加密的匿名 Apple 设备构成。“查找”网络…

Spark基础学习--基础介绍

1. Spark基本介绍 1.1 定义 Spark是可以处理大规模数据的统一分布式计算引擎。 1.2 Spark与MapReduce的对比 在之前我们学习过MapReduce&#xff0c;同样作为大数据分布式计算引擎&#xff0c;究竟这两者有什么区别呢&#xff1f; 首先我们回顾一下MapReduce的架构&#xf…