AJAX和JSON

小旺仔爱代码2024-10-31 18:08
一.AJAX技术

1.1 AJAX介绍

Ajax 即"Asynchronous Javascript And XML"（异步

JavaScript 和 XML），是指一种创建

交互式、快速动态应用的网页开发技术，无需重新加载整个网

页的情况下，能够更新页面局部数据的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使页面实

现异步更新。这意味着可以在不重新加载整个页面的情况下，

对页面的某部分进行更新。

1.2 同步请求和异步请求:

同步请求：串行操作，发送一个请求，需等待响应，期间

不能够再次发送请求；

异步请求：并行操作，发送一个请求，无需等待响应，即

可再发送请求；

开发方式：

服务器端渲染：页面渲染主要由服务器端渲染实现

前后端分离：所有请求和响应都基于Ajax技术实现

1.3 原生AJAX

创建两个javaWeb项目部署到Tomcat服务器上

在Web项目里面创建一个HTML页面

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生AJAX</title>
//js代码
<script>
// XMLHttpRequest 可以与服务器实现异步交互，
//而无需让整个页面刷新，因此成为 Ajax 编程的核心对象。
function fn(){
//1.创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
//2.给定请求方式以及请求地址
xhr.open("get","http://localhost:8080/code_02/demo01Servlet");
//3.发送请求
xhr.send();
//4.获取服务器端给客户端的响应数据
//哪个函数发送的ajax请求,响应结果就返回给那个函数
xhr.onreadystatechange = function(){
//0:open()没有被调用
//1:open()正在被调用
//2:send()正在被调用
//3:服务端正在返回结果
//4:请求结束，并且服务端已经结束发送数据到客户端
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("sp").innerHTML=xhr.responseText;
}
}
}
</script>
</head>
<body>
<h2>周六要放假</h2>
<h2 id="sp"></h2>
<input type="button" value="原生AJAX"
onclick="fn()"/>
</body>
</html>

创建javaServlet 继承HTTPServlet

java 复制代码 
@WebServlet("/demo01Servlet")
public class Demo01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("周日要休息");
}
@Override
protected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws
ServletException, IOException {
doGet(req,resp);
}
}

二.JSON详解

2.1 JSON简介

JSON(JavaScript Object Notation，JavaScript 对象表示法)

是一种基于字符串的轻量级的数据交换格式。易于人阅读和编

写，同时也易于机器解析和生成。JSON 是 JavaScript 数据类

型的子集。

XML 复制代码 
{
"book": [
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
}]
}

2.2 JSON对象的格式

对象格式: {"k1" : obj , "k2" : obj}

举例:{"userid":1,"username":"admin","sex":"male"}

语法规则

对象可以包含多个 key/value（键/值）对。

key 必须是字符串，value可以是合法的 JSON 数据类型

（字符串, 数字, 对象, 数组, 布尔值或 null）。

key 和 value 中使用冒号(:)分割。

每个 key/value 对使用逗号(,)分割。

2.3 JSON数组的格式

XML 复制代码 
数组格式：[obj,obj,obj...]
举例：[ "baidu", "jd", "tengxun" ]
举例: [{"userid":1,"username":"admin"},
{"userid":2,"username":"oldlu"}]
}

语法规则:

JSON 数组在中括号中书写。

JSON 中数组value值必须是合法的 JSON 数据类型（字

符串, 数字, 对象, 数组, 布尔值或 null）。

JSON数组可以使用jQuery语法完成遍历。

