비동기통신 - AJAX와 JSON, 그리고 GSON

비동기통신 - AJAX와 JSON, 그리고 GSON

 

오늘은 이전 포스팅했던 AJAX를 보완하여 AJAX JSON, GSON에 대해서 조금 자세히 정리해보려 합니다. 

 

 

AJAX관련 포스팅

https://mundol-colynn.tistory.com/75

[AJAX] AJAX란 / AJAX 사용법 / AJAX 메소드

 

 

https://cloudapi.kddi-web.com/magazine/json-javascript-object-notation

 

동기식 통신과 비동기식 통신 

 

통신 과정에서 실행 흐름의 블로킹(blocking) 여부에 따라 구분

동기식 통신 (Synchronous communication):
동기식 통신에서는 요청을 보낸 후 응답이 도착할 때까지 실행이 중지되거나 블로킹됩니다.

즉, 요청 후 응답이 올 때까지 프로그램이 다른 작업을 수행할 수 없다는 것을 의미합니다. 동기 통신은 간단한 작업에 적합하며, 프로그램의 실행 순서가 중요한 경우에 유용합니다. 하지만 응답 시간이 길어지거나 요청 처리 시간이 오래 걸리는 경우 프로그램의 효율성이 떨어질 수 있습니다.

비동기식 통신 (Asynchronous communication):
비동기식 통신에서는 요청을 보낸 후 응답이 도착하는 동안 프로그램이 다른 작업을 계속 수행할 수 있습니다. 이 경우, 응답은 별도의 이벤트나 콜백 함수를 통해 처리되며, 요청에 따른 응답 순서가 보장되지 않습니다. 비동기 통신은 프로그램의 효율성을 높이기 위해 사용되며, 특히 복잡한 작업이나 오랜 시간이 걸리는 요청 처리에 적합합니다.

 

 

AJAX

AJAX는 "Asynchronous JavaScript and XML"의 약자로,

웹 애플리케이션에서 비동기적으로 서버와 데이터를 교환하는 기술입니다.

AJAX를 사용하면 페이지 전체를 다시 로드하지 않고도 서버에서 데이터를 가져와 웹 페이지의 특정 부분을 업데이트할 수 있습니다.

AJAX는 주로 JavaScript를 사용하여 구현되며, 웹 페이지에서 비동기식 통신을 수행하기 위해 XMLHttpRequest 객체를 사용합니다.

 

 

 

 

그렇다면 XMLHttpRequest는 무엇일까?

XMLHttpRequest는 웹 브라우저와 웹 서버 간에 데이터를 비동기적으로 주고받을 수 있는 자바스크립트 객체입니다.

 XMLHttpRequest는 AJAX를 구현하기 위해 처음 사용된 기술입니다 XML, JSON, 텍스트 등의 형식으로 데이터를 교환할 수 있기에, 웹 페이지에서 서버로부터 데이터를 가져와 웹 페이지의 특정 요소를 업데이트하는 데 사용됩니다.  사용자가 입력한 폼 데이터를 서버로 전송하거나 서버에 파일을 업로드하는 작업에 사용할 수 있습니다.

 

그러나 최근 JSON이 XML을 대체하여 사용됨에 따라, "Asynchronous JavaScript and JSON"으로 더 많이 사용되고 있습니다.

 

주요메소드

메소드	역할
new XMLHttpRequest()	XMLHttpRequest 객체 생성
open(method, url, async, user, password)	method: HTTP 메서드(GET, POST 등) url: 요청 URL async: 비동기 여부(true: 비동기, false: 동기) user: 사용자 이름(선택사항) password: 비밀번호(선택사항)
send(data)	POST 요청 시 전송할 데이터(null, FormData 객체 등)
abort()	현재 요청 중단
setRequestHeader(header, value)	요청 헤더 설정 header: 헤더 이름 value: 헤더 값
getResponseHeader(header)	응답 헤더의 값을 반환 header: 헤더 이름
getAllResponseHeaders()	모든 응답 헤더를 반환

 

AJAX의 작동순서

