AJAX004——JSONを用いたデータ交換

JSONによるデータ交換

JSONオブジェクトの作成とアクセス方法


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
</head>
<body>
<script type="text/javascript">
    // オブジェクトの定義方法
  var userInfo = {
    "id": 1,
    "name": "張三",
    "age": 18,
    "location": "北京市",
    "interests": ["バスケットボール", "サッカー", "水泳"],
    "residence":{"city":"北京", "street":"西二旗"}
  }
  
  // アクセス方法その1：
  console.log(userInfo.id);
  console.log(userInfo.name);
  console.log(userInfo.age);
  console.log(userInfo.location);
  console.log(userInfo.interests[0]);
  console.log(userInfo.interests[1]);
  console.log(userInfo.interests[2]);
  console.log(userInfo.residence.city);
  console.log(userInfo.residence.street);

  // アクセス方法その2：
  console.log(userInfo["id"]);
  console.log(userInfo["name"]);
  console.log(userInfo["age"]);
  console.log(userInfo["location"]);
  console.log(userInfo["interests"][0]);
  console.log(userInfo["interests"][1]);
  console.log(userInfo["interests"][2]);
  console.log(userInfo["residence"]["city"]);
  console.log(userInfo["residence"]["street"]);

</script>

</body>
</html>

バックエンドから送信されるJSON文字列を、フロントエンドでJSONオブジェクトに変換する方法

// "{\"name\" : \"zhangsan\", \"password\" : \"1233344\"}" サーバーから返却された文字列
var jsonString = "{\"name\" : \"zhangsan\", \"password\" : \"1233344\"}"
// ブラウザに組み込まれたJSONオブジェクト
var jsonObject = JSON.parse(jsonString)
console.log(jsonObject.name)
console.log(jsonObject.password)

バックエンドでJSON形式の文字列を構築し、フロントエンドブラウザにレスポンスを返す（オンラインJSONフォーマッター・バリデーター（Be JSON）を使用可）

package com.zwm.ajax.web;

import com.zwm.ajax.utils.DBUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

@WebServlet("/ajaxservlet008")
public class ajaxservlet008 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out = response.getWriter();


        Connection connection = null;
        PreparedStatement  preparedStatement = null;
        ResultSet resultSet = null;

        try {
            connection = DBUtil.getConnection();
            String sql = "select * from stu";
            preparedStatement = connection.prepareStatement(sql);
            resultSet = preparedStatement.executeQuery();
            StringBuilder json =  new StringBuilder();
            json.append("[");
            while (resultSet.next()){
                int id = resultSet.getInt("id");
                String name = resultSet.getString("username");
                int age = resultSet.getInt("age");
                String location = resultSet.getString("address");
                json.append("{\"id\":\"");
                json.append(id);
                json.append("\",\"name\":\"");
                json.append(name);
                json.append("\",\"age\":\"");
                json.append(age);
                json.append("\",\"location\":\"");
                json.append(location);
                json.append("\"},");
            }
            json.append("]");
            // 最後のカンマを削除して形式を正しくする
            String str = json.toString();
            char charToRemove = ',';
            int lastIndexOfChar = str.lastIndexOf(charToRemove);
            if (lastIndexOfChar != -1) {
                str = str.substring(0, lastIndexOfChar) + str.substring(lastIndexOfChar + 1);
            }
            
            
            out.print(str);
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,preparedStatement,resultSet);
        }
    }
}


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="button" value="学生リスト表示" id="btn">
| ID | 名前 | 年齢 | 住所 |
|---|---|---|---|
<script type="text/javascript">
  window.onload = function () {
    document.getElementById("btn").onclick = function () {
      var xhr = new XMLHttpRequest();
      xhr.open("get", "/ajax001/ajaxservlet008", true);
      xhr.send();
      xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
          if(xhr.status == 200){
            // document.getElementById("stutbody").innerHTML = xhr.responseText;
            // JSON文字列をJSONオブジェクトに変換
            var studentList = JSON.parse(xhr.responseText); // JSON配列で複数のデータが含まれる
            var html = "";
            for (var i = 0; i < studentList.length ; i++) {
              var student = studentList[i];
              html += "<tr>" ;
              html += "<td>" + student.id + "</td>" ;
              html += "<td>" + student.name + "</td>" ;
              html += "<td>" + student.age + "</td>" ;
              html += "<td>" + student.location + "</td>" ;
              html += "</tr>" ;
            }
            document.getElementById("stutbody").innerHTML = html;
          }else {
            alert(xhr.status);
          }
        }
      }
    }
  }
</script>
</body>
</html>

JSON文字列の手動構築は煩雑であるため、アリババのfastjsonライブラリを利用することで、JavaオブジェクトをJSON文字列に変換可能

// fastjsonの使用例
package com.zwm.javaweb.json;

import com.alibaba.fastjson.JSON;
import java.util.ArrayList;
import java.util.List;

public class FastjsonTest {
    public static void main(String[] args) {
        User user = new User(1,"zhansan",23,"浙江嘉兴");
        System.out.println(user);
        // UserオブジェクトをJSON文字列にシリアライズ（アリババfastjsonライブラリのJSONクラスを使用）
        // fastjsonのJSONクラスにはすべてのメソッドがstaticである
        String jsonStr = JSON.toJSONString(user);
        System.out.println(jsonStr);
        
        User user2 = new User(1,"zhansan2",23,"浙江嘉兴2");
        User user3 = new User(1,"zhansan3",23,"浙江嘉兴3");
        List<User> userList = new ArrayList<>();
        userList.add(user);
        userList.add(user2);
        userList.add(user3);
        // UserオブジェクトのリストをJSON文字列にシリアライズ
        String jsonStr2 = JSON.toJSONString(userList);
        System.out.println(jsonStr2);
    }
}

プロジェクトの最適化

package com.zwm.ajax.web;

import com.alibaba.fastjson.JSON;
import com.zwm.ajax.pojo.User;
import com.zwm.ajax.utils.DBUtil;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/ajaxservlet009")
public class ajaxservlet009 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/xml;charset=utf-8");
        PrintWriter out = response.getWriter();


        Connection connection = null;
        PreparedStatement  preparedStatement = null;
        ResultSet resultSet = null;

        try {
            connection = DBUtil.getConnection();
            String sql = "select * from stu";
            preparedStatement = connection.prepareStatement(sql);
            resultSet = preparedStatement.executeQuery();

            List<User> userList = new ArrayList<>();

            while (resultSet.next()){
                int id = resultSet.getInt("id");
                String name = resultSet.getString("username");
                int age = resultSet.getInt("age");
                String location = resultSet.getString("address");
               User user = new User(id,name,age,location);
                // fastjsonを使用してJSON文字列を生成
                userList.add(user);
            }
            out.print(JSON.toJSONString(userList));
        } catch (Exception e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,preparedStatement,resultSet);
        }
    }
}

注：webプロジェクトでfastjsonを使用するには、fastjson-1.2.2.jarをlibディレクトリに配置する必要がある。

タグ: javascript JSON AJAX Java fastjson

6月1日 20:27 投稿

異端開発室

AJAX004——JSONを用いたデータ交換

JSONによるデータ交換

ホットタグ