2.4 JSON对象的解析
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//js代码
<script>
//JSON对象
let objectJson={"id":1,"username":"范冰冰","age":23};
//可以使用点号 . 来访问对象的值
console.log(objectJson.username);
//JSON数组
let arrayJson=[
{"id":1,"username":"范冰冰","age":23},
{"id":2,"username":"杨丽颖","age":24},
{"id":3,"username":"王姨","age":25}
];
//使用索引值来访问数组
console.log(arrayJson[2].username);
//使用 for 循环
for(let i=0;i<arrayJson.length;i++){
console.log(arrayJson[i].age)
}
</script>
</head>
<body>
</body>
</html>
2.5 JSON对象和JSON字符串
XML 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//js代码
<script>
//JSON对象
let objectJson={"id":1,"username":"范冰冰","age":23};
//可以使用点号 . 来访问对象的值
console.log(typeof objectJson);
console.log(objectJson);
console.log(objectJson.username);
console.log("------------------------")
//把JSON对象转成JSON字符串
let strJson =
JSON.stringify(objectJson);
console.log(typeof strJson);
console.log(strJson);
console.log(strJson.username);
console.log("------------------------")
//把JSON字符串转成JSON对象
let obj = JSON.parse(strJson);
console.log(typeof obj);
console.log(obj);
console.log(obj.username);
</script>
</head>
<body>
</body>
</html>
<!--Axios中，JSON字符串和JS对象自动进行转换-->

三.Ajax异步请求库Axios

3.1 axios简介

原生ajax请求的代码编写太过繁琐,我们可以使用axios这个库
来简化操作！

在后续学习的Vue(前端框架)中发送异步请求,使用的就是

axios.

需要注意的是axios不是vue的插件,它可以独立使用.

官网：https://www.axios-http.cn/docs/intro

使用步骤

  1. 引入axios核心js文件。

  2. 调用axios对象的方法来发起异步请求。

  3. 调用axios对象的方法来处理响应的数据。

3.2 Axios快速入门

3.2.1 API介绍

html 复制代码 
axios.get().then().catch().finally();
axios.post().then().catch().finally();
then(function(resp){}): axios执行成功后的回调函数
html 复制代码 
<!--catch(function(error){}): axios执行出错时,调用的函数
finally(function(){}): 无论如何都会执行的函数
then函数的参数response是一个json对象,我们重点只需要了
解response.data即可-->
{
<!-- `data` 由服务器提供的响应-->
data: {},
<!-- `status` 来自服务器响应的 HTTP 状态码-->
status: 200,
<!-- `statusText` 来自服务器响应的 HTTP 状态信息-->
statusText: 'OK',
<!-- `headers` 是服务器响应头-->
<!-- 所有的 header 名称都是小写，而且可以使用方括号语法访问-->
<!-- 例如: `response.headers['content-type']`-->
headers: {},
<!-- `config` 是 `axios` 请求的配置信息-->
config: {},
<!-- `request` 是生成此响应的请求-->
<!-- 在node.js中它是最后一个ClientRequest实例 (inredirects)，-->
<!-- 在浏览器中则是 XMLHttpRequest 实例-->
request: {}
}

3.2.2 前端请求

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn01(){
//发送GET请求
axios({
method:"get",
url:"http://localhost:8080/code_02/demo02Servlet?username=zhangsan"})
.then(function(response){
console.log(response);
console.log(response.data)
//将后端传入的数据赋值给id为sp的标签
document.getElementById("sp").innerHTML=response.data;
});
}
function fn02() {
//发送POST请求
axios({
method:"post",
url:"http://localhost:8080/code_02/demo02Servlet",
data:"username=zhangsan"
}).then(function(response){
console.log(response.data)
document.getElementById("sp").innerHTML=response.data;
});
}
</script>
</head>
<body>
<input type="button" value="GET请求"onclick="fn01()"/><br/>
<input type="button" value="POST请求"onclick="fn02()"/><br/>
<span id="sp"></span>
</body>
</html>

3.2.3 后端响应

java 复制代码 
@WebServlet("/demo02Servlet")
public class Demo02Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp) 
throws ServletException, IOException {
System.out.println("GET请求...");
String username = req.getParameter("username");
System.out.println(username);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("GET请求响应成功");
}
@Override
protected void doPost(HttpServletRequestreq, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println("post请求...");
String username = req.getParameter("username");
System.out.println(username);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("POST请求响应成功");
}
}

3.3 Axios 请求方式别名

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

名。

