지구정복

[JavaScript-Ajax] 1/11 | Ajax(데이터전송형식(CSV,XML,JSON-라이브러리이용해서 데이터베이스이용)), XMLHttpRequest(동기방식, 비동기방식(CSV,XML,JSON 데이터 가져오기)) 본문

데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js

[JavaScript-Ajax] 1/11 | Ajax(데이터전송형식(CSV,XML,JSON-라이브러리이용해서 데이터베이스이용)), XMLHttpRequest(동기방식, 비동기방식(CSV,XML,JSON 데이터 가져오기))

eeaarrtthh 2021. 1. 11. 17:39
728x90
반응형
SMALL

1. Ajax

p627

더보기

복습

Java 이용한 웹프로그래밍
	JSP / Servlet

여태까지 배운것은
Web 1.0이다.
사용자의 요청	-> url(웹페이지명)		-> 요청
*브라우저					<- 응답 서버	서버(WAS)
	*java				html/css/javascript
	*jstl	



네이버 검색창에 아무 글자 하나만 치면 관련검색어가 밑에 쭉 나온다.
이때 관련된 검색어가 서버에서 바로 가져오게 된다. 이것이 web2.0기술이다.
이제부터 배울내용은 Web 2.0이다.
웹2.0은 사용자가 직접 정보를 생산하여 쌍방향으로 소통하는 웹 기술을 말한다.
웹1.0이 인터넷을 통해 일방적으로 정보를 보여주었다면, 웹 2.0은 사용자가 직접 콘텐츠를 생산하여
쌍방향으로 소통할 수 있다. 
게시판, 댓글, 블로그, 지식백과 등이 있다.

사용자의 요청
	-javascript(ajax)			-> 요청
	-프로그램				<- 데이터
		-> 디자인화
		-구글맵

ajax는 javascript를 응용해서 web2.0을 구현하는 기술이다.

Ajax는 자바스크립트처럼 특정한 프로그래밍 언어가 아니다. 또한 jQuery와 같은 특정한 프레임워크도 아니다. Ajax는 구현하는 방식을 뜻한다.

주된 예로 검색사이트의 자동완성 기능이다. 자동완성 기능은 Ajax의 가장 대표적인 예이다.

일반적으로 웹페이지를 사용하면 페이지가 넘어갈 때 사용자가 볼 수 없는 화면이 몇 초간 나타나는데 이때 브라우저는 서버와 데이터 전송을 하거나 검사를 하기때문이다. 하지만 Ajax를 이용하면 사용자에게 끊김없는 화면을 보여주면서 데이터를 요청할 수 있다.

 

대표적인 예가 페이스북이다. 

페이스북 화면에서 사용자는 글을 입력하면 페이지가 전환되는 것이 아니라 현재 페이지에 글이 입력된다.

친구가 글을 써도 마찬가지이다. 댓글을 달면 페이지 전환이 아니라 똑같은 페이지에 댓글이 달린다.

 

웹 2.0 Ajax를 사용하려면 다음을 이해해야 한다.

 

  • ECMAScript         -프론트엔드
    • 변수선언 : lec, const  
    • 제어문
    • 객체 : 100%객체
      • 기본객체
        • ECMAScript5 -> ECMAScipt6부터 기본객체가 많아짐 -> 지속적인 공부 필요
        • String, Date, Math, Array(Map, Set) 등은 알고 있어야 한다.
        • 객체 선언 방법: .json / class
      • DOM
        • Data와 Design을 엮는 방법 (상대적으로 많이 쓰이지 않는다.)
      • BOM
  • Data
    • CSV( , 구분자로 데이터 나눔 - 엑셀에서 주로 사용) - text문서이다. 또한 형식이 간단하여 많은 양의 데이터를 전송할 때 유리하다. 하지만 가독성이 떨어진다.
    • XML : HTML 태그로 데이터를 표현 - 태그가 컬럼명이고 해당 태그의 내용이 데이터값이다. 하지만 태그가 많아져서 용량이 커진다.
    • JSON : 자바스크립트에서 사용하는 객체 형태로 데이터를 표현하는 방법이다. Ajax를 사용할 때 거의 표준으로 사용된다. 다만 데이터 양이 커지면 속도가 느려서 이런 경우 CSV를 많이 사용한다.

 

ㅇ자바스크립트 사용

이클립스에서 새로운 워크스페이스를 만들고 아래와 같이 설정한다.

이클립스 버전은 아래와 같다.

Window - Preperence - General - Appearace

