본문 바로가기
Java Web Programming/5. JavaScript | Ajax | jQuery (JSON)

[Ajax/JSON] JSON을 이용한 Ajax 통신(JSON Object & JSON Array)

by 파프리카_ 2020. 10. 6.
728x90
반응형

[JSON Object]

Model

 

> 요소  : model (String) , price(int), maker(String)

/CarDTO.java

package model;

public class CarDTO {
	private String model;
	private int pirce;
	private String maker;
	
	public CarDTO() {
		super();
	}
	
	public CarDTO(String model, int pirce) {
		super();
		this.model = model;
		this.pirce = pirce;
	}

	public CarDTO(String model, int pirce, String maker) {
		super();
		this.model = model;
		this.pirce = pirce;
		this.maker = maker;
	}

	public String getModel() {
		return model;
	}

	public void setModel(String model) {
		this.model = model;
	}

	public int getPirce() {
		return pirce;
	}

	public void setPirce(int pirce) {
		this.pirce = pirce;
	}

	public String getMaker() {
		return maker;
	}

	public void setMaker(String maker) {
		this.maker = maker;
	}

	@Override
	public String toString() {
		return "CarDTO [model=" + model + ", pirce=" + pirce + ", maker=" + maker + "]";
	}
	
	
}

 

> getCarInfo(maker) : maker를 입력받아, CarDTO의 정보를 반환해주는 기능

/CarDAO.java

package model;

public class CarDAO {
	private static CarDAO instance = new CarDAO();
	private CarDAO() {}
	public static CarDAO getInstance() {
		return instance;
	}
	
	public CarDTO getCarInfo(String maker) {
		CarDTO car= null;
		
		if (maker.contentEquals("테슬라")) {
			car = new CarDTO("모델5", 1000);
		} else if (maker.contentEquals("기아")) {
			car = new CarDTO("K5", 800);
		} else if (maker.contentEquals("쌍용")) {
			car = new CarDTO("티볼리", 600);
		}
		
		return car;
	}
}

Servlet

/FindCarJSONServlet.java

package step1;

import java.io.IOException;
import java.io.PrintWriter;

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;

import model.CarDAO;
import model.CarDTO;


@WebServlet("/FindCarJSONServlet")
public class FindCarJSONServlet 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();
		
		String maker = request.getParameter("maker");
		CarDTO car = CarDAO.getInstance().getCarInfo(maker);
		
		JSONObject json = new JSONObject(car);
		
		out.print(json.toString());
		
		out.close();
	}


}

JSP

/step1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax(JSON을 이용하여 통신)</title>
<script type="text/javascript">
	
	var xhr;
	var modelComp;
	var priceComp;
	
	function startAjax() {
		//1. Form component 가져와서 변수에 할당
		var makerComp = document.getElementById("maker");
		modelComp = document.getElementById("modelView");
		priceComp = document.getElementById("priceView");
		
		//2. maker가 비어있으면 = 입력이 안되어있으면,
		//   기존 modelComp와 priceComp를 지운다
		if (makerComp.value === "") {
			modelComp.innerHTML = "";
			priceComp.innerHTML = "";
			return; //실행 중단
		}
		
		//3. XMLHttpRequest 객체 생성 -> xhr에 할당
		xhr = new XMLHttpRequest;
		//alert(xhr);
		
		//4. 요청에 대한 응답이 완료되면 실행될 함수 등록
		xhr.onreadystatechange = callback;
		
		
		//5. open (get인 경우 url에 param 보내기)
		xhr.open("GET", "FindCarJSONServlet?maker="+makerComp.value);
		
		//6. send (get인 경우 null)
		xhr.send(null);
	}
	
	function callback(){
		if (xhr.readyState == 4 && xhr.status == 200){
			//alert(xhr.responseText);
			
			//응답받은 정보를 JSON(javascript object)로 변환
			var json = JSON.parse(xhr.responseText);
			//alert(json.model);
			//alert(json.price);
			modelComp.innerHTML = json.model;
			priceComp.innerHTML = json.price;
		}
	}
	
