본문 바로가기
TIL : Javascript

JSON, GSON과 Ajax

by 이페코장인 2024. 3. 11.

Ajax란?

Ajax는 Asynchronous JavaScript and XML의 약자로, 말 그대로 비동기식(asynchronous)으로 클라이언트(사용자)와 서버가 데이터를 주고 받는 통신 방식으로, text, html, json, csv, xml등 여러 형식을 사용할 수 있다.

기존의 동기식(정적) 데이터 통신 방식으로 동작하는 웹 애플리케이션은 클라이언트가 서버로 데이터를 요청하면 응답을 받을 때까지 대기를 하고 응답이 완료돼야 다음 요청을 하게 된다. 반면 비동기식(동적) 통신 방식에서는 응답을 받지 않아도 요청을 여럿 보내고 처리가 여럿 진행되는 방식이다. 

이런 요청을 하는 방식이 javascript로 작성된 Ajax인 것이다.

출처: 위키피디아

 

JSON이란?

Ajax설계에서 일반적으로 가장 자주 사용되는  데이터 형식이 json이다. Json은 JavaScript Object Notation의 약자로, text형태의 데이터를 저장/통신 용도로 쓸 수 있는 표준 파일 형식이다. Javascript에서 탄생했으나 언어 독립적이라 대부분의 언어에서 사용 가능하다.

기본 구조로 중괄호 내부에 키 : 값 이 구성된다. {"key" : value}

key는 반드시 문자열이어야 하며, value는 String, Number, Boolean, Object, null이 될 수 있다.

 

{
  "first_name": "John",
  "last_name": "Smith",
  "is_alive": true,
  "age": 27,
  "address": {
    "street_address": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postal_code": "10021-3100"
  },
  "phone_numbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    }
  ],
  "children": [
    "Catherine",
    "Thomas",
    "Trevor"
  ],
  "spouse": null
}

JSON 예시

 

 

GSON이란?

Google JSON의 약자로, Google에서 만든 오픈 자바 라이브러리이다. JSON파일을 쉽게 다룰 수 있는 메소드를 제공한다. 다음 위키피디아의 예시에서 GSON을 사용해 johnDoe라는 데이터를 자바 객체 형태에서 JSON데이터 포맷으로 바꾸고 있다.

package example;

// Car 객체 클래스
public class Car {
    public String manufacturer;
    public String model;
    public double capacity;
    public boolean accident;

    public Car() {
    }

    public Car(String manufacturer, String model, double capacity, boolean accident) {
        this.manufacturer = manufacturer;
        this.model = model;
        this.capacity = capacity;
        this.accident = accident;
    }

    @Override
    public String toString() {
        return ("Manufacturer: " + manufacturer + ", " + "Model: " + model + ", " + "Capacity: " + capacity + ", " + "Accident: " + accident);
    }
}
package example;

// Person객체 클래스
public class Person {
    public String name;
    public String surname;
    public Car[] cars;
    public int phone;
    public transient int age;

    public Person() {
    }

    public Person(String name, String surname, int phone, int age, Car[] cars) {
        this.name = name;
        this.surname = surname;
        this.cars = cars;
        this.phone = phone;
        this.age = age;
    }

    @Override
    public String toString() {
        StringBuilder sb = new StringBuilder();
        sb.append("Name: ").append(name).append(" ").append(surname).append("\n");
        sb.append("Phone: ").append(phone).append("\n");
        sb.append("Age: ").append(age).append("\n");
        int i = 0;
        for (Car car : cars) {
            i++;
            sb.append("Car ").append(i).append(": ").append(car).append("\n");
        }
        return sb.toString();
    }
}

 

위의 Car, Person 두 자바 객체에 johnDoe라는 데이터를 넣어서 JSON으로 만들기 위해 아래의 메소드(gson.toJson)를 사용하면 된다.

 

package main;

import example.Car;
import example.Person;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

public class Main {
    public static void main(String[] args) {
        
        // pretty형태로 출력 설정
        Gson gson = new GsonBuilder().setPrettyPrinting().create();
        
        // 데이터 입력
        Car audi = new Car("Audi", "A4", 1.8, false);
        Car skoda = new Car("Škoda", "Octavia", 2.0, true);
        Car[] cars = {audi, skoda};
        Person johnDoe = new Person("John", "Doe", 2025550191, 35, cars);
        
        // JSON으로 변환, 출력
        System.out.println(gson.toJson(johnDoe));
    }
}

 

출력되는 결과는 다음과 같이 표준 JSON형태이다.

 

{
  "name": "John",
  "surname": "Doe",
  "cars": [
    {
      "manufacturer": "Audi",
      "model": "A4",
      "capacity": 1.8,
      "accident": false
    },
    {
      "manufacturer": "Škoda",
      "model": "Octavia",
      "capacity": 2.0,
      "accident": true
    }
  ],
  "phone": 2025550191
}

 

'TIL : Javascript' 카테고리의 다른 글

[Javascript] 제어문  (0) 2024.03.18
[jQuery] 데이터 출력  (0) 2024.03.08
[Javascript] 데이터 출력  (0) 2024.03.07