1) 웹 페이지에서 JavaScript를 사용하여 XMLHttpRequest 객체를 생성
2) XMLHttpRequest 객체를 사용하여 서버에 비동기식 요청 전송
3) 서버는 요청을 처리하고, 처리 결과를 웹 페이지로 재전송 
4) 웹 페이지에서 JavaScript를 사용하여 처리 결과를 받아, 페이지의 특정 부분을 업데이트

 

 

<JS코드>

    <script>
        function sendAjaxRequest() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("response").innerHTML = this.responseText;
                }
            };

			// open(): HTTP 메서드(GET, POST 등), 요청 URL, 비동기 여부(true: 비동기, false: 동기), 사용자명, 비밀번호
            xhttp.open("POST", "/ajaxrequest", true);
       

            var data = "param1=value1&param2=value2&param3=value3";
           // send(): POST 요청 시 전송할 데이터
            xhttp.send(data);
        }
    </script>

	<button onclick="sendAjaxRequest()">AJAX요청전송</button>
    <div id="response"></div>

<Java Servelt코드>

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

@WebServlet("/ajaxrequest")
public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //request로부터 전달받은 data를 가져옴
        String param1 = request.getParameter("param1");
        String param2 = request.getParameter("param2");
        String param3 = request.getParameter("param3");

        // 응답data지정 
        String result = "param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;

        // 응답을 클라이언트에 전송
        response.setContentType("text/html; charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(result);
    }
}

 

 

 

JSON

JSON은 "JavaScript Object Notation"의 약자로, 데이터를 교환하기 위한 데이터 타입입니다. AJAX와 JSON을 함께 사용하여 서버로부터 데이터를 비동기적으로 요청하고, JSON 형식으로 받아와서 웹페이지를 업데이트할 수 있습니다.

 

JSON 은 key-value 집합으로 구성됩니다.

key-value는 쉼표로 구분되며, 중괄호로 묶인 객체(object)와 대괄호로 묶인 배열(array)로 구성됩니다. 객체는 중괄호({})로 시작하고 끝나며, 이름-값 쌍의 집합으로 구성됩니다. 이름과 값은 콜론(:)으로 구분되며, 이름은 문자열(string)이어야 합니다. 배열은 대괄호([])로 시작하고 끝나며, 값의 리스트로 구성됩니다.

 

 

객체(Object): 객체는 중괄호({})로 묶인 key-value 모음

{
  "name": "gildong",
  "age": 30,
  "city": "hanyang"
}

배열(Array): 배열은 대괄호([])로 묶인 값들의 ordered-list

[
  "gildong",
  "30",
  "hanyang"
]

 

JSON 라이브러리 사용하기

 * https://code.google.com/archive/p/json-simple/downloads 접속 =>  json-simple-x.x.x.jar 다운로드 후 사용하고자하는 프로젝트의 WEB-INF\lib폴더에 붙여넣기

 

 

<JS코드>

  <script>
        function ajaxRequest() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                	var jsonResponse = JSON.parse(this.responseText);
                    document.getElementById("response").innerHTML = jsonResponse.param1
                    +jsonResponse.param2
                    +jsonResponse.param3;
                }
            };

            xhttp.open("POST", "/ajaxRequest", true);
            xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

            // JSON 데이터를 포함한 POST 요청
            var data = {
                param1: "value1",
                param2: "value2",
                param3: "value3"
            };
            xhttp.send(JSON.stringify(data));
        }
    </script>

    <button onclick="ajaxRequest()">AJAX Request</button>
    <div id="response"></div>

<Java Servelt코드>

import java.io.IOException;
import java.io.InputStreamReader;
import java.io.BufferedReader;
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 org.json.JSONObject;

@WebServlet("/api/data")
public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
		//  {} 빈 객체 생성
		JSONObject jOjb = new JSONObject();
       

        // 데이터 넣기
        jObj.put("param1", request.getParameter("param1"));
        jObj.put("param2", request.getParameter("param2"));
        jObj.put("param3", request.getParameter("param3"));
        
        // json타입의 response를 클라이언트에 전송
        response.setContentType("application/json; charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(jObj);
    }
}

 

 

 

Gson

Gson은 Google이 개발한 Java 라이브러리로, 

