리눅스 활용/web1.0/web2.0/csv/xml/json/

리눅스 활용(정리)

        - 기본 명령어

        - 서버 구축법

                - 순서대로 정리 ...

                - 버전(최신 자료)

 

        * 가상화 기반으로 서비스

        => 아마존 웹 서비스 (aws)

        => 네이버 클라우드

        * web hosting

 

web site

web 1.0 - 새로고침이 빈번하게 발생

            client                →                server

                                   ← html/css/js    ←    웹 프로그램 언어

web 2.0 (한 페이지에서 동적으로 바뀜)

            client                →                server

                                   ← data(csv, xml, json)

이클립스에서 프로젝트 생성

webapp 폴더 안에 data 폴더 생성 후 data.csv를 만든다.

 

data.csv

HTML5 + CSS3 입문,삼국미디어,유비,30000원
Javascript + JQuery 입문,삼국미디어,관우,32000원
Node.js 프로그래밍,삼국미디어,장비,22000원
HTML5 프로그래밍,삼국미디어,조자룡,30000원

 

data.xml

<?xml version="1.0" encoding="UTF-8" ?>
<books>
	<book>
		<name>HTML5 + CSS3 입문</name>
		<publisher>삼국미디어</publisher>
		<author>유비</author>
		<price>30000원</price>
	</book>
	<book>
		<name>Javascript + JQuery 입문</name>
		<publisher>삼국미디어</publisher>
		<author>관우</author>
		<price>32000원</price>
	</book>
	<book>
		<name>Node.js 프로그래밍</name>
		<publisher>삼국미디어</publisher>
		<author>장비</author>
		<price>22000원</price>
	</book>
	<book>
		<name>HTML5 프로그래밍</name>
		<publisher>삼국미디어</publisher>
		<author>조자룡</author>
		<price>30000원</price>
	</book>
</books>

 

data.json

[
	{
		"name": "HTML5 + CSS3 입문",
		"publisher": "삼국미디어",
		"author": "유비",
		"price": "30000원"
	},
	{
		"name": "Javascript + JQuery 입문",
		"publisher": "삼국미디어",
		"author": "관우",
		"price": "32000원"
	},
	{
		"name": "Node.js 프로그래밍",
		"publisher": "삼국미디어",
		"author": "장비",
		"price": "22000원"
	},
	{
		"name": "HTML5 프로그래밍",
		"publisher": "삼국미디어",
		"author": "조자룡",
		"price": "30000원"
	}
]

 

JSON 검증은 아래에 사이트에서 검증가능

JSON Online Validator and Formatter - JSON Lint

The JSON Validator

 

jsp로 출력하기

 

csvEx01.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	out.println( "HTML5 + CSS3 입문,삼국미디어,유비,30000원" );
	out.println( "Javascript + JQuery 입문,삼국미디어,관우,32000원" );
	out.println( "Node.js 프로그래밍,삼국미디어,장비,22000원" );
	out.println( "HTML5 프로그래밍,삼국미디어,조자룡,30000원" );
%>

* contentType="text/plain; 중요

 

xmlEx01.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
    <%-- trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거 --%>
    <%
		out.println( "<books>" );
			out.println( "<book>" );
				out.println( "<name>HTML5 + CSS3 입문</name>" );
				out.println( "<publisher>삼국미디어</publisher>" );
				out.println( "<author>유비</author>" );
				out.println( "<price>30000원</price>" );
			out.println( "</book>" );
			out.println( "<book>" );
				out.println( "<name>Javascript + JQuery 입문</name>" );
				out.println( "<publisher>삼국미디어</publisher>" );
				out.println( "<author>관우</author>" );
				out.println( "<price>32000원</price>" );
			out.println( "</book>" );
			out.println( "<book>" );
				out.println( "<name>Node.js 프로그래밍</name>" );
				out.println( "<publisher>삼국미디어</publisher>" );
				out.println( "<author>장비</author>" );
				out.println( "<price>22000원</price>" );
			out.println( "</book>" );
			out.println( "<book>" );
				out.println( "<name>HTML5 프로그래밍</name>" );
				out.println( "<publisher>삼국미디어</publisher>" );
				out.println( "<author>조자룡</author>" );
				out.println( "<price>30000원</price>" );
			out.println( "</book>" );
		out.println( "</books>" );
%>

* contentType="text/xml; 중요

* trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거

 