3.3.1 前端代码

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn01(){
//发送GET请求
axios.get("http://localhost:8080/code_02/demo02Servlet?username=zhangsan")
.then(function(response){
console.log(response.data)
document.getElementById("sp").innerHTML=response.data;
});
}
function fn02() {
//发送POST请求
axios.post("http://localhost:8080/code_02/demo02Servlet","username=zhangsan")
.then(function(response){
document.getElementById("sp").innerHTML=response.data;
});
}
</script>
</head>
<body>
<input type="button" value="GET请求" onclick="fn01()"/><br/>
<input type="button" value="POST请求" onclick="fn02()"/><br/>
<span id="sp"></span>
</body>
</html>

3.3.2 后端代码

java 复制代码 
@WebServlet("/demo02Servlet")
public class Demo02Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp)
 throws ServletException, IOException {
System.out.println("GET请求...");
String username = req.getParameter("username");
System.out.println(username);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("GET请求响应成功");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
 throws ServletException, IOException {
System.out.println("post请求...");
String username = req.getParameter("username");
System.out.println(username);
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("POST请求响应成功");
}
}
3.4 Jackson的使用

3.4.1 Jackson简介

在 JDK 中并没有内置操作 JSON 格式数据的 API，因此使用处

理 JSON 格式的数据需要借助第三方类库。

常用的 JSON 解析类库：

*Gson: 谷歌开发的 JSON 库，功能十分全面。

*FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。

*Jackson: 社区十分活跃且更新速度很快。被称为"最好的Json 解析器。

Jackson 是一种解析 JSON 格式数据的 API，也是最流行，速

度最快的 JSON API。在SpringMVC 中默认使用 Jackson API

处理 JSON 格式的数据。

导入json相关jar包

XML 复制代码 
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.3.3</version>
</dependency>

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.3.3</version>
</dependency>

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.3.3</version>
</dependency>

API的使用

java 复制代码 
//创建核心解析对象
ObjectMapper om = new ObjectMapper();
//将java对象转成json字符串
String writeValueAsString(Object obj);
//json字符串转java对象
<T> T readValue(String var, Class<T> typeclass);

3.4.2 Java对象和Json字符串转换

创建User实体类：

java 复制代码 
package com.ll.jopo;

public class User {
    private int id;
    private String username;
    private int password;

    public User() {
    }

    public User(int id, String username, int password) {
        this.id = id;
        this.username = username;
        this.password = password;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public int getPassword() {
        return password;
    }

    public void setPassword(int password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password=" + password +
                '}';
    }
}

创建测试类：

java 复制代码 
public class DemoTest {
public static void main(String[] args)
throws Exception {
//创建核心转换对象
ObjectMapper om=new ObjectMapper();
//将Java对象转成json字符串
User u01=new User(1,"张三","123456");
String str01 = om.writeValueAsString(u01);
System.out.println(str01);
//将List集合转成json字符串
List<User> list=new ArrayList<>();
User u02=new User(2,"李四","123456");
User u03=new User(3,"王五","123456");
list.add(u02);
list.add(u03);
String str02 = om.writeValueAsString(list);
System.out.println(str02);
//将Map集合转成json字符串
Map<String,Object> map=new HashMap<>();
map.put("name","zs");
map.put("money",100);
String str03 = om.writeValueAsString(map);
System.out.println(str03);
System.out.println("---------------------------------");
//将Json字符串转成Java对象
User user = om.readValue(str01,User.class);
System.out.println(user);
//将Json字符串转成List集合
List<User> listUser = om.readValue(str02, List.class);
System.out.println(list);
//将Json字符串转成Map集合
Map<String,Object> m = om.readValue(str03, Map.class);
System.out.println(m);
}
}
3.5 axios和Jackson综合

3.5.1 请求参数和响应数据都是普通字符串

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn(){
//请求参数和响应数据都是普通字符串
axios({
method:"get",
url:"http://localhost:8080/code_02/demo01Servlet?id=1&username=zhangsan&password=123456",
}).then(function(response){
console.log(response);
console.log(response.data)
document.getElementById("sp").innerHTML=response.data;
});
}
</script>
</head>
<body>
<input type="button" value="按钮"
onclick="fn()"/><br/>
<span id="sp"></span>
</body>
</html>

后端代码

java 复制代码 
@WebServlet("/demo01Servlet")
public class Demo01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp)
 throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
