当前位置： 首页 > article >正文

AJAX和JSON

article 2024/10/31 6:46:13
一.AJAX技术


1.1 AJAX介绍

Ajax 即“Asynchronous Javascript And XML”（异步
JavaScript 和 XML），是指一种创建
交互式、快速动态应用的网页开发技术，无需重新加载整个网
页的情况下，能够更新页面局部数据的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使页面实
现异步更新。这意味着可以在不重新加载整个页面的情况下，
对页面的某部分进行更新。

1.2 同步请求和异步请求:

同步请求：串行操作，发送一个请求，需等待响应，期间
不能够再次发送请求；

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

开发方式：
服务器端渲染：页面渲染主要由服务器端渲染实现
前后端分离：所有请求和响应都基于Ajax技术实现


1.3 原生AJAX

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

在Web项目里面创建一个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

@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 数据类
型的子集。

{
"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数组的格式

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

语法规则:
JSON 数组在中括号中书写。
JSON 中数组value值必须是合法的 JSON 数据类型（字
符串, 数字, 对象, 数组, 布尔值或 null）。
JSON数组可以使用jQuery语法完成遍历。

2.4 JSON对象的解析
<!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字符串

<!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介绍

axios.get().then().catch().finally();
axios.post().then().catch().finally();
then(function(resp){}): axios执行成功后的回调函数

<!--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 前端请求

<!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 后端响应

@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 前端代码

<!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 后端代码

@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包

<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的使用

//创建核心解析对象
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实体类：

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 +
                '}';
    }
}

创建测试类：

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 请求参数和响应数据都是普通字符串

<!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>

后端代码

@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请求

<!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>

后端代码

@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请求

<!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>

后端代码

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


http://www.kler.cn/a/372628.html

相关文章：

  • 二十二、MySQL 8.0 主从复制原理分析与实战
  • 关于深度学习方向学习的一些建议
  • vue3中，实现列表无缝滚动，vue3-seamless-scroll
  • Docker：容器化和虚拟化
  • Linux系统块存储子系统分析记录
  • 加密与解密算法
  • K8S 容器可视化管理工具-kuboard 监控管理工具搭建
  • 操作数据表
  • 【蓝桥杯选拔赛真题81】python矩形数量 第十五届青少年组蓝桥杯python选拔赛真题 算法思维真题解析
  • C++ 中回调函数的实现方式-函数指针
  • ICT网络赛道安全考点知识总结1
  • 笔记整理—linux驱动开发部分（2）模块信息与编译
  • 记录一次查询优化
  • 关于Mac打包ipa的配置小结
  • Hyperledger Fabric有那些核心技术，和其他区块链对比Hyperledger Fabric有那些优势
  • Spring Boot 实现文件分片上传和下载
  • 运维端口号详解（Detailed Explanation of Operation and Maintenance Port Numbers）
  • 高效MySQL缓存策略
  • C++（运算符重载）
  • iQOO手机怎样将屏幕投射到MacBook？可以同步音频吗？
  • 【Searxng】Searxng docker 安装
  • 《IMM交互式多模型滤波MATLAB实践》专栏目录，持续更新……
  • 基于Django+python的车牌识别系统设计与实现（带文档）
  • CentOS 7 下升级 OpenSSL
  • w外链如何跳转微信小程序
  • 快速上手 Rust——环境配置与项目初始化