jsonEx01.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
[
	{
		"name": "HTML5 + CSS3 입문",
		"publisher": "삼국미디어",
		"author": "유비",
		"price": "30000원"
	},
	{
		"name": "Javascript + JQuery 입문",
		"publisher": "삼국미디어",
		"author": "관우",
		"price": "32000원"
	},
	{
		"name": "Node.js 프로그래밍",
		"publisher": "삼국미디어",
		"author": "장비",
		"price": "22000원"
	},
	{
		"name": "HTML5 프로그래밍",
		"publisher": "삼국미디어",
		"author": "조자룡",
		"price": "30000원"
	}
]

* contentType="text/plain;

* trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거

 

jsonEx02.jsp    simple-json 라이브러리 사용

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>
<%
	JSONArray jsonArray = new JSONArray();

	JSONObject obj1 = new JSONObject();
	obj1.put( "name", "HTML5 + CSS3 입문" );
	obj1.put( "publisher", "삼국미디어" );
	obj1.put( "author", "유비" );
	obj1.put( "price", "30000원" );
	
	JSONObject obj2 = new JSONObject();
	obj2.put( "name", "Javascript + JQuery 입문" );
	obj2.put( "publisher", "삼국미디어" );
	obj2.put( "author", "관우" );
	obj2.put( "price", "32000원" );
	
	JSONObject obj3 = new JSONObject();
	obj3.put( "name", "Node.js 프로그래밍" );
	obj3.put( "publisher", "삼국미디어" );
	obj3.put( "author", "장비" );
	obj3.put( "price", "22000원" );
	
	JSONObject obj4 = new JSONObject();
	obj4.put( "name", "HTML5 프로그래밍" );
	obj4.put( "publisher", "삼국미디어" );
	obj4.put( "author", "조자룡" );
	obj4.put( "price", "30000원" );
	
	jsonArray.add( obj1 );
	jsonArray.add( obj2 );
	jsonArray.add( obj3 );
	jsonArray.add( obj4 );
	
	out.println( jsonArray );
%>

 

데이터베이스에 데이터를 넣고 데이터를 가져오는 jsp파일

-- create table books

create table books(
seq int not null primary key auto_increment,
name varchar(100),
publisher varchar(20),
author varchar(10),
price int
);

insert into books values(1, 'HTML5 + CSS3 입문', '삼국미디어', '유비', 30000);
insert into books values(2, 'JavaScript + JQuery 입문', '삼국미디어', '관우', 32000);
insert into books values(3, 'Node.js 프로그래밍', '삼국미디어', '장비', 22000);
insert into books values(4, 'HTML5 프로그래밍', '삼국미디어', '조자룡', 30000);

 

xmlEx02.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>
    <%-- trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거 --%>
    <%
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	StringBuilder result = new StringBuilder();
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb" );
		
		conn = dataSource.getConnection();
		
		String sql = "select * from books";
		pstmt = conn.prepareStatement( sql );
		
		rs = pstmt.executeQuery();
		
		result.append( "<books>" );
		
		while( rs.next() ) {			
			result.append( "<book>" );
			result.append( "<name>" + rs.getString( "name" ) + "</name>" );
			result.append( "<publisher>" + rs.getString( "publisher" ) + "</publisher>" );
			result.append( "<author>" + rs.getString( "author" ) + "</author>" );
			result.append( "<price>" + rs.getString("price") + "</price>" );
			result.append( "</book>" );			
		}
		result.append( "</books>" );
		
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( rs != null ) rs.close();
		if( pstmt != null ) pstmt.close();
		if( conn != null ) conn.close();
	}
%>
    <%= result%>

webapp/WEB-INF/mariadb-java-client-2.7.3.jar

webapp/META-INF/context.xml

위에 두 파일 확인하고 위에 코드 실행하면 결과나옴

 

jsonEx03.jsp 데이터를 가져와서 json형식으로 출력해줌

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>
    <%-- trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거 --%>
    <%
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	JSONArray jsonArray = new JSONArray();
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb" );
		
		conn = dataSource.getConnection();
		
		String sql = "select * from books";
		pstmt = conn.prepareStatement( sql );
		
		rs = pstmt.executeQuery();

		while( rs.next() ) {
			JSONObject obj = new JSONObject();
			obj.put( "name", rs.getString("name") );
	         obj.put( "publisher", rs.getString("publisher") );
	         obj.put( "author", rs.getString("author") );
	         obj.put( "price", rs.getString("price") );

			jsonArray.add( obj );
		}
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( rs != null ) rs.close();
		if( pstmt != null ) pstmt.close();
		if( conn != null ) conn.close();
	}
	out.println( jsonArray );