Java 객체를 JSON 형식의 문자열로 변환하거나(JSON 직렬화), JSON 형식의 문자열을 Java 객체로 변환하는(JSON 역직렬화) 작업을 수행할 수 있습니다.

자동 매핑: Gson은 Java 객체와 JSON 간의 자동 매핑 기능을 제공합니다. 객체의 필드 이름이 JSON의 키와 같으면 자동으로 매핑됩니다.

Gson라이브러리 사용하기

 *https://mvnrepository.com/artifact/com.google.code.gson/gson접속 =>  jar파일 다운로드 후 사용하고자하는 프로젝트의 WEB-INF\lib폴더에 붙여넣기

 

Gson 메소드

메소드	설명
Gson gson = new Gson()	Gson 인스턴스 생성 인스턴스를 사용하여 객체를 JSON 문자열로 변환하거나 JSON 문자열을 객체로 변환가능
gson.toJson(Object obj)	자바 객체를 JSON 문자열로 변환 인자로 전달된 객체를 JSON 형식의 문자열로 변환한 뒤 반환
gson.fromJson(String json, Class<T> classOfT)	JSON 문자열을 자바 객체로 변환 첫 번째 인자로 전달된 JSON 문자열을, 두 번째 인자로 전달된 클래스 타입의 객체로 변환한 뒤 반환
gson.fromJson(String json, Type typeOfT)	JSON 문자열을 자바 객체로 변환 첫 번째 인자로 전달된 JSON 문자열을 두 번째 인자로 전달된 Type 타입의 객체로 변환한 뒤 반환

 

Gson을 사용하여 회원정보를 읽은 후 response하기

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script>
        function requestMembersData() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var jsonResponse = JSON.parse(this.responseText);

                    var memberList = document.getElementById("memberList");
                    jsonResponse.forEach(function(member) {
                        var listItem = document.createElement("li");
                        listItem.innerHTML = "Name: " + member.name + ", Age: " + member.age + ", Email: " + member.email;
                        memberList.appendChild(listItem);
                    });
                }
            };

            xhttp.open("GET", "/api/members", true);
            xhttp.send();
        }
    </script>
</head>
<body>
    <button onclick="requestMembersData()">Request Member Data</button>
    <ul id="memberList"></ul>
</body>
</html>

public class Member {
    private String name;
    private int age;
    private String email;

    public Member(String name, int age, String email) {
        this.name = name;
        this.age = age;
        this.email = email;
    }

    // Getters and setters (생략)
}

import com.google.gson.Gson;
import java.io.IOException;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/api/members")
public class MyServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        ArrayList<Member> members = new ArrayList<>();
        members.add(new Member("홍길동", 30, "honggil@hihi.com"));
        members.add(new Member("김길동", 28, "kimgil@hihi.com"));



        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        
                
        // JSONArray jArr = new JSONArray();					
		// for(Member member : members) {
		//	JSONObject jObj = new JSONObject(); 			
		//	jObj.put("name", member.getName()); 					
		//	jObj.put("age", member.getAge()); 					
		//	jObj.put("eamil", member.getEmail()); 		
		//  jArr.add(jObj);
        //  기존 ArrayList를 결과로 전달하기 위해
        // JSON배열을 만들고, 배열의 인덱스이 JSONObject를 넣어 전달하였던 과정을
        // Gson이 대체 ( 자바 객체 =-> JSON문자열로 변환!)
        
     	new Gson().toJson(members, response.getWriter());
     
    }
}

 

위처럼, 
Gson을 사용하면 복잡한 객체의 구조와 커스텀 직렬화/역직렬화를 쉽게 처리할 수 있습니다.
Gson은 자동으로 객체의 필드와 필드값을 JSON key-value로 매핑하므로, 객체와 JSON 간의 필드 매핑을 수동으로 처리할 필요가 없습니다.

 

 

 

 

 

Reference

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

Ajax - Developer guides | MDN

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

XMLHttpRequest - Web APIs | MDN

 

https://www.json.org/

JSON

https://jquery.com/

jQuery

https://github.com/google/gson/blob/master/UserGuide.md

GitHub - google/gson: A Java serialization/deserialization library to convert Java Objects into JSON and back

+ 챗gpt활용!