아파치톰캣 서버설정

그리고 Browse 클릭 후 아파치톰캣 디렉터리 클릭하고 Next - Finish 

 

기본 예제를 작성해보자.

-ex01.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
	//선언 부분
	const func1 = function() {
		alert( "func1 호출" );
	}
</script>
"<!-- 외부 js 사용 -->"
<script type="text/javascript" src="default.js"></script>
</head>
<body>

<script type="text/javascript">
	//호출 부분
	func1();
	func2();
</script>

</body>
</html>

 -default.js

//외부에서 함수 선언 부분
const func2 = function() {
	alert( "func2 호출" );
}

 

ㅇ데이터 전송 형식

 1. CSV만들기

먼저 웹콘텐트에 data폴더를 만들고 그 안에 data.csv 파일을 만든다. 그리고 Open With - text edit로 바꿔준다.

 그리고 아래와 같이 csv파일안에 데이터를 집어넣는다.

-data.csv

모던 웰 디자인을 위한 HTML5 + CSS3 입문, 한빛미디어, 윤인성, 30000원
모던 웹을 위한 JavaScript + jQuery 입문, 한빛미디어, 윤인성, 32000 원
모던 웹을 위한 node.j 5 프로그래밍, 한빛미디어, 윤인성, 22000원
모던 웹을 위한 HTML5 프로그래밍, 한빛미디어, 윤인성, 30000 원

 

2. XML만들기

아래의 규칙을 무조건 준수해야 한다.

 

처음 시작할 때 <?xml version="1.0" encoding="utf-8" ?>를 무조건 붙여준다.

 

그리고 가장 최초의 루트엘리먼트는 반드시 한 개여야 한다.

<products>

    <product></product>

    <product></product>

    <product></product>

<products>

여기서 products는 한 개여야 하지만 product는 여러개 있어도 상관없다.

 

그리고 태그가 열리면 무조건 닫혀야 한다.

-data.xml

<?xml version="1.0" encoding="utf-8" ?>
<books>
	<book>
		<name>모던 웰 디자인을 위한 HTML5 + CSS3 입문</name>
		<publisher> 한빛미디어</publisher>
		<auther>윤인성</auther>
		<price>30000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 JavaScript + jQuery 입문</name>
		<publisher>한빛미디어</publisher>
		<auther>윤인성</auther>
		<price>32000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 node.j 5 프로그래밍</name>
		<publisher> 한빛미디어</publisher>
		<auther>윤인성</auther>
		<price>22000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 HTML5 프로그래밍</name>
		<publisher> 한빛미디어</publisher>
		<auther>윤인성</auther>
		<price>30000원</price>
	</book>
</books>

 정상적으로 작성했는지 확인하려면 웹에서 실행시켜본다. 마이크로소프트엣지 브라우저 사용

 

3. JSON만들기

[{
	"name": "모던 웰 디자인을 위한 HTML5 + CSS3 입문",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "30000원"
}, {
	"name": "모던 웹을 위한 JavaScript + jQuery 입문",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "32000원"
}, {
	"name": "모던 웹을 위한 node.j 5 프로그래밍",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "22000원"
}, {
	"name": "모던 웹을 위한 HTML5 프로그래밍, 한빛미디어",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "30000원"
}]

 작성이 잘 됐는지 확인하려면 www.jsonlint.com에서 작성한 JSon을 복사하고 Validate JSON을 클릭한다.

 

이제 jsp에서 자료형식파일을 출력해보자.

-csv.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- JSP로 csv파일 출력하기 -->
<%
	out.println("모던 웰 디자인을 위한 HTML5 + CSS3 입문, 한빛미디어, 윤인성, 30000원");
	out.println("모던 웹을 위한 JavaScript + jQuery 입문, 한빛미디어, 윤인성, 32000 원");
	out.println("모던 웹을 위한 node.j 5 프로그래밍, 한빛미디어, 윤인성, 22000원");
	out.println("모던 웹을 위한 HTML5 프로그래밍, 한빛미디어, 윤인성, 30000 원");
%>

-xml.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>
<books>
	<book>
		<name>모던 웰 디자인을 위한 HTML5 + CSS3 입문</name>
		<publisher> 한빛미디어</publisher>
		<auther>윤인성</auther>
		<price>30000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 JavaScript + jQuery 입문</name>
		<publisher>한빛미디어</publisher>
		<auther>윤인성</auther>
		<price>32000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 node.j 5 프로그래밍</name>
		<publisher> 한빛미디어</publisher>
		<auther>윤인성</auther>
		<price>22000원</price>
	</book>
	<book>
		<name>모던 웹을 위한 HTML5 프로그래밍</name>
		<publisher> 한빛미디어</publisher>
		<auther>윤인성</auther>
		<price>30000원</price>
	</book>