%>

 

javascript

        ajax (asynchronous javascript and xml) - event로 응답 유무를 판단

        XMLHttpRequest

                URLOpenConnection

 

requestEx01.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		document.getElementById( 'btn1' ).onclick = function(){
			// alert( 'test' );
			
			const request = new XMLHttpRequest();
			/* 
				옵션 설정
				'get' / 'post' 요청방식
				url
				false: 동기방식 / true: 비동기 방식
			*/
			request.open( 'get', './data/data.csv', false );
			request.send();
			
			// console.log( request.responseText );
			document.body.innerHTML += request.responseText;
		}
	}
</script>
</head>
<body>
<button id="btn1">요청하기</button>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		document.getElementById( 'btn1' ).onclick = function(){
			// alert( 'test' );
			
			const request = new XMLHttpRequest();
			/* 
				옵션 설정
				'get' / 'post' 요청방식
				url
				false: 동기방식 / true: 비동기 방식
			*/
			request.open( 'get', 'http://192.168.0.84:8080/AjaxEx01/csvEx01.jsp', false );
			request.send();
			
			// console.log( request.responseText );
			// document.body.innerHTML += request.responseText;
			document.getElementById( 'result' ).innerHTML += request.responseText;
		}
	}
</script>
</head>
<body>
<button id="btn1">요청하기</button>
<div id="result"></div>
</body>
</html>

다른 ip에 데이터를 요청하면 cross domain 문제가 발생할 수 있다.(CORS ERROR)

 

비동기식 흐름확인

requestEx02.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		document.getElementById( 'btn1' ).onclick = function(){
			
			const request = new XMLHttpRequest();
			
			console.log( "1" );
			request.open( 'get', './csvEx01.jsp', false );
			console.log( "2" );
			request.send();
			console.log( "3" );
			
			document.getElementById( 'result' ).innerHTML += request.responseText;
			console.log( "4" );
		};
		
		document.getElementById( 'btn2' ).onclick = function(e){
			const request = new XMLHttpRequest();
			
			console.log( "1" );
			request.open( 'get', './csvEx01.jsp', true );
			console.log( "2" );
			request.send();
			console.log( "3" );
			
			document.getElementById( 'result' ).innerHTML += request.responseText;
			console.log( "4" );
		};
		
		document.getElementById( 'btn3' ).onclick = function(e){
			const request = new XMLHttpRequest();
			
			console.log( "1" );
			
			// readystate : 상태값
			request.onreadystatechange = function(){
				// console.log( "5 : ", request.responseText );
				// console.log( "5 : ", request.readyState );
				
				/*
					request.readyState
					0: request가 초기화 안됨
					1: 서버와 연결이 설정
					2: 서버가 request 받음
					3: request 처리중
					4: 완료
				*/
				
				// readyState 상태값이 4일때만 처리한다.
				if( request.readyState == 4 ){
					// console.log( request.responseText );
					console.log( request.status ); // 상태코드 페이지가 없으면 404
					if( request.status == 200 ){
						document.getElementById( 'result' ).innerHTML += request.responseText;	
					} else {
						document.getElementById( 'result' ).innerHTML += "Web Site Error";
					}
					
				}
			};
			request.open( 'get', './csvEx01.jsp', true );
			console.log( "2" );
			request.send();
			console.log( "3" );
		};
	};
</script>
</head>
<body>
<button id="btn1">동기식 요청</button>
<button id="btn2">비동기식 요청</button>
<button id="btn3">비동기식 확인</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>

* readyState값이 4번일때만 처리한다

* request.status : 오류코드 404

 

requestEx03.jsp

