Web基础06-AJAX,Axios,JSON数据

目录

一、AJAX

1.概述

2.主要作用

3.快速入门

4.AJAX的优缺点

（1）优点

（2）缺点

5.同源策略

二、Axios

1.概述

2.快速入门

3.请求方式别名

三、JSON

1.概述

2.主要作用

3.基础语法

4.JSON数据转换

（1）JSON字符串转为JS对象

（2）JS对象转为JSON字符串

（3）JSON字符串转为Java对象

（4）Java对象转为JSON字符串

四、使用Axios+Json简化以前代码

一、AJAX

1.概述

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

2.主要作用

  • 与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据

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

不需要用JSP了~

同步与异步

最直接的

  • 同步，在没有收到/得到结果之前不能干任何事

  • 异步，在没有收到/得到结果之前还能干其他事

3.快速入门

  • 编写AjaxServlet并使用response输出字符串

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

servlet

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //
        response.getWriter().write("hello ajax");
    }
​
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tryrun 1</title>
</head>
<body>
<div id="view">
  <p>点击下面的按钮，将 Ajax 请求回来的数据更新在该文本内</p>
</div>
<button type="button" id="btn">发起 Ajax 请求</button>
​
<script>
  document.getElementById("btn").onclick = ajaxRequest;
​
  function ajaxRequest () {
    var xhr = new XMLHttpRequest();
    //true是否为异步，false为同步
    xhr.open("GET", "http://localhost:8080/practice02_war/ajaxServlet", true);
    xhr.send();
​
    xhr.onreadystatechange = function(){
      if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("view").innerHTML = xhr.responseText;
      }
    }
  }
</script>
</body>

之后启动服务器，html直接使用idea快速打开即可

4.AJAX的优缺点

（1）优点

  • 最大的优点是页面无刷新更新，用户的体验非常好；

  • 使用异步方式与服务器通信，具有更迅速的响应能力；

  • 可以将一些服务器工作转移到客户端，利用客户端资源来处理，减轻服务器和带宽的压力，节约空间和带宽租用成本；

  • 技术标准化，并被浏览器广泛支持，不需要下载插件或者小程序；

  • Ajax 可使因特网应用程序更小、更快、更友好。

（2）缺点

  • Ajax 不支持浏览器 back 返回按钮；

  • 有安全问题，Ajax 暴露了与服务器交互的细节；

  • 对搜索引擎不友好；

  • 破坏了程序的异常机制；

  • 不容易调试。

5.同源策略

同源策略是一种安全协议，是客户端脚本（尤其是 JavaScript）中重要的安全度量标准，指一段脚本只能读取同一来源的窗口和文档的属性。

URL 地址中的 协议、域名、端口 三者 都 相同。

url组成：scheme: //host:post/path?query#fragment

  • scheme：通信协议，一般为 http 、https；

  • host：域名；

  • post：端口号，此项为可选项，http 协议默认的端口号为 80，https 协议默认的端口号为 443；

  • path：路径，由 "/ "隔开的字符串；

  • query：查询参数，此项为可选项；

  • fragment：信息片段，用于指定网络资源中的某片断，此项为可选项；

使用 Ajax 请求后端数据时，只能跟同源的后端接口进行数据交互，即：后端接口的 URL 与发起 Ajax 请求的页面 URL 之间，需要满足同源策略。

不满足 "同源策略" 的请求浏览器通常都会报错

使用同源策略的目的：

  • 为了数据的安全性。若没有同源策略的限制，那么黑客就可以在他的页面上任意请求你的后端数据，造成数据库内容被盗取、隐私数据泄漏。

实现跨域请求的方式：

虽然 Ajax 请求需要满足同源策略，然而在一些场景中，你真的需要 Ajax 访问其它 "源" 的数据（称为跨域访问），这时需要后端服务器进行相应的设置。

如果服务器端支持 CORS，可以通过设置Access-Control-Allow-Origin来实现跨域。如果浏览器检测到相应的设置，就会允许 Ajax 进行跨域访问。

Java中实现跨域的五种方式_java跨域-CSDN博客

二、Axios

1.概述

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

Axios中文文档 | Axios中文网 (axios-http.cn)

2.快速入门

  • 引入axios

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

