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

news2024/11/16 20:39:27

目录

一、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);
    }
}

预览：

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

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

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

相关文章

洛谷_P1152 欢乐的跳_python写法

洛谷_P1152 欢乐的跳_python写法

思路&#xff1a; 这道题我用到了集合的互异性来判断这组数字是否满足条件我觉得是比较有效一点的。 data list(map(int,input().split())) data data[1:] l [i for i in range(1,len(data))] s [] for i in range(len(data)-1):s.append(abs(data[i] - data[i1]))if set(…
阅读更多...
RVA和FOA转换---三

RVA和FOA转换---三

文章目录 修改初始值RVA和FOA转换RVAFOARVA和FOA的关系 本次内容包含如何修改程序中的初始值&#xff0c;和如何转换内存和文件的地址。 修改初始值 问题&#xff1a; 我们写了一个程序&#xff0c;可以输出一个结果&#xff0c;那么我们可以通过修改PE文件来改变这个输出结果…
阅读更多...
平时到点就走的00后，居然一跃上岸字节，真的难以接受....

平时到点就走的00后，居然一跃上岸字节，真的难以接受....

又到了一年一度的求职旺季金&#xff01;三&#xff01;银&#xff01;四&#xff01;在找工作的时候都必须要经历面试这个环节。在这里我想分享一下自己上岸字节的面试经验&#xff0c;过程还挺曲折的&#xff0c;但是还好成功上岸了。大家可以参考一下&#xff01; 0821测评 …
阅读更多...
SpringBoot异常：类文件具有错误的版本 61.0, 应为 52.0的解决办法

SpringBoot异常：类文件具有错误的版本 61.0, 应为 52.0的解决办法

问题&#xff1a; java: 无法访问org.mybatis.spring.annotation.MapperScan 错误的类文件: /D:/Program Files/apache-maven-3.6.0/repository/org/mybatis/mybatis-spring/3.0.3/mybatis-spring-3.0.3.jar!/org/mybatis/spring/annotation/MapperScan.class 类文件具有错误的…
阅读更多...
PSCA系统控制集成之复位层次结构

PSCA系统控制集成之复位层次结构

PPU 提供以下对复位控制的支持。 • 复位信号Reset signals&#xff1a;PPU 提供冷复位和热复位输出信号。PPU 还为实现部分保留的电源域管理提供了额外的热复位输出信号。 • 电源模式控制Power mode control&#xff1a;PPU 硬件适当地管理每个支持的电源模式转换的复位信号…
阅读更多...
java学习第342天，阶段2 学习第29天，学习计划第13天，MySQL学习第13天（2024/03/18）-1h

java学习第342天，阶段2 学习第29天，学习计划第13天，MySQL学习第13天（2024/03/18）-1h

阅读更多...
Python库Gym：打开机器学习与强化学习的大门

Python库Gym：打开机器学习与强化学习的大门

Python库Gym&#xff1a;打开机器学习与强化学习的大门 强化学习作为人工智能领域的重要分支&#xff0c;已经在各种领域展现出了巨大的潜力。为了帮助开发者更好地理解和应用强化学习算法&#xff0c;Python库Gym应运而生。Gym提供了一个开放且易于使用的环境&#xff0c;供开…
阅读更多...
深入解析：在 Node.js 中删除文件的正确姿势

深入解析：在 Node.js 中删除文件的正确姿势

引言 在 Node.js 中处理文件尤其是移除文件&#xff0c;对于维护高效应用程序至关重要。储存和秩序当道的今天&#xff0c;删除不必要或冗余的文件能力显得尤为关键。本文深入探讨你会想要使用这个强大功能的时刻和原因&#xff0c;并通过各种案例展示了这个概念&#xff0c;同…
阅读更多...
一、从0开始卷出一个新项目之CC-Link IE TSN 概述

一、从0开始卷出一个新项目之CC-Link IE TSN 概述

目录 1.1 范围 1.2 目的 1.3 CC-Link介绍 1.3.1 CPLA协会 1.3.2 CC-Link协议家族 1.3.3 CC-Link IE TSN 二、瑞萨RIN32M4-CL3 2.1 芯片简介 2.2 资料下载 2.3 RIN系列产品 一、从0开始卷出一个新项目之CC-Link IE TSN 概述 一、CC-Link介绍 1.1 范围 快速实现CC-Lin…
阅读更多...
TrueNAS怎么设置中文，最新2024版本安装详细说明

TrueNAS怎么设置中文，最新2024版本安装详细说明

