AJAX和Axios异步框架

news2024/11/26 19:53:51

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 {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //1.响应数据
        response.getWriter().write("hello ajax");
    }

    @Override
    protected 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>

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

  //post
  axios({
      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>
  //get
  axios.get("http://localhost:8080/axiosServlet?username=zhangsan").then(function (resp){alert(resp.data)})

  //post
  axios.post("http://localhost:8080/axiosServlet","username=zhangsan").then(function (resp){alert(resp.data)})
</script>
</body>
</html>

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python4Delphi安装及编译

1.下载或直接克隆python4delphi组件资源到指定目录,我这里下载到Components文件夹下,并对下载的文件夹进行了重命名为(P4D),重命名不是必须的 下载地址:https://github.com/pyscripter/python4delphi 2.安装 2.1在已下载的目录下进入Install文件夹,双击MultiInstaller.exe…

基于python+uniapp的网上订餐系统的设计与实现 微信小程序

考虑到实际生活中在晓海网上订餐方面的需要以及对该系统认真的分析&#xff0c;将系统权限按管理员和用户这两类涉及用户划分。 &#xff08;1&#xff09;用户功能需求 用户进入APP可以进行首页、系统公告、在线投诉、我的等操作&#xff0c;在我的页面可以对菜品评价、订单信…

医院网络安全建设:三网整体设计和云数据中心架构设计

医院网络安全问题涉及到医院日常管理多个方面&#xff0c;一旦医院信息管理系统在正常运行过程中受到外部恶意攻击&#xff0c;或者出现意外中断等情况&#xff0c;都会造成海量医疗数据信息的丢失。由于医院信息管理系统中存储了大量患者个人信息和治疗方案信息等&#xff0c;…

Servlet 预览pdf

一、背景 上篇文章介绍了图片的预览&#xff0c;这篇我们介绍下 pdf 文件的预览&#xff0c;pdf 预览在实际开发中用的还是比较多的&#xff0c;比如很多文件协议、合同都是用pdf 格式&#xff0c;协议预览就需要我们做 pdf 预览了。 二、实操 其实在上篇文章最后已经说了常用…

七陌API对接实战:外呼接口及通话记录推送

通过白码低代码开发平台对接七陌外呼接口&#xff0c;实现选择客户进行外呼&#xff0c;并保存通话记录的功能。 外呼接口实现&#xff1a; 官方接口文档&#xff1a;http://developer.7moor.com/v2docs/dialout/ 1、对接数据查询 向七陌商务索取到七陌用户中心账号密码&a…

C++ //练习 1.1 查阅你使用的编译器的文档,确定它所使用的文件命名约定。编译并运行第2页的main程序。

C Primer&#xff08;第5版&#xff09; 练习 1.1 练习 1.1 查阅你使用的编译器的文档&#xff0c;确定它所使用的文件命名约定。编译并运行第2页的main程序。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /***************…

L3上云01 | 分布式、微服务概念

文章目录 什么是分布式&#xff0c;分布式和集群的区别又是什么&#xff1f;1. 什么是分布式 ?2. 分布式与集群的区别 ?分布式集群 3. 分布式环境下面临的问题4. 常见的分布式系统5. 什么是微服务架构&#xff1f;S0A 架构微服务 什么是分布式&#xff0c;分布式和集群的区别…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-3 textarea

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>textarea</title> </head><body> <h2>多行文本框:</h2> <!--textarea&#xff08;文本域&#xff09;cols(列) rows(行)--> …

鸿蒙Harmony-页面路由(router)详解

慢慢理解世界&#xff0c;慢慢更新自己&#xff0c;希望你的每一个昨天&#xff0c;今天&#xff0c;和明天都会很快乐&#xff0c;你知道的&#xff0c;先好起来的从来都不是生活&#xff0c;而是你自己 目录 一&#xff0c;定义 二&#xff0c;页面跳转 2.1使用router.pushU…

您没有专业应用组许可,请联系系统管理员分配许可!

项目场景&#xff1a; 金蝶云星空客户端 问题描述 您没有专业应用组许可&#xff0c;请联系系统管理员分配许可! 解决方案&#xff1a; 第一步&#xff1a;使用管理员账号登录&#xff0c; 第二步&#xff1a;查询用户》勾选指定用户》注册用户同步

分类预测 | Matlab实现KPCA-EBWO-SVM分类预测,基于核主成分分析和改进的白鲸优化算法优化支持向量机分类预测

分类预测 | Matlab实现KPCA-EBWO-SVM分类预测&#xff0c;基于核主成分分析和改进的白鲸优化算法优化支持向量机分类预测 目录 分类预测 | Matlab实现KPCA-EBWO-SVM分类预测&#xff0c;基于核主成分分析和改进的白鲸优化算法优化支持向量机分类预测分类效果基本描述程序设计参…

Microsoft Word 删除空行

Microsoft Word 删除空行 1. 删除空行1.1. 替换1.2. 段落标记 References 1. 删除空行 1.1. 替换 1.2. 段落标记 特殊格式 -> 段落标记 References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/

python PyQt5的学习

一、安装与配置 1、环境&#xff1a; python3.7 2、相关模块 pip install pyqt5 pyqt5-tools pyqt5designer 可以加个镜像 -i https://pypi.tuna.tsinghua.edu.cn/simple3、配置设计器 python的pyqt5提供了一个设计器&#xff0c;便于ui的设计 界面是这样的&#xff1a…

django后台手机号加密存储

需求&#xff1a; 1 &#xff1a;员工在填写用户的手机号时&#xff0c;直接填写&#xff0c;在django后台中输入 2&#xff1a;当员工在后台确认要存储到数据库时&#xff0c;后台将会把手机号进行加密存储&#xff0c;当数据库被黑之后&#xff0c;手机号字段为加密字符 3&am…

51单片机_智能家居终端

实物演示效果&#xff1a; https://www.bilibili.com/video/BV1bh4y1A7ZW/?vd_source6ff7cd03af95cd504b60511ef9373a1d 51单片机是否适合做多功能智能家居控制系统&#xff1f;51单片机的芯片是否具有与WiFi通信的能力&#xff1f;如果有的话&#xff0c;具体有哪些芯片啊&a…

day4:多点通信与域套接字

思维导图 使用tftp实现简单文件的上传 #include <head.h> #define SER_PORT 69 #define SER_IP "192.168.125.223" int link_file() {int sfdsocket(AF_INET,SOCK_DGRAM,0);if(sfd-1){perror("socket error");return -1;}return sfd; } int filedow…

从0开始python学习-49.pytest之日志封装和allure封装

目录 日志封装 1. 在pytest.ini中配置日志的格式 2. 生成日志对象--在请求封装中写 3. 把日志写入文件--在请求封装中写 allure封装 1. 在yaml用例中写入需要的模块、接口等内容 2. 在测试用例封装的函数中通过allure.dynamic的方法写入需要的数据 日志封装 1. 在pytest.…

【动态规划】【数学】【C++算法】18赛车

作者推荐 视频算法专题 本文涉及知识点 动态规划 数学 LeetCode818赛车 你的赛车可以从位置 0 开始&#xff0c;并且速度为 1 &#xff0c;在一条无限长的数轴上行驶。赛车也可以向负方向行驶。赛车可以按照由加速指令 ‘A’ 和倒车指令 ‘R’ 组成的指令序列自动行驶。 当…

EI级 | Matlab实现VMD-TCN-BiLSTM变分模态分解结合时间卷积双向长短期记忆神经网络多变量光伏功率时间序列预测

EI级 | Matlab实现VMD-TCN-BiLSTM变分模态分解结合时间卷积双向长短期记忆神经网络多变量光伏功率时间序列预测 目录 EI级 | Matlab实现VMD-TCN-BiLSTM变分模态分解结合时间卷积双向长短期记忆神经网络多变量光伏功率时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基…

开发实践7_project

要求&#xff1a; 表单类&#xff0c;上传img到服务器某路径&#xff0c;再显示在网页。 结果&#xff1a; &#xff08;图片 网页来源 无水印 不能明确出处&#xff09; upload_app form.py // class UploadForm(forms.Form):img forms.ImageField(label"img"…