<script src="axios.min.js"></script>
<script>
  axios({
    method:"get",
    url:"http://localhost:8080/practice02_war/axiosServlet?username=zhangsan"
  }).then(function (response) {
    alert(response.data)
  })
​
  axios({
    method: "post",
    url:"http://localhost:8080/practice02_war/axiosServlet",
    data:"username=zhangsan"
  }).then(function (response) {
    console.log(response.data)
  })
</script>

servlet

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        final String username = request.getParameter("username");
        response.getWriter().write("username:"+username);
​
    }
​
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post");
        this.doGet(request, response);
    }
}

3.请求方式别名

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

Axios API | Axios中文文档 | Axios中文网 (axios-http.cn)

axios.get("http://localhost:8080/practice02_war/axiosServlet?username=zhangsan").then(function (response) {
    alert(response.data)
})
axios.post("http://localhost:8080/practice02_war/axiosServlet","username=zhangsan").then(function (response) {
    console.log(response.data)
})

三、JSON

1.概述

JavaScript Object Notation。JavaScript 对象表示法

2.主要作用

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

3.基础语法

定义：多个属性值用，隔开

var 变量名 = {"键名":值,"key":value}

value值类型可为：

  • 数字

  • 字符串

  • 逻辑值

  • 数组

  • 对象

  • null（几乎不用）

直接输出就是JSON字符串

4.JSON数据转换

（1）JSON字符串转为JS对象
var jsObject=JsoN.parse(jsonstr);
（2）JS对象转为JSON字符串
var jsonStr = JSON.stringify(jsObject)
（3）JSON字符串转为Java对象

使用一个api

fastjson：

是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。

  • 导入坐标

<!-- https://mvnrepository.com/artifact/com.alibaba.fastjson2/fastjson2 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>2.0.47</version>
    </dependency>

转换：

User user = JSON.parseObject("json字符串", User.class);
（4）Java对象转为JSON字符串
String jsonStr = JSON.toJSONString(new User());

注意：

在Axios中（1）和（2）的转换会自动完成，不需要手写~

四、使用Axios+Json简化以前代码

这里以展示所有商品为例

这里只要能获取到数据即可，页面展示就先不写了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <button id="selectAll" >点我查看所有商品</button>
  <hr>
  <table id="table" border="1px solid black">
​
  </table>
</body>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/axios.min.js"></script>
​
<script>
  $("#selectAll").click(function () {
    console.log("点击触发了")
    axios({
      method:"get",
      url:"http://localhost:8080/practice02_war/selectAll"
    }).then(function (response) {
      let products = response.data;
      for (let i = 0; i < products.length; i++) {
        let product = products[i];
        console.log(product)
      }
    })
  })
</script>
</html>

selectAll

@WebServlet("/selectAll")
public class SelectAll extends HttpServlet {
    private final ProductService productService = new ProductService();
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        final List<Product> products = productService.selectAll();
        //将集合转为JSON数据（序列化）
        final String s = JSON.toJSONString(products);
        response.setContentType("text/json;charset=utf-8");
        //跨域
        response.addHeader("Access-Allow-Control-Origin","*");
        response.getWriter().write(s);
    }
​
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

预览：

关于页面展示可以自己写，但没必要，后面有更好的方式展示数据

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【MLLM+轻量多模态模型】24.02.Bunny-v1.0-2B-zh: 轻量级多模态语言模型 （效果一般）

【MLLM+轻量多模态模型】24.02.Bunny-v1.0-2B-zh: 轻量级多模态语言模型 （效果一般）

24.02 北京人工智能研究院&#xff08;BAAI&#xff09;提出以数据为中心的轻量级多模态模型 arxiv论文&#xff1a;2402.Efficient Multimodal Learning from Data-centric Perspective 代码&#xff1a;https://github.com/BAAI-DCAI/Bunny 在线运行&#xff1a;https://wis…
阅读更多...
day6 3/18

day6 3/18

2.试编程&#xff1a; 封装一个动物的基类&#xff0c;类中有私有成员&#xff1a;姓名&#xff0c;颜色&#xff0c;指针成员年纪 再封装一个狗这样类&#xff0c;共有继承于动物类&#xff0c;自己拓展的私有成员有&#xff1a;指针成员&#xff1a;腿的个数&#xff08;整…
阅读更多...
【JavaEE -- 多线程进阶 - 面试重点】