</script>
</head>
<body>
	<select id="maker" onchange="startAjax()">
		<option value="">---</option>
		<option value="테슬라">테슬라</option>
		<option value="기아">기아</option>
		<option value="쌍용">쌍용</option>
	</select> 
	
	모델 : <span id="modelView"></span> 
	| 가격 : <span id="priceView"></span>
</body>
</html>

[ 결과 browser ]

1. 시작 화면

 

2. 모델 선택 했을 때, 

-- ----------------------------------------------------------------------------------------

 

[ JSON Array ] - table형식으로 출력

Servlet

 

/JSONArrayServlet.java

package step2;

import java.io.IOException;
import java.io.PrintWriter;
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;

import org.json.JSONArray;


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

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		ArrayList<String> list = new ArrayList<String>();
		list.add("초코빵");
		list.add("딸기빵");
		list.add("바나나빵");
		
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		JSONArray ja = new JSONArray(list);
		out.print(ja.toString());
		out.close();
	}


}

JSP

 

익명함수 방식으로 callback을 실행해본다. (간결함을 위해!)

&  JSON Array를 받아 Table 형식으로 출력하기

&   Table에 있는 값 비우기(버튼) 기능

/step2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON Array를 이용해 ajax 통신하는 예제</title>

<script type="text/javascript">
	
	var xhr;
	
	function startAjax() {		
		//1. XMLHttpRequest 객체 생성 -> xhr에 할당
		xhr = new XMLHttpRequest();
		//alert(xhr);
		
		//2. 익명 함수 방식으로 콜백함수 등록
		//   (요청에 대한 응답이 완료되면 실행될 함수 등록)
		//   - callback 함수를 따로 생성하는 것이 아닌,
		//     이름이 없는 함수를 바로 할당함
		
		xhr.onreadystatechange = function () {
			if (xhr.readyState==4 && xhr.status==200){
				//3. JSON.parse()를 통해 js 배열로 변환
				//JSON : 내장 클래스 (브라우저 지원)
				var ja = JSON.parse(xhr.response); 
				//alert(ja.length);
				
				//4. 데이터 받아오기
				
				//for문으로 읽기 -> table로 만들기
				var tb = ""; //tb = tbody에 들어갈 tr & td
				for (var i = 0; i < ja.length; i++) {
					//alert(ja[i]);
					tb += "<tr>";
					tb += "<td>"+ja[i]+"</td>";
					tb += "</tr>";
				}
				//table에 value(innerHTML) 할당
				document.getElementById("bread").innerHTML = tb;
				
			}//if
		}//callback
		
		//5. open
		xhr.open("GET", "JSONArrayServlet");
		
		//6. send
		xhr.send();
	}
	
	function clearBread() {
		document.getElementById("bread").innerHTML = "";
	}
</script>
</head>
<body>
	<input type="button" value="JSON Array확인" 
		onclick="startAjax()">
	<input type="button" value="비우기" onclick="clearBread()">
		
	<br><br>
	
	<table border="1"> 
		<thead>
			<tr>
				<th>빵이름</th>
			</tr>
		</thead>
		
		<tbody id="bread">
			<tr>
				<td></td>
			</tr>
		</tbody>
	</table>
</body>
</html>

[ 결과 browser ]

1. 시작 화면

 

2. JSON Array 확인 클릭

 

3. 비우기 클릭

728x90
반응형

'Java Web Programming > 5. JavaScript | Ajax | jQuery (JSON)' 카테고리의 다른 글

[Ajax/jQuery] 제이쿼리 기초 : 시작하기 & 예제 코드  (0) 2020.10.06
[Ajax/JSON] JSON을 이용한 Ajax 통신 2 (JSON Array + JSON Object)  (0) 2020.10.06
[Ajax/JSON] JSON Basic! (개념, 특징, 기본문법)  (0) 2020.10.06
[JSP/Ajax] Ajax 방식으로 정보 검색 - get / post 방식 (응답 대기중)  (0) 2020.10.05
[JSP/Ajax] 동기적 방식과 비동기적 방식(ajax)  (0) 2020.10.05

관련글

티스토리툴바