AjaxAxios

embedded/2024/9/22 19:14:14/

Ajax

注:AJAX很少使用,现在都使用更简单的Axios所以只需要了解Ajax即可

概念

AJAX,全称“Asynchronous JavaScript and XML”(异步JavaScript和XML)

作用:

  • 与服务器进行数据交换,通过Ajax可以给服务器发送请求,并获取服务器响应的数据。
  • 异步交换:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。

入门

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

首先以Servlet方式编写

  1. 编写AjaxServlet,并使用response输出字符串
@Webservlet("/ajaxServlet" )
public class AjaxServlet extends Httpservlet {@overrideprotected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException{//响应数据response.getWriter().write("Hello Ajax");}
}
  1. 创建XMLHttpRequest对象:用于和服务器交换数据
var xmlhttp;
if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();
}else{xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
  1. 向服务器发送数据
xmlhttp.open("GET","url");
xmlhttp.send();//发送请求
  1. 获取服务器响应数据
xmlhttp.onreadystatechange = function(){if(xmlhttp.readyState == 4 && xmlhttp.status == 200){alert(xmlhttp.responseText);}
}

Axios

前面的AJAX的代码很复杂,所以Axios对其进行了封装,简化了书写

使用方法

以向localhost:8080/test/ajaxTest这个地址发送username这个属性

  1. 引入axios的js文件
<script src="js/axios-0.18.0.js"><script>
  1. 使用axios发送请求,并获取响应结果
axios({method:"get",url:"http://localhost:8080/test/ajaxTest?username=zhangsan"
}).then(function(resp){alert(resp.data);
})
axios({method:"post",url:"http://localhost:8080/test/ajaxTest",data:"username=zhangsan"
}).then(function(resp){alert(resp.data);
});
  1. 为了方便axios为所有的请求方法起别名
//发送get请求
axios.get("url").then(function(resp){alert(resp.data);
});
//发送post请求
axios.post("url","参数").then(function(resp){alert(resp.data);
});

http://www.ppmy.cn/embedded/16331.html

相关文章

Visual Studio Code 快捷键大全

文章目录 1. 全局快捷键2. 基本编辑3. 导航4. 查找 & 替换5. 多光标 & 选择6. 代码编辑7. 编辑器管理8. 文件管理9. 显示10. Debug 调试11. 终端&#xff08;Terminal&#xff09; 1. 全局快捷键 快捷键说明Ctrl Shift P&#xff0c;F1显示命令面板Ctrl P快速打开&am…

数据结构之队列

片头 嗨,小伙伴们,大家好! 在上一篇中,我们学习了栈,那么在这一章中我们将学习队列的相关知识,准备好了吗 ? Ready Go ! ! ! 一、队列 1.1 队列的基本概念 在上一章中&#xff0c;我们学习了数据结构之栈,知道了栈遵循后进先出(LIFO)原则。与栈相对的&#xff0c;队列中的数…

JavaEE——spring MVC请求处理

目录 主要目的&#xff1a; 1. Spring web 项目搭建 2. 添加依赖 3. 配置插件 4. 配置设置类 5. 编写controller层类 6. 编写测试的http请求 主要目的&#xff1a; 创建一个spring web项目&#xff1b; 创建控制类&#xff1b; 掌握如何配置MVC&#xff1b; 编写htt…

无人机+遥控器:遥控数传链路二合一远距离传输遥控器技术详解

无人机遥控器是无人机飞行控制的重要组成部分&#xff0c;用于向无人机发送控制指令和接收无人机的状态信息。无人机遥控器通常具备多种功能&#xff0c;如开关机、起飞降落、飞行方向控制、摄像头控制等。 无人机遥控器大多数都具备以下基本特点&#xff1a; 无线传输&#x…

多组学+机器学习+膀胱癌+分型+建模

这是一个基于多组学机器学习的分型建模文章&#xff0c;这里我们大概介绍一下&#xff0c;这篇文章做了啥 一、研究背景 1、尿路上皮癌是高度恶性的肿瘤&#xff0c;预后差&#xff0c;死亡率高 2、没有明显有效的治疗方法&#xff0c;多数患者在免疫治疗中无法受益&#xf…

Mockaroo - 在线生成测试用例利器

简介&#xff1a;Mockaroo 是一个无需安装的在线工具&#xff0c;用于生成大量的自定义测试数据。它支持多种数据格式&#xff0c;如JSON、CSV、SQL和Excel&#xff0c;并能模拟复杂的数据结构。 历史攻略&#xff1a; 测试用例&#xff1a;多条件下编写&#xff0c;懒人妙用…

Oracle expdp/impdp 及 exp/imp 命令详解

一、基础环境    操作系统&#xff1a;Windows 或 Linux 数据库版本&#xff1a;Oracle Database 11.2.0.1.0 及以上版本 二、命令简介    我们在使用Oracle 数据库的过程中会经常对数据进行导入导出。Oracle 数据库提供 expdp / impdp &#xff08;Data Pump&#xff0c…

C/C++开发,opencv-ml库学习,支持向量机(SVM)应用

目录 一、OpenCV支持向量机&#xff08;SVM&#xff09;模块 1.1 openCV的机器学习库 1.2 SVM&#xff08;支持向量机&#xff09;模块 1.3 支持向量机&#xff08;SVM&#xff09;应用步骤 二、支持向量机&#xff08;SVM&#xff09;应用示例 2.1 训练及验证数据获取 2…