【JavaEE -- 多线程进阶 - 面试重点】

多线程进阶 1. 常见锁策略1.1 乐观锁和悲观锁1.2 轻量级锁和重量级锁1.3 自旋锁和挂起等待锁synchronized具有自适应能力1.4 普通互斥锁和读写锁1.5 公平锁和非公平锁1.6 可重入锁和不可重入锁 2. Synchronized原理&#xff08;特点、加锁过程、自适应&#xff09;2.1 Synchron…
阅读更多...
数据结构(三)——栈

数据结构(三)——栈

三、栈、队列和数组 3.1 栈 3.1.1 栈的基本概念 线性表是具有相同数据类型的n&#xff08;n≥0&#xff09;个数据元素的有限 序列&#xff0c;其中n为表长&#xff0c;当n 0时线 性表是一个空表。若用L命名线性表&#xff0c;则其一般表示为 L (a1, a2, … , ai , ai1, ……
阅读更多...
【STL源码剖析】【2、空间配置器——allocator】

【STL源码剖析】【2、空间配置器——allocator】

文章目录 1、什么是空间配置器&#xff1f;1.1设计一个简单的空间配置器&#xff0c;JJ::allocator 2、具备次配置力( sub-allocation)的 SGI 空间配置器2.1 什么是次配置力2.2 SGI标准的空间配置器&#xff0c;std::allocator2.2 SGI特殊的空间配置器&#xff0c;std::alloc2.…
阅读更多...
ARM汇编与逆向工程 蓝狐卷 基础知识

ARM汇编与逆向工程 蓝狐卷 基础知识

文章目录 前言内容简介作者简介译者简介目录 前言 与传统的CISC&#xff08;Complex Instruction Set Computer&#xff0c;复杂指令集计算机&#xff09;架构相比&#xff0c;Arm架构的指令集更加简洁明了&#xff0c;指令执行效率更高&#xff0c;能够在更低的功耗下完成同样…
阅读更多...
13 秒插入 30 万条数据，这才是 Java 批量插入正确的姿势！

13 秒插入 30 万条数据，这才是 Java 批量插入正确的姿势！

本文主要讲述通过MyBatis、JDBC等做大数据量数据插入的案例和结果。 30万条数据插入插入数据库验证 实体类、mapper和配置文件定义 User实体 mapper接口 mapper.xml文件 jdbc.properties sqlMapConfig.xml 不分批次直接梭哈 循环逐条插入 MyBatis实现插入30万条数据 J…
阅读更多...
python redis中blpop和lpop的区别

python redis中blpop和lpop的区别

