Ajax, JSON 예제

JSP

Ajax, JSON 예제

devstep88 2023. 9. 12. 14:20

Ajax(Asynchronous JavaScript and XML):

클라이언트와 서버가 페이지 새로고침 없이 데이터를 주고받도록 구현하는 방식

JSON(JavaScript Object Notation):

javascript객체 문법을 따르는 문자기반의 데이터 포맷

문자열 형태로 존재 -> 네트워크를 통해 전송할 때 아주 유용

문자열에서 네이티브 객체로 변환하는 것을 파싱(Parsing)

네트워크를 통해 전달할 수 있게 객체를 문자열로 변환하는 과정은

문자열화(Stringification)이라고 한다.

SampleDto.java

public class SampleDto {
	private String name;
	private int age;
	
	public SampleDto() {
		super();
		// TODO Auto-generated constructor stub
	}
	
	public SampleDto(String name, int age) {
		super();
		this.name = name;
		this.age = age;
	}
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	
	@Override
	public String toString() {
		return "SampleDto [name=" + name + ", age=" + age + "]";
	}
}

AjaxForm.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajaxForm</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
	var v = 1;
	$("#myButton").click(function(){
		//get - $.get(url, data, function(rData) {}), post - $.post()
		
// 		$.get("ajaxSend.jsp", {"v" : v}, function(rData){
		$.getJSON("ajaxSend.jsp", {"v" : v}, function(rData){
			$.each(rData, function(){ // rData : 배열
				var name = this.name;
				var age = this.age;
				var tr = "<tr>";
					tr += "<td>" + name + "</td>";
					tr += "<td>" + age + "</td>";
					tr += "</tr>"; //<tr><td>홍길동</td><td>20</td></tr>
					
					$("#myTable").append(tr);
			});
		});
	});
});
</script>
</head>
<body>
	<input type="button" value="데이터 가져오기" id="myButton"/>
	<table border="1" id="myTable">
			<tr></tr>	
	</table>
</body>
</html>

Ajaxsend.jsp

<%@page import="com.gu.vo.SampleDto"%>
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%@page import="java.util.ArrayList"%>

<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	List<SampleDto> list =  new ArrayList<>();
	list.add(new SampleDto("홍길동", 20));
	list.add(new SampleDto("최길동", 30));
	list.add(new SampleDto("고길동", 40));
	list.add(new SampleDto("김길동", 50));
	list.add(new SampleDto("초길동", 60));
	
	//JSONArray - [], JSONObject - {}
	JSONArray jsonArray = new JSONArray(); // []
	for(SampleDto dto : list){
		JSONObject jsonObject = new JSONObject(); // {}
		jsonObject.put("name", dto.getName()); // {"name" : "홍길동"}
		jsonObject.put("age", dto.getAge()); // {"name" : "홍길동", "age" : 20}
		jsonArray.add(jsonObject); //[{"name":"홍길동", "age":20}, {}, {}]
	}
	
	String data = jsonArray.toJSONString();
	out.print(data);
%>

data.jsp

${data}