</books>

 

이번에는 데이터베이스에 위와 같은 내용을 만들고 디비에서 불어와서 xml파일을 출력해보자.

mysql -u project -p project
123456

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.j 5 프로그래밍", "한빛미디어", "윤인성", 22000);
insert into books values(4, "모던 웹을 위한 HTML5 프로그래밍", "한빛미디어", "윤인성", 30000);

 -xml2.jsp

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

<%@page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	StringBuffer result = new StringBuffer();
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mariadb2");
		
		conn = dataSource.getConnection();
		
		String sql = "select name, publisher, author, price 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();
	}
	
	out.println( result );
%>

만약 위를 API를 통해 출력하려면 JDOM을 이용하면 된다.

 

이번에는 json을 출력해보자.

-json1.jsp

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
[{
	"name": "모던 웰 디자인을 위한 HTML5 + CSS3 입문",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "30000원"
}, {
	"name": "모던 웹을 위한 JavaScript + jQuery 입문",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "32000원"
}, {
	"name": "모던 웹을 위한 node.j 5 프로그래밍",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "22000원"
}, {
	"name": "모던 웹을 위한 HTML5 프로그래밍, 한빛미디어",
	"publisher": "한빛미디어",
	"author": "윤인성",
	"price": "30000원"
}]

 

데이터베이스에서 가져와서 json형태로 출력해보자.

먼저 마리아디비 라이브러리를 WEB-INF 의 lib 폴더안에 넣고 아래 context.xml은 META-INF에 넣는다.

-context.xml

<?xml version="1.0" encoding="utf-8" ?>
<Context>
	<Resource
		name = "jdbc/mariadb2"
		auth = "Container"
		type = "javax.sql.DataSource"
		driverClassName = "org.mariadb.jdbc.Driver"
		url = "jdbc:mysql://localhost:3307/project"
		username = "project"
		password = "123456"
	/>
</Context>

-json2.jsp

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

<%@page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	
	StringBuffer result = new StringBuffer();
	
	try {
		Context initCtx = new InitialContext();
		Context envCtx = (Context)initCtx.lookup("java:comp/env");
		DataSource dataSource = (DataSource)envCtx.lookup("jdbc/mariadb2");
		
		conn = dataSource.getConnection();
		
		String sql = "select name, publisher, author, price from books";
		pstmt = conn.prepareStatement(sql);
		rs = pstmt.executeQuery();
		
		
		result.append( "[" );
		while( rs.next() ){
			result.append( "{\n" );
			result.append( "\t\"name\" : \"" +rs.getString("name")+ "\",\n" );
			result.append( "\t\"publisher\" : \"" +rs.getString("publisher")+ "\",\n" );
			result.append( "\t\"author\" : \"" +rs.getString("author")+ "\",\n" );
			result.append( "\t\"price\" : \"" +rs.getString("price")+ "\"\n" );
			result.append( "}," );
		}
		result.append( "]" );
		
		result.deleteCharAt( result.lastIndexOf(",") );
		
	} 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( result );
%>

 

 위와 같이 json형태로 만드려면 너무 번거롭기 때문에 라이브러리를 사용한다.

json.org에서 라이브러리를 다운로드받을 수 있다.

 위 라이브러리를 다운받고 웹콘텐트-웹INF-lib폴더에 넣는다.

 라이브러리를 사용해서 아래와 같이 코딩한다.

-json3.jsp

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

<%@page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>

<%
	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/mariadb2");
		
		conn = dataSource.getConnection();
		
		String sql = "select name, publisher, author, price 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 );
%>

 

 

 

2. XMLHttpRequest

더보기

 XMLHttpRequest는 자바스크립트가 Ajax를 사용할 때 사용하는 객체이다. 간단하게 xhr이라고도 부른다

-ajax01.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			alert( '클릭' );
		}
	}
</script>
</head>
<body>

<button id="btn">요청하기</button>

</body>
</html>

 

아래와 같이 xhr객체를 생성하고 사용해보자.

open() 메서드로 전송위치와 방식을 지정할 수 있다.

동기방식은 요청하고 응답을 받기전까지 대기했다가 응답받으면 다시 진행하는 것이고

