AJAX实现JSON与XML数据交换方法详解

@每天都要敲代码 2023-02-03 我要评论

1、JS中如何创建和访问JSON对象

（1）在javascript语言中怎么创建一个json对象，语法是什么？

"属性名" : 属性值,"属性名" : 属性值.........的格式！

注意：属性值的数据类型随意；可能是数字，可能是布尔类型，可能是字符串，可能是数组，也可能是一个json对象.....

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
        // 先创建一个JSON对象
        var address = {
            "city" :"安徽",
            "street" : "城关镇",
            "zipcode" : "123"
        }
        // 另一个JSON对象
        var user = {
            "usercode" : 111,
            "username" : "zhangsan",
            "sex" : true,
            "age" : 20,
            "aihao" : ["抽烟","喝酒","烫头"],
            "addr" : address
        }
        // 上面就等价于
        var user = {
            "usercode" : 111,
            "username" : "zhangsan",
            "sex" : true,
            "age" : 20,
            "aihao" : ["抽烟","喝酒","烫头"],
            "addr" :{
                "usercode" : 111,
                "username" : "zhangsan",
                "sex" : true,
                "age" : 20,
                "aihao" : ["抽烟","喝酒","烫头"],
                "addr" : address}
        }
    </script>
</body>
</html>

（2）如何去访问json对象？主要有两种方式：

第一种方式：使用 .属性名的方式

第二种方式：使用 ["属性名"] 的方式

   // 第一种方式
   console.log(address.city);
   console.log(user.addr.street);
   for (var i = 0;i<user.aihao.length;i++){
        console.log(user.aihao[i]);
   }
   // 第二种方式
   console.log(address["city"]);
   console.log(user["sex"]?"男":"女");

2、基于JSON的数据交换

（1）将JSON格式字符串转换为JSON对象

我们知道从后端java程序中响应回来的是字符串（json格式的字符串），那么你怎么把json格式的字符串转换成json对象呢？主要有两种方式：

JSON格式的字符串

var fromJavaServerJsonStr = "{"usercode" : 111, "age" : 20}";
// \是转义字符的作用，防止与外面的双引号冲突
var fromJavaServerJsonStr = "{\"usercode\" : 111, \"age\" : 20}";

第一种方式：使用eval函数

window.eval("var jsonobj1 = " + fromJavaServerJsonStr);
// 进行访问
alert(jsonobj1.usercode); // 111

第二种方式：调用javascript语言中的内置对象JSON的一个方法parse。

var jsonobj2 = JSON.parse(fromJavaServerJsonStr);
alert(jsonobj2.age); // 20

（2）基于JSON的数据交换

①对于后端，不在写html的代码，只负责把数据以JSON格式的字符串返回；后端变轻松了。

②对于前端，负责把接收到的JSON格式的字符串转换成JSON对象，并完成拼串的操作；前端变复杂了。

③整体上，后端只会出现后端的代码，前端只会出现前端的代码，便于维护！

第一种方式：对于静态的字符串

后端得到静态的数据，不在拼接HTML程序（写前端代码），只负责把数据响应回去，拼接成JSON格式的字符串

StringBuilder html = new StringBuilder();
html.append("<tr>");
html.append("<td>1</td>");
html.append("<td>王五</td>");
html.append("<td>20</td>");
html.append("<td>北京大兴区</td>");
html.append("</tr>");
html.append("<tr>");
html.append("<td>2</td>");
html.append("<td>李四</td>");
html.append("<td>22</td>");
html.append("<td>北京海淀区</td>");
html.append("</tr>");
// --------------------------------------------修改为
// 将以上程序拼接HTML，换成拼接JSON格式的字符串。
String jsonStr = "[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大兴区\"}, {\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}]";
// 响应JSON格式的字符串给前端。
out.print(jsonStr);

前端不在直接拿后端拼好的字符串格式，而是拿到JSON格式的字符串进行处理，在前端进行拼串