python redis中lpop()方法是获取并删除左边第一个对象。 def lpop(self,name: str,count: Optional[int] None,) -> Union[Awaitable[Union[str, List, None]], Union[str, List, None]]:"""Removes and returns the first elements of the list name.By de…
阅读更多...
2258: 【搜索】【广度优先】最少转弯问题

2258: 【搜索】【广度优先】最少转弯问题

题目描述 给出一张地图&#xff0c;这张地图被分为nm&#xff08;n,m<100&#xff09;个方块&#xff0c;任何一个方块不是平地就是高山。平地可以通过&#xff0c;高山则不能。现在你处在地图的&#xff08;x1,y1&#xff09;这块平地&#xff0c;问&#xff1a;你至少需要…
阅读更多...
Vulnhub - Morpheus

Vulnhub - Morpheus

希望和各位大佬一起学习&#xff0c;如果文章内容有错请多多指正&#xff0c;谢谢&#xff01; 个人博客链接&#xff1a;CH4SER的个人BLOG – Welcome To Ch4sers Blog Morpheus 靶机下载地址&#xff1a;Matrix-Breakout: 2 Morpheus ~ VulnHub 0x01 信息收集 Nmap扫描…
阅读更多...
Spring学习记录

Spring学习记录

为什么要学Spring&#xff1f; 在回答这个问题时&#xff0c;我们先来看看现在的Java程序是如何实现的&#xff0c;以最简单的服务层与持久层为例&#xff0c;其遵循接口与具体实现类的这种方式&#xff1a; Service层接口&#xff1a;BookService.java package service; pu…
阅读更多...
mysql笔记：22. 事务隔离级别的一种通俗讲解

mysql笔记：22. 事务隔离级别的一种通俗讲解

事务隔离级别&#xff0c;是为了解决多个并行事务竞争导致的数据安全问题的一种规范。具体来说&#xff0c;多个事务竞争可能会产生三种不同的现象。假设有两个事务T1、T2同时执行&#xff0c;有如下三种不同的情形&#xff1a; T1可能会读到T2未提交的数据&#xff0c;但是未…
阅读更多...
粤嵌6818开发板通过MobaXterm使用SSH连接开发板

粤嵌6818开发板通过MobaXterm使用SSH连接开发板

链接&#xff1a;https://pan.baidu.com/s/18ISP4Ub1HtQx6jCvTQTUHw?pwdfjmu 提取码&#xff1a;fjmu 1.把SSH_config.tar.bz 下载到开发板中 2.解压 SSH_config.tar.bz 解压命令&#xff1a;tar -xzvf SSH_config.tar.bz 3.配置SSH 进入SSH/openssh目录&am…
阅读更多...
关于Zookeeper分布式锁

关于Zookeeper分布式锁

背景 之前说到分布式锁的实现有三种 1、基于数据库实现的分布式锁 2、Redis分布式锁 3、Zookeeper分布式锁 前者redis分布式锁博客已具体介绍&#xff0c;此博客最终决定补齐关于Zookeeper分布式锁的实现原理。 简述 Zoopkeeper&#xff0c;它是一个为分布式的协调服务&…
阅读更多...
Vertex cover preprocessing for influence maximization algorithms

Vertex cover preprocessing for influence maximization algorithms

Abstract 影响力最大化问题是社交网络分析中的一个基本问题&#xff0c;其目的是选择一小组节点作为种子集&#xff0c;并在特定的传播模型下最大化通过种子集传播的影响力。本文研究了独立级联模型下影响力最大化算法中执行顶点覆盖作为预处理的效果。所提出的方法从主要计算过…
阅读更多...
考研复习C语言进阶（4）

考研复习C语言进阶（4）

1. 为什么存在动态内存分配 我们已经掌握的内存开辟方式有&#xff1a; int val 20;//在栈空间上开辟四个字节 char arr[10] {0};//在栈空间上开辟10个字节的连续空间 但是上述的开辟空间的方式有两个特点&#xff1a; 1. 空间开辟大小是固定的。 2. 数组在申明的时候&#…
阅读更多...
Stm32-使用TB6612驱动电机及编码器测速

Stm32-使用TB6612驱动电机及编码器测速

这里写目录标题 起因一、电机及编码器的参数二、硬件三、接线四、驱动电机1、TB6612电机驱动2、定时器的PWM模式驱动电机 五、编码器测速1、定时器的编码器接口模式2、定时器编码器模式测速的原理3、编码器模式的配置4、编码器模式相关代码5、测速方法 六、相关问题以及解答1、…
阅读更多...
软件测试入门基础

软件测试入门基础

说到软件测试&#xff0c;那么首先得和没有基础的同学们&#xff0c;讲解一下&#xff0c;平时我们使用的那些app&#xff0c;比如淘宝&#xff0c;微信是怎么进行交互的呢&#xff1f;在淘宝上下个订单&#xff0c;按钮按出去为什么就能下单成功呢&#xff1f;微信看朋友圈&am…
阅读更多...
组建对等网

组建对等网

一、概念 对等网络&#xff08;Peer-to-Peer, P2P&#xff09;是一种分布式网络架构&#xff0c;其中每个参与节点&#xff08;称为"对等体"或"节点"&#xff09;既可以作为客户端也可以作为服务器&#xff0c;直接与网络中的其他节点分享资源&#xff08…
阅读更多...
windows上安装虚拟机及搭建Linux环境

windows上安装虚拟机及搭建Linux环境

虚拟机的安装 VMware Workstation Player(虚拟机)&#xff0c;下载网址如下: VMware Workstation Player | VMwarehttps://www.vmware.com/content/vmware/vmware-published-sites/us/products/workstation-player.html.html?srcWWW_Player7Pro_US_HPPromo_Introducing 进入网…
阅读更多...
最新文章

Copyright @ 2022~2023