본문 바로가기
Ajax & jQuery

Ajax(4) - JSON형식 데이터를 읽어와 Javascript의 객체 생성 하기

rimkongs 2019. 10. 23. 18:19
Ajax를 이용하여 JSON 데이터 읽어와서 Javascript의 객체 생성하기 
1. JSON 기초 실습 - jsonUse.jsp
2. JSON 방식으로 미리 만들어둔 상태의 데이터를 읽어오기 - newsTitleJSON.jsp, newsTitleJSON_ok.jsp
3. DB에서 가져온 데이터(TEXT형태)를 JSON으로 변환하여 읽어오기 - newsTitleJSON2.jsp, newsTitleJSON2_ok.jsp
4. Javascript에 클래스기능 만들기 (원래는 없음) - member.js, log.js
5. Javascript에 패키지 만들기- member_json.js, memberJSONClass.jsp

 

<Ajax의 기본적인 흐름>
1. db에 저장된 text 데이터를 읽어낸다 
2. text 데이터를 xml로 바꾼다 
3. 그 xml 데이터를 .jsp 에서 읽어냄 

 

<JSON이란?>

1. JSON은 경량(Lightweight)의 DATA-교환 형식

2. Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.

3. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.

4. 특정 언어에 종속되지 않으며, 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링 할 수 있는 라이브러리를 제공한다.

 

jsonUse.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8"); 
	String cp = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">
#result{
	border: 1px dotted #0000ff;
}

div{
	margin: auto;
	width: 600;
	height: 100%;
}
</style>

<script type="text/javascript">
	
	// 여기서 수동으로 JSON 파일 만들고 아래 body에다 뿌릴거임
	// 나중에 서로 다른 파일에서 실행
	
	// JSON : 배열형식, key, value로 쓴다 
	// value값 안에 또 여러개의 값인 경우는 JSON형태를 지켜서 써주면 됨
	function useJson() {
	
	var userArray = [
		{
			userId:"suzi", // key: userId, value: "suzi"
			name:"배수지",
			age:25,
			phone:[ // 전화번호가 여러 개인경우 (구조 그대로)
					{home: ["031-111-1111","032-222-2222"]},
					{office:["02-333-3333","061-44-2222"]}				
				]
		},
		
		{
			userId:"gildong",
			name:"홍길동",
			age:28,
			phone:[{},{}] // 전화번호가 없는 경우도 위 구조 똑같이 
		}
	];
	
	
	// JSON으로부터 한 개의 데이터 가져오기
	var id = userArray[0].userId;
	var name = userArray[0].name;
	var age = userArray[0].age;
	var homePhone1 = userArray[0].phone[0].home[0]; // 031-111-1111
	var homePhone2 = userArray[0].phone[0].home[1];
	
	var officePhone1 = userArray[0].phone[1].office[0]; // 031-111-1111
	var officePhone2 = userArray[0].phone[1].office[1];
	
	var printData = id + "," + name + "," + age + "<br/>";
	
	printData += "userArray[0].phone[0].home[0] : " + 
		homePhone1 + "<br/>";
		
	printData += "userArray[0].phone[0].home[1] : " + 
		homePhone2 + "<br/>";
	
	printData += "userArray[0].phone[1].office[0] : " + 
		officePhone1 + "<br/>";
		
	printData += "userArray[0].phone[1].office[1] : " + 
		officePhone2 + "<br/>";
		
	
	// 반복문으로 출력하자	
	for (var i=0; i<userArray.length; i++) {
		
		var uid = userArray[i].userId;
		var uname = userArray[i].name;
		var uage = userArray[i].age;
		
		printData += uid + "," + uname + "," + uage + "<br/>";
		
	}	
		
	var resultDiv = document.getElementById("result");
	
		resultDiv.innerHTML = printData;
	}
	
	window.onload = function() {
		useJson();
	}
</script>
</head>
<body>

<h1>JSON (Javascript Object Notation)</h1>
<hr/>

<div id="result"></div>

</body>
</html>

 

 

 

newsTitleJSON.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8"); 
	String cp = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">
.news{
	font-size: 9pt;
	display: block;
	margin: 0 auto;
	background: yellow;
	color: blue;
	border: 1px dashed black;
	width: 50%;
}