document.getElementById("stutbody").innerHTML = this.responseText
// -----------------------------------修改为
// 将json格式的字符串转换成json对象
var stuList = JSON.parse(this.responseText);
// 是一个数组，并且数组中有多个学生数据
var html = ""
for (var i = 0; i < stuList.length; i++) {
         var stu = stuList[i]
         html += "<tr>"
         html += "<td>"+(i+1)+"</td>"
         html += "<td>"+stu.name+"</td>"
         html += "<td>"+stu.age+"</td>"
         html += "<td>"+stu.addr+"</td>"
         html += "</tr>"
     }
document.getElementById("stutbody").innerHTML = html

第二种方式：连接数据库动态拼接JSON字符串

①创建数据库表

②后端连接数据库，拼接成JSON格式的字符串

package com.bjpowernode.javaweb.ajax;
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;
import java.io.PrintWriter;
import java.sql.*;
/**
 * @Author：朗朗乾坤
 * @Package：com.bjpowernode.javaweb.ajax
 * @Project：ajax
 * @name：AjaxRequest5Servlet
 * @Date：2022/12/6 17:13
 */
@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 响应到浏览器
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // 用于拼接成JSON的字符串
        StringBuffer json = new StringBuffer();
        String jsonobj = "";
        // 连接数据库
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            // 注册驱动
            Class.forName("com.mysql.jdbc.Driver");
            // 获取连接
            conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "123");
            // 获取预编译的数据库操作对象
            String sql = "select name,age,addr from t_student ";
            ps = conn.prepareStatement(sql);
            // 执行sql
            rs = ps.executeQuery();
            // 处理查询结果集
            json.append("[");
            while (rs.next()) { // 每循环一次，就拼接一次
                String name = rs.getString("name");
                String age = rs.getString("age");
                String addr = rs.getString("addr");
                // 拼成JSON格式的字符串对象，每次循环拼接的格式如下
                // {"name":" 王五 ","age": 20 ,"addr":" 北京大兴区 "},
                json.append(" {\"name\":\"");
                json.append(name);
                json.append("\",\"age\":");
                json.append(age);
                json.append(",\"addr\":\"");
                json.append(addr);
                json.append("\"},");
            }
            // 上面这样拼接，最后一个JSON格式的对象会多一个逗号，所以进行截串
            jsonobj = json.substring(0,json.length()-1) + "]";
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            // 释放资源
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        // 响应JSON格式的字符串给前端
        out.print(jsonobj);
    }
}

③前端对JSON格式的字符串进行处理，然后拼串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求，显示学生列表</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
            document.getElementById("btn").onclick = function () {
                // 1.创建核心对象
                var xhr = new XMLHttpRequest();
                // 2.注册回调函数
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            //document.getElementById("mybody").innerHTML = this.responseText
                            // 将json格式的字符串转换成json对象
                            var stuList = JSON.parse(this.responseText)
                            // 是一个数组，并且数组中有多个学生数据
                            var html = ""
                            for (var i = 0; i < stuList.length; i++) {
                                var stu = stuList[i]
                                html += "<tr>"
                                html += "<td>"+(i+1)+"</td>"
                                html += "<td>"+stu.name+"</td>"
                                html += "<td>"+stu.age+"</td>"
                                html += "<td>"+stu.addr+"</td>"
                                html += "</tr>"
                            }
                            document.getElementById("mybody").innerHTML = html
                        } else {
                            alert(this.status)
                        }
                    }
                }
                // 3.开启通道
                xhr.open("GET", "/ajax/ajaxrequest5", true)
                // 4.发送请求
                xhr.send()
            }
        }
</script>
    <input type="button" value="显示学员列表" id="btn">
    <table border="1px" width="50%">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        <!--具体的内容需要连接数据库动态获取，为了便于操作，写一个tbody-->
        <tbody id="mybody">
            <!--具体内容响应在这里-->
        </tbody>
    </table>
</body>
</html>

④效果展示，点击按钮

（3）fastjson组件优化代码

从上面代码来看，拼接JSON格式的字符串太痛苦，可以使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串

AJAX实现JSON与XML数据交换方法详解

1、JS中如何创建和访问JSON对象

2、基于JSON的数据交换

相关文章

猜您喜欢

今日热门