// 获取请求携带的参数
String id = req.getParameter("id");
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(id+"..."+username+"..."+password);
resp.setContentType("text/html;charset=utf-8");
//ajax响应结果必须以流的形式将结果写回给浏览器
resp.getWriter().print("响应结果为:"+id+"-"+username+"-"+password);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req,resp);
}
}

3.5.2 响应数据-Json格式字符串Get请求

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn(){
//请求参数和响应数据都是普通字符串
axios({
method:"get",
url:"http://localhost:8080/code_02/demo01Servlet?id=1&username=zhangsan&password=123456",
}).then(function(response){
console.log(response.data)
document.getElementById("sp").innerHTML=
                response.data.id+"..."+response.data.username+"..."+response.data.password;
});
}
</script>
</head>
<body>
<input type="button" value="按钮"
onclick="fn()"/><br/>
<span id="sp"></span>
</body>
</html>

后端代码

java 复制代码 
@WebServlet("/demo01Servlet")
public class Demo01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
// 获取请求携带的参数
String id = req.getParameter("id");
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println(id+"..."+username+"..."+password);
User user=new User(Integer.parseInt(id),username,password);
ObjectMapper om=new ObjectMapper();
String str = om.writeValueAsString(user);
//响应json格式的字符串给浏览器
resp.setContentType("application/json;charset=utf-8");
//ajax响应结果必须以流的形式将结果写回给浏览器
resp.getWriter().print(str);
}
@Override
protected void doPost(HttpServletRequest
req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req,resp);
}
}

3.5.3 请求参数-Json格式字符串Post请求

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/axios-0.18.0.js"></script>
<script>
function fn(){
//请求参数-json格式字符串
//请求参数为json格式的字符串,json格式的字符串会存放在请求体中带给服务器,只有post请求才有请求体
axios({
method:"post",
url:"http://localhost:8080/code_02/demo01Servlet"
,data{"id":1,"username":"zhangsan","password":"123456"}})
.then(function(response){
console.log(response.data)
document.getElementById("sp").innerHTML=
                response.data.id+"..."+response.data.username+"..."+response.data.password;
});
}
</script>
</head>
<body>
<input type="button" value="按钮"
onclick="fn()"/><br/>
<span id="sp"></span>
</body>
</html>

后端代码

java 复制代码 
@WebServlet("/demo01Servlet")
public class Demo01Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp) 
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
// 获取请求携带的参数 post请求的数据是在请求
//体中 不能使用request对象获取
//获取请求体的流信息
ServletInputStream in = req.getInputStream();
ObjectMapper om=new ObjectMapper();
User user = om.readValue(in,User.class);
System.out.println(user);
//响应json格式的字符串给浏览器
resp.setContentType("application/json;charset=utf-8");
//ajax响应结果必须以流的形式将结果写回给浏览器
String str = om.writeValueAsString(user);
resp.getWriter().print(str);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) 
throws ServletException, IOException {
doGet(req,resp);
}
}
相关推荐
吃杠碰小鸡33 分钟前
lodash常用函数
前端·javascript
emoji11111143 分钟前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs：GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习（三）
前端
AiFlutter1 小时前
Flutter-底部分享弹窗（showModalBottomSheet）
java·前端·flutter
麦兜*1 小时前
轮播图带详情插件、uniApp插件
前端·javascript·uni-app·vue
陈大爷（有低保）1 小时前
uniapp小案例---趣味打字坤
前端·javascript·vue.js
m0_748236581 小时前
《Web 应用项目开发：从构思到上线的全过程》
服务器·前端·数据库
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库