비동기는 요청하고 응답여부에 상관없이 바로 진행하는 것이다.

또한 전송방식은 get 또는 Post방식이다.

request.open( 전송방식, 경로, 비동기사용여부 )

 -ajax.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//요청을 위한 xhr 객체 생성
			const request = new XMLHttpRequest();
			
			//아래는 환경설정을 위한 메서드이다. 동기방식 사용
			request.open( 'GET', './data/data.csv', false );
			
			//실질적으로 원격에 요청하는 메서드
			request.send();
			
			console.log( request.responseText );
		}
	}
</script>
</head>
<body>

<button id="btn">요청하기</button>

</body>
</html>

이때 경로를 자신의 ip로 적고 실행하면 데이터를 가져오지 못하는데 이는 같은 ip가 아니면 막도록하기 때문이다.이를 크로스 도메인 문제라고 한다.

즉 Ajax로 데이터를 불러오려면 요청하는 쪽 ip와 응답하는 쪽 ip가 같아야한다.

 

 

이번에는 응답받은 데이터를 이용해서 html문서로 출력해보자.

-ajax01.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//요청을 위한 xhr 객체 생성
			const request = new XMLHttpRequest();
			
			//아래는 환경설정을 위한 메서드이다. 동기방식 사용
			request.open( 'GET', './data/data.csv', false );
			
			//실질적으로 원격에 요청하는 메서드
			request.send();
			
			//응답데이터를 html문서로 만들기
			const data = request.responseText.trim();
			const rowdata = data.split('\n');
			let result = '<table border="1">';
			for ( let i=0; i<rowdata.length; i++ ) {
				let coldata = rowdata[i].split(',');
				result += '<tr>';
				result += '<td>' + coldata[0] + '</td>';
				result += '<td>' + coldata[1] + '</td>';
				result += '<td>' + coldata[2] + '</td>';
				result += '<td>' + coldata[3] + '</td>';
				result += '</tr>';
			}
			result += '</table>';
			
			document.getElementById( 'result' ).innerHTML = result;
		}
	}
</script>
</head>
<body>

<button id="btn">요청하기</button>

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

</body>
</html>

 데이터를 가져오는 것을 개발자도구 - Network탭에서 확인할 수 있다. 디버깅할 때도 이쪽을 확인하고 에러를 찾아주면 된다.

 

 ㅇ동기 방식과 비동기 방식

 지금까지 사용했던 방식이 바로 동기방식이다. 편지를 우체통에 넣고 답장이 올 때까지 우체통 앞에서 기다리는 것이 동기방식이고 비동기방식은 편지를 우체통에 넣고 답장이 올 때까지 다른 일을 처리하는 것이다.

이때 답장이 오면 이벤트가 생성되면 답장이 왔다는 기록이 이벤트안에 기록된다.

자바스크입트에서 데이터가 배달되면 onreadystatechange이벤트로 알 수 있다.

onreadystatechange는 XMLHttpRequest의 상태가 변경될 때마다 이벤트를 호출한다.

 

request.open() 에서 비동기사용여부가 true이고 응답이오면 onreadystatechange이벤트 처리에서 응답을 확인한다.

또한 onreadystatechange에서 응답을 받으면 XMLHttpRequest 객체의 readyState속성이 변하는데 이는 아래와 같다.

Ajax 비동기방식에서 가장 중요한 점은 프로그램흐름이 응답을 받은 이후 이벤트로 간다는 것이고 

그 이후의 프로그램흐름은 이벤트에서 진행되도록 프로그램을 흘러가게 해야 한다.

 

이때 4가 나오면 요청을 보내도록 코딩해보자.

 -ajax03.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//비동기방식
			const request = new XMLHttpRequest();
			
			//이벤트로 응답확인하기
			request.onreadystatechange = () => {
				console.log( '응답', request.readyState );
				
				//모든 데이터가 응답되었을 경우 아래 코드 실행
				if ( request.readyState == 4 ) {
					const data = request.responseText.trim();
					const rowdata = data.split('\n');
					let result = '<table border="1">';
					for ( let i=0; i<rowdata.length; i++ ) {
						let coldata = rowdata[i].split(',');
						result += '<tr>';
						result += '<td>' + coldata[0] + '</td>';
						result += '<td>' + coldata[1] + '</td>';
						result += '<td>' + coldata[2] + '</td>';
						result += '<td>' + coldata[3] + '</td>';
						result += '</tr>';
					}
					result += '</table>';
					
					document.getElementById( 'result' ).innerHTML = result;
				}
			}
			request.open( 'GET', './data/data.csv', true );
			request.send();
			
		}
	}
