코딩 개발/Java

AJAX - JSON 이용

호소세 2023. 6. 9. 22:42
728x90
반응형

https://pabeba.tistory.com/167

 

Ajax

Ajax란? AJAX는 Asynchronous JavaScript and XML의 약자로, 말 그대로 JavaScript와 XML을 이용한 비동기적 정보 교환 기법입니다. 이름에 XML이라고 명시되어있긴 하지만 JSON이나 일반 텍스트 파일과 같은 다른

pabeba.tistory.com

Ajax를 한번 읽어보시고 오시면 더 이해가 잘 됩니다.

 

JSON이란?

JSON은 JavaScript Object Notation의 약자입니다. JSON은 JavaScript에서 사용되는 데이터 교환 형식으로, 텍스트를 사용하여 속성-값 쌍, 배열 자료형 또는 기타 모든 시리얼화 가능한 값 또는 키-값 쌍으로 이루어진 데이터 오브젝트를 전달합니다.

 

JSON은 XML과 유사하지만, XML은 태그와 속성을 사용하여 데이터를 표현하는 반면, JSON은 키와 값을 사용하여 데이터를 표현합니다. JSON은 XML보다 간결하고 이해하기 쉽기 때문에, 최근에 XML을 대체하는 주요 데이터 포맷으로 사용되고 있습니다.

 

JSON은 웹 서비스, 웹 애플리케이션, 모바일 애플리케이션 등 다양한 분야에서 사용되고 있습니다. JSON은 데이터를 교환하고 저장하는 데 유용한 데이터 포맷이며, 배우고 사용하기 쉽기 때문에, 많은 개발자들에게 널리 사용되고 있습니다.

 

JSON 특징

  • 인간이 읽을 수 있는 텍스트를 사용합니다.
  • 키와 값을 사용하여 데이터를 표현합니다.
  • XML보다 간결하고 이해하기 쉽습니다.
  • 다양한 프로그래밍 언어에서 지원됩니다.

 

예시

위에 설명에 보시면 속성-값 쌍, 배열 자료형 등으로 객체를 전달한다고 하는데 어떻게 하면 조금 더 이해가 잘 되게 작성할 수 있을까 생각해 봤는데! 그냥 다 짬뽕해서 예시를 들으면 좋겠다고 생각을 했어요. 더욱 이해가 안 될 수도 있다고 생각했지만 모든 것을 보여드릴 수 있다는 장점이 있달까요. Like 짬짜탕면

짬짜탕면

예시 1단계 (key-value 쌍 & Object)

사실 통신으로 텍스트 파일이 왔다갔다 하는 것이라 자바 파일로만 어떠한 데이터가 이동하는지 알 수 있습니다. 첫 번째 key-value 쌍과 Object에 대한 예는 Class로 확인해 볼게요.

아 그리고 JSON 관련 Class 는 json-simple.jar를 다운로드하여서 lib에 넣어야 합니다.

(src/main/webapp/WEB-INF/lib/json-simple.jar) 

public class TestJSONObject {
	public static void main(String[] args) {
		JSONObject json=new JSONObject();
		json.put("id", "javaking");
		json.put("name", "아이유");
		System.out.println(json.toString());
		MemberVO vo=new MemberVO("angel","이강인","토트넘");
		JSONObject json2=new JSONObject(vo);
		System.out.println(json2.toString());
	}
}

이 코드를 실행하면 어떠한 답이 나올까요?

{"name":"아이유", "id":"javaking"}

{"address":"토트넘", "name":"이강인", "id":"angel"}

네. 저렇게 중괄호 안에 {KEY : VALUE, KEY : VALUE} 이렇게 아름답게 값이 나옵니다.

텍스트 값이라서 자바스크립트에서 객체화시켜야 값을 사용할 수 있더라고요. 이제는 바로 화면에 나타내보겠습니다.

 

예제 2. Javascript & JSON

JSP 파일과 Servlet 파일을 사용하겠습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>step9-ajax-JSONArray</title>
</head>
<body>
<div>
<button type="button" class="btn btn-primary" onclick="testJSONArray()">JsonArrayTest</button>
<script type="text/javascript">
	function testJSONArray() {
		let xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
				//alert(xhr.responseText);
				let menuList=JSON.parse(xhr.responseText);
				for(let i=0;i<menuList.length;i++){
					alert(menuList[i].maker);
					console.log(menuList[i].model);
				}
			}
		}
		xhr.open("get", "JSONArrayTestServlet.do");
		xhr.send();
	}
</script>
</div>
</body>
</html>

 

Servlet 파일은 더 많은 예시를 보여드리기 위해 욕심을 부린 나머지 조금 길 수 있습니다.

죄송하지만 저의 욕심에 동조해 주세요.

@WebServlet("/JSONArrayTestServlet.do")
public class JSONArrayTestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");		
		PrintWriter out=response.getWriter();
		CarVO sonata = new CarVO("sonata","hyundai",300);
		CarVO k3 = new CarVO("k3","kia",200);
		JSONObject json1=new JSONObject();
		JSONObject json2=new JSONObject();
		json1.put("model", sonata.getModel());
		json1.put("maker", sonata.getMaker());
		json1.put("price", sonata.getPrice());
		json2.put("model", k3.getModel());
		json2.put("maker", k3.getMaker());
		json2.put("price", k3.getPrice());
		JSONArray jsonArray=new JSONArray();
		jsonArray.put(json1);
		jsonArray.put(json2);
		out.print(jsonArray.toString());
		out.close();
	}
}

 

먼저 jsp 파일을 해석해 볼까요?

 

1. script 태그부터 해석해 볼게요

2. 버튼을 누르면 testJSONArray() 함수가 실행됩니다.

3. XMLHttpRequest() 객체 생성합니다.

4. xhr.onreadystatechange

-> 응답이 들어오면 function 이 실행됩니다.

5.  if(xhr.readystate ===4 && xhr.status ===200)의 뜻은 응답완료하고 정상수행되었다면입니다.

6. 이제부터 중요합니다. 요청 온 텍스트 파일이 

[{"price":300,"maker":"hyundai","model":"sonata"},{"price":200,"maker":"kia","model":"k3"}]

이렇게 생겼는데요.

객체화를 하지 않으면 그저 그런 텍스트일 뿐이지만 JSON.parse(xhr.responseText)를 사용해서 객체화하면 객체로서 사용할 수 있습니다.

7. for 문을 보면 carList의 i 번째 값의 maker를  alert를 하고 , console.log 에는 model을 나오게 합니다.

8. xhr.open("get", "JSONArrayTestServlet.do");

-> http 메서드와 url을 작성해 주면서 어떠한 방식과 위치로 요청을 보내는지 작성합니다.

9. xhr.send()

-> 요청을 보내줍니다.

 

서블릿에 보내주면 서블릿에서

JSONObject 들을 만들어서 JSONArray에 넣어준 다음 텍스트로 보내줍니다.

 

소감

이런 식으로 하면 데이터베이스에 저장된 데이터들을 객체에 잘 담아서 보내줄 수 있겠습니다! 아주 간단하게 말이죠. 

오늘도 참 좋은 글을 읽었습니다.

과정 자체에서 자기 스스로를 속이지 말라고 합니다. 진심을 다해서 모든 일을 해야 합니다. 가슴에 새기고 살아가겠습니다.

https://m.blog.naver.com/lhd1371/223124611254

반응형