ajax요청 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		document.getElementById( 'btn' ).onclick = function(e){
			const request = new XMLHttpRequest();
			
			
			// readystate : 상태값
			request.onreadystatechange = function(){
			
				
				// readyState 상태값이 4일때만 처리한다.
				if( request.readyState == 4 ){
					if( request.status == 200 ){
						// 정상일때 디자인처리
					} else {
						alert( "Web Site Error" );
					}
					
				}
			};
			request.open( 'get', './csvEx01.jsp', true );
			request.send();
		};
	};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>


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


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		document.getElementById( 'btn' ).onclick = function(e){
			const request = new XMLHttpRequest();
			
			
			// readystate : 상태값
			request.onreadystatechange = function(){
			
				
				// readyState 상태값이 4일때만 처리한다.
				if( request.readyState == 4 ){
					if( request.status == 200 ){
						// 정상일때 디자인처리
						
						const data = request.responseText.trim();
						const rowDatas = data.split( '\n' );
						
						console.log( rowDatas.length );
						console.log( rowDatas[0] );
						
						let result = '<table border="1">';
						for( let i = 0; i < rowDatas.length; i++){
							let colDatas = rowDatas[i].split( ',' );
							
							result += '<tr>';
							result += '		<td>'+ colDatas[0] +'</td>';
							result += '		<td>'+ colDatas[1] +'</td>';
							result += '		<td>'+ colDatas[2] +'</td>';
							result += '		<td>'+ colDatas[3] +'</td>';
							result += '</tr>';
							
						}
						result += "</table>";
						
						document.getElementById( 'result' ).innerHTML += result;
					} else {
						alert( "Web Site Error" );
					}
					
				}
			};
			request.open( 'get', './csvEx01.jsp', true );
			request.send();
		};
	};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>

 

requestXML1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		document.getElementById( 'btn' ).onclick = function(e){
			const request = new XMLHttpRequest();
			
			
			// readystate : 상태값
			request.onreadystatechange = function(){
			
				
				// readyState 상태값이 4일때만 처리한다.
				if( request.readyState == 4 ){
					if( request.status == 200 ){
						let data = request.responseText.trim();
						
						data = data.replace(/<books>/g, '');
						data = data.replace(/<\/books>/g, '');
						
						data = data.replace(/<book>/g, '');
						data = data.replace(/<\/book>/g, '');
						
						data = data.replace(/<name>/g, '');
						data = data.replace(/<publisher>/g, '');
						data = data.replace(/<author>/g, '');
						data = data.replace(/<price>/g, '');
						
						data = data.replace(/<\/name>/g, ',');
						data = data.replace(/<\/publisher>/g, ',');
						data = data.replace(/<\/author>/g, ',');
						data = data.replace(/<\/price>/g, '\n');
						
						const rowDatas = data.split( '\n' );
						let result = '<table border="1">';
						for( let i = 0; i < rowDatas.length-1; i++ ){							
							let colDatas = rowDatas[i].split( ',' );
							
							result += '<tr>';
							result += '		<td>'+ colDatas[0] +'</td>';
							result += '		<td>'+ colDatas[1] +'</td>';
							result += '		<td>'+ colDatas[2] +'</td>';
							result += '		<td>'+ colDatas[3] +'</td>';
							result += '</tr>';
						}
						result += '</table>';
						document.getElementById( 'result' ).innerHTML += result;
						
					} else {
						alert( "Web Site Error" );
					}
					
				}
			};
			request.open( 'get', './xmlEx02.jsp', true );
			request.send();
		};
	};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>

 

requestXML2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
	window.onload = function() {
		document.getElementById( 'btn' ).onclick = function(e){
			const request = new XMLHttpRequest();
			
			
			// readystate : 상태값
			request.onreadystatechange = function(){
			
				
				// readyState 상태값이 4일때만 처리한다.
				if( request.readyState == 4 ){
					if( request.status == 200 ){
						// let data1 = request.responseText.trim();
						// console.log( data1 );
						
						let data2 = request.responseXML;
						console.log( data2 );
						
						const names = data2.getElementsByTagName( 'name' );
						const publishers = data2.getElementsByTagName( 'publisher' );
						const authors = data2.getElementsByTagName( 'author' );
						const prices = data2.getElementsByTagName( 'price' );
						
						// console.log( names );
						// console.log( names.length );
						// console.log( names[0] );
						
						// 정식으로 접근하는 방법
						// console.log( names[0].childNodes[0].nodeValue );
						// console.log( names[0].innerHTML );
						
						let result = '<table border="1">';
						for(let i = 0; i < names.length; i++){
							result += '<tr>';
								result += '<td>' + names[i].innerHTML + '</td>';
								result += '<td>' + publishers[i].innerHTML + '</td>';
								result += '<td>' + authors[i].innerHTML + '</td>';
								result += '<td>' + prices[i].innerHTML + '</td>';
							result += '</tr>';
						}
						result += '</table>';
						
						document.getElementById( 'result' ).innerHTML += result;
						
					} else {
						alert( "Web Site Error" );
					}
					
				}
			};
			request.open( 'get', './xmlEx02.jsp', true );
			request.send();
		};
	};