</script>
</head>
<body>

<button id="btn">요청하기</button>

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

</body>
</html>

 다음으로 한 가지를 더 검사해야 한다.

XMLHttpRequest객체의 status 속성이 200일 때만 이벤트처리가 수행되어야 한다.

status의 속성값은 아래와 같다.

 예를들면 웹페이지에서 url을 잘못적을 경우 Http 상태 코드값이 나오는데 아래와 같다.

 따라서 200일때만 이벤트 처리가 이루어지도록 코딩해야 한다. 위에 코드를 수정하면 아래와 같다.

-ajax03.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//비동기방식
			const request = new XMLHttpRequest();
			
			//이벤트로 응답확인하기
			request.onreadystatechange = () => {
				console.log( '응답', request.readyState );
				
				//모든 데이터가 응답되었을 경우 아래 코드 실행
				if ( request.readyState == 4 ) {
					if ( request.status == 200 ) {
						const data = request.responseText.trim();
						const rowdata = data.split('\n');
						let result = '<table border="1">';
						for ( let i=0; i<rowdata.length; i++ ) {
							let coldata = rowdata[i].split(',');
							result += '<tr>';
							result += '<td>' + coldata[0] + '</td>';
							result += '<td>' + coldata[1] + '</td>';
							result += '<td>' + coldata[2] + '</td>';
							result += '<td>' + coldata[3] + '</td>';
							result += '</tr>';
						}
						result += '</table>';
						
						document.getElementById( 'result' ).innerHTML = result;
					} else {
						alert( '에러 페이지 입니다.' );
					}
				}
			}
			request.open( 'GET', './data/data.csv', true );
			request.send();
			
		}
	}
</script>
</head>
<body>

<button id="btn">요청하기</button>

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

</body>
</html>

 

Ajax의 흐름을 간단하게 살펴보면 아래와 같다.

Ajax 비동기방식의 전형적인 처리문구

 

실습) csv.jsp 파일의 내용을 books01.jsp에서 테이블형식으로 보이도록 만들기

-csv.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	System.out.println( "요청됨" );
	out.println("모던 웰 디자인을 위한 HTML5 + CSS3 입문, 한빛미디어, 윤인성, 30000원");
	out.println("모던 웹을 위한 JavaScript + jQuery 입문, 한빛미디어, 윤인성, 32000 원");
	out.println("모던 웹을 위한 node.j 5 프로그래밍, 한빛미디어, 윤인성, 22000원");
	out.println("모던 웹을 위한 HTML5 프로그래밍, 한빛미디어, 윤인성, 30000 원");
%>

 -결과

 

-코드

books01.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//비동기방식
			const request = new XMLHttpRequest();
			request.onreadystatechange = () => {
	
				if ( request.readyState == 4 ) {
					if ( request.status == 200 ) {
						//성공일때 처리
						const data = request.responseText.trim();
						const rowdata = data.split('\n');
						
						let result = '<table border="1">'
						for( let i=0; i<rowdata.length; i++ ) {
							let coldata = rowdata[i].split(',');
							result += '<tr>';
							result += '<td>' + coldata[0] + '</td>';
							result += '<td>' + coldata[1] + '</td>';
							result += '<td>' + coldata[2] + '</td>';
							result += '<td>' + coldata[3] + '</td>';
							result += '<tr>';
						}
						result += '</table>'
						
						document.getElementById('result').innerHTML = result;
						
					} else {
						alert( '에러 페이지 입니다.' );
					}
				}
			}
			request.open( 'GET', './data/csv.jsp', true );
			request.send();
			
		}
	}
</script>
</head>
<body>

<button id="btn">요청하기</button>

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

</body>
</html>

 

ㅇXML 데이터 가져오기

xml 객체로부터 데이터를 가져올 때는 아래와 같이 노드형태로 데이터를 찾아나간다.

일반적으로 XML문서는 id속성을 사용하지 않으므로 getElementsByTagName() 메서드를 사용한다.

 이제 data.xml에서 책 이름만 가져와보자.

-books02.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//비동기방식
			const request = new XMLHttpRequest();
			request.onreadystatechange = () => {
	
				if ( request.readyState == 4 ) {
					if ( request.status == 200 ) {
						//성공일때 처리
						
						const xmlData = request.responseXML;
						
						//name이란 태그를 찾기
						const names = xmlData.getElementsByTagName( 'name' );
						console.log( names );
						
					} else {
						alert( '에러 페이지 입니다.' );
					}
				}
			}
			request.open( 'GET', './data/data.xml', true );
			request.send();
			
		}
	}