.newsError{
	font-size: 9pt;
	display: block;
	margin: 0 auto;
	background: orange;
	color: red;
	border: 1px dashed black;
	width: 50%;
}
</style>

<script type="text/javascript" src="js/httpRequest.js"></script>
<script type="text/javascript">

function newsTitle() {
	
	sendRequest("newsTitleJSON_ok.jsp",null,displayNewsTitle,"GET");
	setTimeout("newsTitle()",3000);	//자기자신을 3초마다
	
}


//콜백함수 여기서 받아줌
function displayNewsTitle() {	
	
	if(httpRequest.readyState==4){
		if(httpRequest.status==200){
			
			// JSON방식은 text로 넘어옴
			var jsonStr = httpRequest.responseText;
			//alert(jsonStr);
			
			//eval은 변수를 javascript의 함수처럼 사용하는 명령어
			
			//jsonStr을 객체화 시킴 (위에까진 그냥 text였음)
			var jsonObject = window.eval('(' + jsonStr + ')');
			//alert(jsonObject.count);
			//alert(jsonObject.title[2].publisher);
			//alert(jsonObject.title[2].headline);
			
			var count = jsonObject.count;
			
			if(count>0) {	
				var html = "<ol>";
				
				for(var i=0; i<jsonObject.title.length;i++) {
					
					var publisherStr = 
						jsonObject.title[i].publisher;
					var headlineStr = 
						jsonObject.title[i].headline;
					
					html += "<li>" + headlineStr + "[" +
						publisherStr + "] </li>";
					}
				
				html += "</ol>";
				var newsDiv = document.getElementById("newsDiv");
				newsDiv.innerHTML = html;
				
			}
			
		}
	}
	
}

window.onload = function() {
	newsTitle();
}

</script>


</head>
<body>

<h1>NewsTitleJSON</h1>
<h2>헤드라인 뉴스</h2>
<hr/>

<div style="width: 50%; margin:0 auth;">뉴스보기</div>
<div id="newsDiv" class="news"></div>

</body>
</html>
newsTitleJSON_ok.jsp - json방식으로 미리 만들어둔 상태 (원래는 db에서 text를 가져와 json방식으로 변환까지 해줘야함) 
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8"); 
	String cp = request.getContextPath(); 
	//원래는 db에서 가져온건 text모드 => json방식으로 변환하는건데
	//지금은 json방식으로 미리 만들어둠 
%>


{			
		"count":4,
		"title":[
			{
				"publisher":"한국일보",
				"headline":"21일 국토교통부 실거래가 공개시스템에 따르면"
			},
			{
				"publisher":"중앙일보",
				"headline":"서초선포레 아파트 전용면적 21.58㎡는 올해 3분기 총 3건이 거래됐다"
			},
			{
				"publisher":"한겨레",
				"headline":"연이어 석 달 동안 거래된 것으로 나온 이 아파트 가격은"
			},
			{
				"publisher":"동아일보",
				"headline":"10억~14억7500만원으로 3.3㎡당 최소 1억5291만원에서"
			}					
				]
}

 

 

DB에서 text로 가져왔다고 가정, Text -> JSON으로 변환하는 작업

newsTitleJSON2.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8"); 
	String cp = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<style type="text/css">
.news{
	font-size: 9pt;
	display: block;
	margin: 0 auto;
	background: yellow;
	color: blue;
	border: 1px dashed black;
	width: 50%;
}

.newsError{
	font-size: 9pt;
	display: block;
	margin: 0 auto;
	background: orange;
	color: red;
	border: 1px dashed black;
	width: 50%;
}
</style>

<script type="text/javascript" src="js/httpRequest.js"></script>
<script type="text/javascript">

function newsTitle() {
	
	sendRequest("newsTitleJSON2_ok.jsp",null,displayNewsTitle,"GET");
	setTimeout("newsTitle()",3000);	//자기자신을 3초마다 바꾼다
	
}


