原生Ajax的学习记录

最新推荐文章于 2024-07-25 12:53:11 发布

swingfer

最新推荐文章于 2024-07-25 12:53:11 发布

阅读量3.5k

点赞数 1

分类专栏：常规操作文章标签： JSON Java解析JSON JS解析JSON FastJSON Jackson

本文链接：https://blog.csdn.net/qq_42013035/article/details/104124402

版权

常规操作专栏收录该内容

22 篇文章 1 订阅

订阅专栏

两种主流的JSON解析，FastJson与Jackson

两种主流的JSON解析，FastJson与Jackson

在前端中可以使用JS来将JSON与字符串之间进行转化，如下示例：

//json对象
let student={name:"Jack",age:19,sex:"男"};
console.log(student);
//将json对象转换为字符串
let stringJson=JSON.stringify(student);
console.log(stringJson);
//将字符串转换为json对象
console.log(JSON.parse(stringJson));

使用json字符串在前后端进行数据的传输，可以降低交互成本，于是要求在服务端也可以对json进行灵活的处理

一. FastJson方式

jar包下载地址：https://pan.baidu.com/s/1CkQmeMnwRNrbnmaTenXJlA

示例代码：

先建立两个实体类，之间为包含关系：

User.java:

package com.qianqian.practice.entity;

public class User {
    private int id;
    private String name;

    public User() {
    }

    public int getId() {
        return id;
    }

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

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

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

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

Admin.java:

package com.qianqian.practice.entity;

import java.util.List;

public class Admin {
    private String name;
    private List<User> userList;

    public Admin() {
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<User> getUserList() {
        return userList;
    }

    public void setUserList(List<User> userList) {
        this.userList = userList;
    }

    @Override
    public String toString() {
        return "Admin{" +
                "name='" + name + '\'' +
                ", userList=" + userList +
                '}';
    }

    public Admin(String name, List<User> userList) {
        this.name = name;
        this.userList = userList;
    }
}

然后新建测试类，构建对象，并做字符串和JSON对象的转化

package com.qianqian.practice.test;

import com.alibaba.fastjson.JSON;
import com.qianqian.practice.entity.Admin;
import com.qianqian.practice.entity.User;

import java.util.ArrayList;
import java.util.List;

public class Test {
    public static void main(String[] args) {
        Admin admin = Test.getAdminInstance();
        //将对象转换为JSON字符串
        String string = JSON.toJSONString(admin);
        System.out.println(string);
        //将字符串再转化为对象
        Admin admin1 = JSON.parseObject(string, Admin.class);
        List<User> userList = admin1.getUserList();
        for (User user : userList) System.out.println(user.toString());
    }

    public static Admin getAdminInstance() {
        User user1 = new User(1, "lili");
        User user2 = new User(2, "haha");
        User user3 = new User(3, "baba");
        ArrayList<User> userArrayList = new ArrayList<>();
        userArrayList.add(user1);
        userArrayList.add(user2);
        userArrayList.add(user3);
        Admin admin = new Admin("boss", userArrayList);
        return admin;
    }
}

运行结果：

二. Jackson方式

jar包下载地址：（三个全部需要导入）：https://pan.baidu.com/s/1yCBvglM1hkF5OoHlbRJcaw

代码示例：

package com.qianqian.practice.test;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qianqian.practice.entity.Admin;
import com.qianqian.practice.entity.User;

import java.io.IOException;
import java.util.ArrayList;

public class Test {
    public static void main(String[] args) {
        Admin admin = Test.getAdminInstance();

        ObjectMapper objectMapper = new ObjectMapper();
        try {
            //将dui对象转换为JSON字符串
            String string = objectMapper.writeValueAsString(admin);
            System.out.println(string);
            //将JSON字符串转化为对象
            Admin admin1 = objectMapper.readValue(string, Admin.class);
            for (User user : admin1.getUserList()) System.out.println(user);
        } catch (JsonProcessingException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static Admin getAdminInstance() {
        User user1 = new User(1, "lili");
        User user2 = new User(2, "haha");
        User user3 = new User(3, "baba");
        ArrayList<User> userArrayList = new ArrayList<>();
        userArrayList.add(user1);
        userArrayList.add(user2);
        userArrayList.add(user3);
        Admin admin = new Admin("boss", userArrayList);
        return admin;
    }
}

运行结果：

使用Ajax发送请求四个步骤:

创建XMLHTTPRequest对象
设置onreadystatechange回调函数
open() 打开连接
send() 发送请求

Ajax从Servlet中获取数据

新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript">
        function change() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let divElement=document.getElementById("div1");
                    divElement.innerHTML = xhr.responseText;
                    divElement.style.color = "red";
                }
            };
            xhr.open("get", "test", true);
            xhr.send();
        }
    </script>
</head>
<body>
<div id="div1">看我</div>
<button onclick="change()">ajax修改内容</button>
</body>
</html>

新建AjaxServlet.java:

package com.qianqian.practice.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "AjaxServlet", value = "/test")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println("这是服务器传给你的数据");
    }
}

运行结果：

Ajax提交数据的两种方式

本例实现一个简单版的实时检查用户注册的用户名是否在存在

一.GET方式：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript">
        function change() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let divElement = document.getElementById("div1");
                    divElement.innerHTML = xhr.responseText;
                    divElement.style.color = "red";
                }
            };
            let userName = document.getElementById("user-name-label").value;
            xhr.open("get", "test?userName=" + userName, true);
            xhr.send();
        }
    </script>
</head>
<body>
<div id="div1"></div>
用户名:<input id="user-name-label" type="text" oninput="change()"/>
</body>
</html>

AjaxServlet.java:

package com.qianqian.practice.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "AjaxServlet", value = "/test")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String userName = request.getParameter("userName");
        String rightName = "jack";
        //如果此名存在，提示用户
        if (userName.equals(rightName)) {
            response.getWriter().println("此用户名已存在！");
        } else {
            response.getWriter().println("✔✔✔✔✔✔！");
        }
    }
}

结果：

二.POST方式：

使用post与get只在数据的上传形式上有一点区别，如下index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script type="text/javascript">
        function change() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let divElement = document.getElementById("div1");
                    divElement.innerHTML = xhr.responseText;
                    divElement.style.color = "red";
                }
            };
            let userName = document.getElementById("user-name-label").value;
            xhr.open("post", "test", true);
            //设置请求头(注意要卸载open后，默认Content-Type为plain）
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send("userName=" + userName);
        }
    </script>
</head>
<body>
<div id="div1"></div>
用户名:<input id="user-name-label" type="text" oninput="change()"/>
</body>
</html>

AjaxServlet.java同上

GET和POST的区别：

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

不使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

谢谢观看！希望赏个赞呗😋。

swingfer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生Ajax的学习记录

在前端中可以使用JS来将JSON与字符串之间进行转化，如下示例：//json对象let student={name:"Jack",age:19,sex:"男"};console.log(student);//将json对象转换为字符串let stringJson=JSON.stringify(student);console.log(stringJson);//将字符串转换为js...
复制链接

扫一扫

专栏目录