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

预览：

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

相关推荐
被猫枕的咸鱼几秒前
【免费分享】mysql笔记，涵盖查询、缓存、存储过程、索引，优化。
笔记·mysql·缓存
万琛16 分钟前
【Java-tesseract】OCR图片文本识别
java·ocr
励志成为大佬的小杨20 分钟前
c语言中的枚举类型
java·c语言·前端
yava_free22 分钟前
指定Bean加载顺序的能力
java·开发语言
yan_baby_liu27 分钟前
1.business english--build rapport
笔记
whisperrr.29 分钟前
探索JDBC：Java数据库连接的艺术与魅力
java·开发语言·数据库
boy快快长大1 小时前
【NebulaGraph】查询案例(六)
java·服务器·数据库
重生之Java开发工程师1 小时前
JVM 主要组成部分与内存区域
java·jvm·面试
2301_815389371 小时前
【笔记】Linux中vim编辑器回忆录
笔记·编辑器·vim
万亿少女的梦1681 小时前
高校网络安全存在的问题与对策研究
java·开发语言·前端·网络·数据库·python
热门推荐
01新手学习VR全景需要知道的几个问题02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03玄机平台应急响应—webshell查杀04docker安装启动问题解决排查05【一文读懂】NTN（非地面网络）技术介绍06HCIA-datacom数通题库和录播视频资料07Gitlab ci/cd08RAG 实践- Ollama+RagFlow 部署本地知识库09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10【漏洞复现】CVE-2015-3337 Arbitrary File Reading