//콜백함수 여기서 받아줌
function displayNewsTitle() {	
	
	if(httpRequest.readyState==4){
		if(httpRequest.status==200){
			
			// JSON방식은 text로 넘어옴
			var jsonStr = httpRequest.responseText;
			//alert(jsonStr);
			
			//eval은 변수를 javascript의 함수처럼 사용하는 명령어
			
			//jsonStr을 객체화 시킴 (위에까진 그냥 text였음)
			var jsonObject = window.eval('(' + jsonStr + ')');
			//alert(jsonObject.count);
			//alert(jsonObject.title[2].publisher);
			//alert(jsonObject.title[2].headline);
			
			var count = jsonObject.count;
			
			if(count>0) {	
				var html = "<ol>";
				
				for(var i=0; i<jsonObject.title.length;i++) {
					
					var publisherStr = 
						jsonObject.title[i].publisher;
					var headlineStr = 
						jsonObject.title[i].headline;
					
					html += "<li>" + headlineStr + "[" +
						publisherStr + "] </li>";
					
				}
				
				html += "</ol>";
				
				var newsDiv = document.getElementById("newsDiv");
				newsDiv.innerHTML = html;
				
			}
			
		}
	}
	
}

window.onload = function() {
	newsTitle();
}

</script>


</head>
<body>

<h1>NewsTitleJSON2</h1>
<h2>헤드라인 뉴스</h2>
<hr/>

<div style="width: 50%; margin:0 auth;">뉴스보기</div>
<div id="newsDiv" class="news"></div>

</body>
</html>

 

newsTitleJSON2_ok.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8"); 
	String cp = request.getContextPath(); 
	
	// <db에서 text로 가져왔다고 가정, JSON으로 변환하는 작업>
%>

<%! 
	String[] newsTitle={
			"21일 국토교통부 실거래가 공개시스템에 따르면", 
			"서초선포레 아파트 전용면적 21.58㎡는 올해 3분기 총 3건이 거래됐다",
			"연이어 석 달 동안 거래된 것으로 나온 이 아파트 가격은",
			"10억~14억7500만원으로 3.3㎡당 최소 1억5291만원에서 ",
			"최대 2억2555만원에 이른다. 서초선포레가 위치한 청계산입구역 인근 ",
			"공인중개사 사무소는 '서초선포레는 서울주택도시공사(SH공사)가 관리하는",
			"아파트인지라 민간이 매매할 수 없다'며 의아하다는 반응을 내놓았다."
	};

	String[] newsPublisher={
			"중앙일보","한겨레","동아일보","조선일보",
			"CNN","디스패치","BBC"
	};
	
	// JSON으로 변환 : JSP 영역 바깥부분에 써줘야함
%>
	
{			
		"count":<%=newsTitle.length %>,
		"title":[
		
		<%
			for(int i=0; i<newsTitle.length; i++) {
				
				/*
					{
				"publisher":"한국일보",
				"headline":"21일 국토교통부 실거래가 공개시스템에 따르면"
					}
				*/
				
				out.print("{");
				out.print("publisher:\"" + newsPublisher[i] + "\"");
				out.print(",");
				out.print("headline:\"" + newsTitle[i] + "\"");
				out.print("}");
				
				if(i!=(newsTitle.length-1)) {
					out.print(",");
				}
				
			}
		
		%>
				]		
}

 

 

4. Javascript에 클래스기능 만들기

log.js - 뿌려주기 (모듈화)
// console 에 결과를 띄울 것임
// 뿌려주는 곳의 <div id="console" 로 설정하면 됨 

function log(msg) {
	var console = document.getElementById("console");
	console.innerHTML += msg + "<br/>";
}

 

member.js (모듈화)
// Member 클래스 생성
// js는 클래스라는 개념은 없지만 편법으로 클래스를 만들 수 있게 끔 할 수 있음

Member = function(id,name,addr){
	
	// 생성자 역할 (전역변수)
	this.id = id;
	this.name = name;
	this.addr = addr;
	
}

// Member.prototype => 사용자정의X 
// setValue, getValue => 사용자정의

// 클래스 내의 함수 정의 (setter 정의)
Member.prototype.setValue=function(id,name,addr){
	
	// 생성자 만듬 (전역변수)
	this.id = id;
	this.name = name;
	this.addr = addr;
	
}

//클래스 내의 함수 정의 (getter 정의)
Member.prototype.getValue=function(){
	
	return "[" + this.id + "]" + this.name +
	"(" + this.addr + ")";
	
}

 

memberClass.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8"); 
	String cp = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js로 객체 생성하기</title>
<script type="text/javascript" src="js/log.js"></script>
<script type="text/javascript" src="js/member.js"></script>

<script type="text/javascript">

