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

辉图2024-03-22 13:30

目录

一、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

java 复制代码 
@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：

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发送请求，并获取响应

html 复制代码 
<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

java 复制代码 
@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)

javascript 复制代码 
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对象
javascript 复制代码 
var jsObject=JsoN.parse(jsonstr);
（2）JS对象转为JSON字符串
javascript 复制代码 
var jsonStr = JSON.stringify(jsObject)
（3）JSON字符串转为Java对象

使用一个api

fastjson：

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

  • 导入坐标
XML 复制代码 
<!-- https://mvnrepository.com/artifact/com.alibaba.fastjson2/fastjson2 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>2.0.47</version>
    </dependency>

转换：

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

注意：

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

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

这里以展示所有商品为例

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

html 复制代码 
<!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

java 复制代码 
@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);
    }
}

预览：

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

相关推荐
CryptoRzz4 分钟前
欧美（美股、加拿大股票、墨西哥股票）股票数据接口文档
java·服务器·开发语言·数据库·区块链
杂货铺的小掌柜24 分钟前
apache poi excel 字体数量限制
java·excel·poi
大厂码农老A32 分钟前
你打的日志，正在拖垮你的系统：从P4小白到P7专家都是怎么打日志的？
java·前端·后端
im_AMBER33 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
摇滚侠34 分钟前
Spring Boot 3零基础教程，深度理解 Spring Boot 自动配置原理，笔记11
spring boot·笔记·后端
艾菜籽1 小时前
Spring MVC入门补充2
java·spring·mvc
爆更小哇1 小时前
统一功能处理
java·spring boot
程序员鱼皮1 小时前
我造了个程序员练兵场，专治技术焦虑症！
java·计算机·程序员·编程·自学
fanstering1 小时前
腾讯混元P3-SAM: Native 3D Part Segmentation
笔记·学习·3d·点云
n8n1 小时前
SpringAI 完全指南：为Java应用注入生成式AI能力
java·后端
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02BongoCat - 跨平台键盘猫动画工具03GitHub 镜像站点04UV安装并设置国内源05智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践06Linux下V2Ray安装配置指南07GitLab 零基础入门指南：从安装到项目管理全流程082025羊城杯网络安全大赛 wp09Cursor Plan Mode：AI 终于知道先想后做了1046个Nano-banana 精选提示词，持续更新中