首先我们做好安装前的准备工作 1&#xff0c;ISO镜像安装包 2&#xff0c;虚拟机&#xff08;建议使用ESXI虚拟机环境&#xff09; 如果是物理机安装&#xff0c;建议先给底层安装虚拟机系统esxi&#xff0c;再在上面安装方便以后的管理&#xff0c;如果你想物理机直接安装&a…
阅读更多...
心灵治愈交流平台|基于springboot框架+ Mysql+Java+B/S结构的心灵治愈交流平台设计与实现(可运行源码+数据库+设计文档)

心灵治愈交流平台|基于springboot框架+ Mysql+Java+B/S结构的心灵治愈交流平台设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 管理员功能登录前台功能效果图 用户功能模块 心理咨询师功能 系统功能设计 数据库…
阅读更多...
【C++】三大特性之多态

【C++】三大特性之多态

1 定义及实现 1.1 概念 多态是C三大特性之一。通俗来说&#xff0c;就是多种形态&#xff0c;具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会产生出不同的状态。 多态是在不同继承关系的类对象&#xff0c;去调用同一函数&#xff0c;产生了不同的行为。比如学…
阅读更多...
基于vue实现bilibili网页

基于vue实现bilibili网页

学校要求的实验设计,基于vue实现bilibili网页版,可实现以下功能 (1)基本的悬浮动画和页面渲染 (2)可实现登录和未登录的页面变化 (3)在登录页面的,实现密码判断,或者短信验证方式的倒数功能 (4)实现轮播图 (5)实现预览视频(GIF) (6)页面下拉到一定高度出现top栏以及右下角的返回…
阅读更多...
CentOS 7 编译安装 Nginx

CentOS 7 编译安装 Nginx

CentOS 7 编译安装 Nginx 背景下载 Nginx 源码包安装依赖包编译添加环境变量添加守护查考文献 背景 一开始使用 docker 搭建了一个 web 服务器&#xff0c;但是由于 docker 不太方便的部署 TLS 证书&#xff0c;故使用 Nginx 做反向代理&#xff0c;实现 https 连接。 下载 N…
阅读更多...
观成科技-基于自适应学习的人工智能加密流量检测技术

观成科技-基于自适应学习的人工智能加密流量检测技术

1.前言 人工智能技术的广泛应用正在深刻改变我们的生活。在网络安全领域&#xff0c;基于机器学习的检测技术也应用在许多场景中。随着信息技术的迅猛发展和数字化转型的深入推进&#xff0c;加密技术逐渐成为保障网络安全和数据隐私的核心手段&#xff0c;而基于机器学习的检…
阅读更多...
LeetCode 面试经典150题 274.H指数

LeetCode 面试经典150题 274.H指数

题目&#xff1a; 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义&#xff1a;h 代表“高引用次数” &#xff0c;一名科研人员的 h 指数 是指他&#xff08;她…
阅读更多...
滑块验证码

滑块验证码

1.这里针对滑块验证给了一个封装的组件verifition&#xff0c;使用直接可以调用 2.组件目录 3.每个文件的内容 3.1 Api文件中只有一个index.js文件&#xff0c;用来存放获取滑块和校验滑块结果的api import request from /router/axios//获取验证图片 export function reqGe…
阅读更多...
影响交易收益的因素有哪些？

影响交易收益的因素有哪些？

在尝试做交易时&#xff0c;你可能会问自己一个问题&#xff1a;交易一天能赚多少钱&#xff1f;“如果我全职投入交易&#xff0c;一天能赚多少&#xff1f;”或者更广泛地说&#xff0c;“交易能为我带来怎样的财富&#xff1f;”这些问题本质上都充满了不确定性&#xff0c;…
阅读更多...
upload-labs-pass01

upload-labs-pass01

1.安装好环境进入关卡&#xff08;记得打开小皮&#xff09; 2.可以看到第一关是要求上传图片&#xff0c;但是同时限制了图片类型&#xff0c;那么如果我们将木马写入图片&#xff0c;但是类型又不在白名单&#xff0c;就要想办法绕过 3.可以看到这里的要求是有check&#xff…
阅读更多...
计算机组成原理——自己制作一个cpu

计算机组成原理——自己制作一个cpu

cpu包括单周期cpu、中断cpu、多周期cpu 代码实现之后在实验箱看效果&#xff0c;并且看波形图 单周期波形 中断cpu 多周期cpu 1.单周期CPU总体电路图 如图是一个简单的基本上能够在单周期CPU上完成所要求设计的指令功能的数据通路和必要的控制线路图。其中指令和数据各存储在不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023