</script>
</head>
<body>

<button id="btn">요청하기</button>

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

</body>
</html>

이번에는 data.xml의 태크의 데이터 개수와 데이터값을 가져와보자.

-books02.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//비동기방식
			const request = new XMLHttpRequest();
			request.onreadystatechange = () => {
	
				if ( request.readyState == 4 ) {
					if ( request.status == 200 ) {
						//성공일때 처리
						
						const xmlData = request.responseXML;
						
						//name이란 태그를 찾기
						const names = xmlData.getElementsByTagName( 'name' );
						const publishers = xmlData.getElementsByTagName( 'publisher' );

						console.log( names );

						console.log( names.length ); //데이터의 개수 확인하기
						
						for( let i=0; i<names.length; i++ ) {
							//첫번째 name컬럼의 첫번째 자식의 값을 불러오기
							let nameValue = names[i].childNodes[0].nodeValue;
							let publisherValue = publishers[i].childNodes[0].nodeValue;
							
							console.log( nameValue );
							console.log( publisherValue );

						}
						
					} else {
						alert( '에러 페이지 입니다.' );
					}
				}
			}
			request.open( 'GET', './data/data.xml', true );
			request.send();
			
		}
	}
</script>
</head>
<body>

<button id="btn">요청하기</button>

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

</body>
</html>

 

 ㅇJSON 데이터 가져오기

<%@ 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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//비동기방식
			const request = new XMLHttpRequest();
			request.onreadystatechange = () => {
	
				if ( request.readyState == 4 ) {
					if ( request.status == 200 ) {
						//성공일때 처리
						const jsonData = JSON.parse( request.responseText );
						console.log( jsonData );
						console.log( jsonData.length );
						console.log( jsonData[0].name );
						console.log( jsonData[0].price );
						
					} else {
						alert( '에러 페이지 입니다.' );
					}
				}
			}
			request.open( 'GET', './data/json3.jsp', true );
			request.send();
		}
	}

</script>
</head>
<body>

<button id="btn">요청하기</button>

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

</body>
</html>

 

 실습) 테이블 형식으로 json3.jsp에서 json데이터 값들을 가져와서 출력해보자.

-json3.jsp

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

<%@page import="java.sql.Connection"%>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>

<%@ page import="org.json.simple.JSONArray" %>
<%@ page import="org.json.simple.JSONObject" %>

<%
	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/mariadb2");
		
		conn = dataSource.getConnection();
		
		String sql = "select name, publisher, author, price 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 );
%>

 -결과

-코드 books04.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 type="text/javascript">
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			//비동기방식
			const request = new XMLHttpRequest();
			request.onreadystatechange = () => {
	
				if ( request.readyState == 4 ) {
					if ( request.status == 200 ) {
						//성공일때 처리
						const jsonData = JSON.parse( request.responseText );
						let result = '<table border="1">';
						for ( let i=0; i<jsonData.length; i++ ) {
							result += '<tr>';
							result += ' <td>' + jsonData[i].name + '</td>';
							result += ' <td>' + jsonData[i].publisher + '</td>';
							result += ' <td>' + jsonData[i].author + '</td>';
							result += ' <td>' + jsonData[i].price + '</td>';
							result += '</tr>';
						}
						result += '</table>';
						
						document.getElementById('result').innerHTML = result;
						
					} else {
						alert( '에러 페이지 입니다.' );
					}
				}
			}
			request.open( 'GET', './data/json3.jsp', true );
			request.send();
		}
	}

</script>
</head>
<body>

<button id="btn">요청하기</button>

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

</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

[출처]

KIC캠퍼스

모던자바스크립트입문 - 이소히로시

 

728x90
반응형
LIST
저작자표시 동일조건

'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글

[JavaScript-jQuery] 1/13 | jQuery(각종 메서드, 우편번호검색기)  (0) 2021.01.13
[JavaScript-jQuery] 1/12 | XMLHttpRequest(우편번호 검색기, crossdomain해결하고 데이터가져오기), jQuery(기본사용 및 태그셀렉터)  (0) 2021.01.12
[HTML & CSS] 개인 웹페이지 만들기  (0) 2020.11.13
[JavaScript] 정리  (0) 2020.11.12
[JavaScript] 기초 6  (0) 2020.11.06
'데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js' Related Articles more
Comments