//메인
function memberClass() {
	
	//1. member.js 없이 실행 (js는 편법클래스가 없어도 메모리상에 객체 생성 가능)
	var object1 = {}; // 메모리상에 객체 생성
	object1.id = "suzi"; // id라는 변수가 생김
	object1.name = "배수지";
	
	log("log1: " + object1.id + "," + object1.name);
	// 찍히면 js가 메모리상에 객체를 만들었다는 증거
	
	
	//2. member.js 없이 실행 - new로도 객체 생성 가능 
	// new Object : 클래스명이니깐 대문자로 써줘야 함
	var object2 = new Object(); 
	object2.id = "gildong"; 
	object2.name = "길동";
	
	log("log2: " + object2.id + "," + object2.name);
	
	
	//3. Member 클래스를 생성 후 변수 호출
	var member = new Member("songhee","천송이","서울");
	log("member1: " + member.id + "," + member.name +
			"," + member.addr);
	
	//4. setter로 초기화 
	member.setValue("hyolee","이효리","제주");
	log("member2: " + member.id + "," + member.name +
			"," + member.addr);
	
	//5. getter 호출
	var memberInfo = member.getValue();
	log("member.getValue() : " + memberInfo);
	
	
}

window.onload = function() {
	memberClass();
}

</script>
</head>
<body>

<h1>Javascript의 클래스 사용</h1><hr/>
<div id="console"></div>

</body>
</html>

 

 

5. Javascript에 패키지 만들기

member_json.js
// <javascript에서 패키지 생성하기>
var com = new Object(); 

//util이라는 패키지 생성
com.util = new Object(); 

//Member 클래스 생성
com.util.Member = function(id,name,addr) { 
	this.id = id;
	this.name = name;
	this.addr = addr; 
}

// 메소드 생성 (setter,getter)
com.util.Member.prototype = { 
		
		//전체 데이터 초기화 setter
		setValue:function(id,name,addr){
			
			this.id = id;
			this.name = name;
			this.addr = addr; 
			
		}, // 쉼표 잊지말기

		
		//Id만 받는 setter
		setId: function(id) {
			this.id = id;
		},
		
		getValue:function() {
			return this.id + ":" + this.name + ":" + this.addr;
		},
		
		//Id만 반환하는 getter
		getId:function() {
			return this.id;
		},
		
		// 사용자정의 메소드
		toString:function() {
			
			return this.id + ":" + this.name + ":" + this.addr;
			
		}
		
};

 

memberJSONClass.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	request.setCharacterEncoding("UTF-8"); 
	String cp = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/log.js"></script>
<script type="text/javascript" src="js/member_json.js"></script>
<script type="text/javascript">

	function memberClass() {
		
		//1. 객체 생성
		var member = new com.util.Member("suzi","수지","서울");
		log("member1: " + member.id + "," + member.name + "," + member.addr);
		
		//2. setter 이용해서 초기화
		member.setValue("gildong","길동","서울");
		log("member2: " + member.id + "," + member.name + "," + member.addr);
		
		//3.
		var memberInfo = member.getValue();
		log("member.getValue()  :  " + memberInfo);
		
		//4.
		member.setId("hyolee");
		// log("member.getValue()   :  " + memberInfo); => 이러면 효리 안나옴
		log("member.toString()  :  " + member.toString());
		
		//5.
		var id = member.getId();
		log("member.getId(): " + id);
		
	}
	
	window.onload = function() {
		memberClass();
	}


</script>


</head>
<body>


<h1>JSON (Javascript Object Notation)</h1>
<hr/>

<div id="console"></div>

</body>
</html>

 

'Ajax & jQuery' 카테고리의 다른 글

Ajax - 방명록 만들기 (댓글창 만들기)  (0) 2019.10.27
Ajax(5) - Document Object Model (DOM), DOM API를 이용한 XML 파싱 (pdf파일로부터 내용 더 보완하기)  (0) 2019.10.24
Ajax(3) - CSV 형식 데이터 읽기, 검색 시 제시어 기능  (0) 2019.10.23
JQuery 셋팅 및 예제 (10.18필기보고보완)  (0) 2019.10.23
Ajax(2) - get/post 방식 비교, ID 유효성 검사, javascript를 이용한 Ajax 구현  (0) 2019.10.22

'Ajax & jQuery' Related Articles

티스토리툴바