</script>
</head>
<body>
<button id="btn">ajax 요청</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>

 

데이터베이스에 있는 zipcode데이터를 활용하여 웹페이지에 테이블로 보여주기

 

./data/zipcodeXML.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="javax.naming.Context" %>
<%@ page import="javax.naming.InitialContext" %>
<%@ page import="javax.naming.NamingException" %>

<%@ page import="javax.sql.DataSource" %>

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.SQLException" %>
    <%-- trimDirectiveWhitespaces="true" 태그라이브러리에 의한 공백라인을 제거 --%>
    <%
    request.setCharacterEncoding("utf-8");
    
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	String strDong = request.getParameter("dong");
	StringBuilder result = new StringBuilder();
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup( "java:comp/env" );
		DataSource dataSource = (DataSource)envCtx.lookup( "jdbc/mariadb" );
		
		conn = dataSource.getConnection();
		
		String sql = "select * from zipcode where dong like ?";
		pstmt = conn.prepareStatement( sql );
		pstmt.setString(1, strDong + "%");
		
		rs = pstmt.executeQuery();
		
		result.append( "<addresses>" );
		
		while( rs.next() ) {			
			result.append( "<address>" );
			result.append( "	<zipcode>" + rs.getString( "zipcode" ) + "</zipcode>" );
			result.append( "	<sido>" + rs.getString( "sido" ) + "</sido>" );
			result.append( "	<gugun>" + rs.getString( "gugun" ) + "</gugun>" );
			result.append( "	<dong>" + rs.getString( "dong" ) + "</dong>" );
			result.append( "	<ri>" + rs.getString( "ri" ) + "</ri>" );
			result.append( "	<bunji>" + rs.getString( "bunji" ) + "</bunji>" );
			result.append( "</address>" );			
		}
		result.append( "</addresses>" );
		
	} catch( NamingException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} catch( SQLException e ) {
		System.out.println( "[에러] " + e.getMessage() );
	} finally {
		if( rs != null ) rs.close();
		if( pstmt != null ) pstmt.close();
		if( conn != null ) conn.close();
	}
%>
    <%= result%>

 

./requestXml3.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table, td{
	border: 1px solid #000;
	border-collapse: collapse;
}
td{
	padding: 5px 5px;
}
</style>
<script>
	window.onload = function() {
		document.getElementById( 'btn' ).onclick = function(e){
			document.getElementById( 'result' ).innerHTML = "";
			const request = new XMLHttpRequest();
			
			
			// readystate : 상태값
			request.onreadystatechange = function(){
			
				
				// readyState 상태값이 4일때만 처리한다.
				if( request.readyState == 4 ){
					if( request.status == 200 ){
						
						// let data1 = request.responseText.trim();
						// console.log( data1 );
						
						let data2 = request.responseXML;
						console.log( data2 );
						
						const zipcodes = data2.getElementsByTagName( 'zipcode' );
						const sidos = data2.getElementsByTagName( 'sido' );
						const guguns = data2.getElementsByTagName( 'gugun' );
						const dongs = data2.getElementsByTagName( 'dong' );
						const ris = data2.getElementsByTagName( 'ri' );
						const bunjis = data2.getElementsByTagName( 'bunji' );
						
						// console.log( names );
						// console.log( names.length );
						// console.log( names[0] );
						
						// 정식으로 접근하는 방법
						// console.log( names[0].childNodes[0].nodeValue );
						// console.log( names[0].innerHTML );
						
						let result = '<table width="800">';
						for(let i = 0; i < zipcodes.length; i++){
							result += '<tr>';
								result += '<td>' + zipcodes[i].innerHTML + '</td>';
								result += '<td>' + sidos[i].innerHTML + '</td>';
								result += '<td>' + guguns[i].innerHTML + '</td>';
								result += '<td>' + dongs[i].innerHTML + '</td>';
								result += '<td>' + ris[i].innerHTML + '</td>';
								result += '<td>' + bunjis[i].innerHTML + '</td>';
							result += '</tr>';
						}
						result += '</table>';
						
						document.getElementById( 'result' ).innerHTML += result;
						
					} else {
						alert( "Web Site Error" );
					}
						
				}
			};
			request.open( 'get', './data/zipcodeXML.jsp?dong='+ document.getElementById('dong').value, true );
			request.send();
		};
	};
</script>
</head>
<body>
	<input type="text" id="dong" />
	<button id="btn">검색</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>