ToBe끝판왕

[ JavaScript ] Ajax , 데이터 전송형식( csv / xml / json ) , 데이터베이스 값 가져오기, XMLHttpRequest객체( 동기 / 비동기 ) 본문

■ 프로그래밍 SKILLS/HTML , CSS , JAVASCRIPT

[ JavaScript ] Ajax , 데이터 전송형식( csv / xml / json ) , 데이터베이스 값 가져오기, XMLHttpRequest객체( 동기 / 비동기 )

업그레이드중 2022. 6. 1. 16:08
반응형

 

 

Ajax

 

▶  Ajax 정의

•  Ajax는 구현하는 방식을 의미한다.

•  JavaScript 의 라이브러리중 하나이다.

•  XMLHttpRequest 객체를 이용해서 전체페이지를 새로 고치지 않고도 페이지의 일부만을 위한

   데이터를 로드하는 기법이다.

•  JavaScript를 사용한 비동기 통신 / 클라이언트와 서버간에 XML데이터를 주고받는 기술이라 할 수 있다.

 

 

▶  Ajax 구현

<script type="text/javascript" src=""></script>

 

 

▶  Ajax 연습

•  ex01.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">

	//선언 부분
	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) XML 만들기

•  시작부분 : < ?xmlversion="1.0" encoding="utf-8"?> 를 무조건 붙여야 한다.

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

ex)

<products>

   <product></product>

   <product></product>

<products>

 

=> products는 한개지만 product 는 여러개가 가능하다.

 

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

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<books>
	<book>
		<name>HTMT5 + 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>

 

 

2) JSON 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
[
	{
		"name": "HTMT5 + 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이 잘 만들어졌는지 확인하기 위해서는 http://www.jsonlint.com

에서 작성한 Json을 복사하고 [ validate Json ]을 클릭

 

 

 

▶  데이터베이스에 테이블을 만들고 DB에서 XML 파일을 출력

 

•  테이블 만들고 mariaDB에서 확인  

mysql -u project -p project
1234

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);

 

 

•  DB에서 책에 대한 정보 가져와서 XML로 만들기

<%@ 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 );
%>

 

 

•  DB에서 책에대한 정보 가져와서 Json으로 만들기

<%@ 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-simple 라이브러리를 가져와서 쓴다.

-  아래 사이트 접속

www.json.org  

 

JSON

 

www.json.org

-  json - simple 클릭

-  다운로드

-  이클립스 lib 폴더에 추가

-  라이브러리를 활용해서 코딩한다.

<%@ 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 );
%>

 

 

 

▶  XMLHttpRequest

 

•  JavaScript가 Ajax를 사용할때 사용하는 객체이다. ( = 간단하게 xhr이라고 부르기도 한다. )

•  수취인과 배송방식, 내용물을 넣을 수 있다.

•  XMLHttpRequest 객체의 open( ) 메서드로 편지지의 전송위치와 방식을 지정한다.

•  원격에 있는 데이터를 달라고 요청하는 객체

•  비동기로 처리하는 것이 Ajax와 연관되어 있다.

 

•  open( ) 메서드의 형태

  -  전송방식은 Get 또는 Post 방식

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

  -  비동기 방식은 요청하고 응답여부에 상관없이 바로 진행하는 것

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

 

 

▶  JavaScript 와 데이터베이스 연동 ( 동기방식 )

<%@ 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 = function() {
    	// 화살표 함수
	window.onload = () => {
		document.getElementById( 'btn' ).onclick = () => {
			// 요청을 위한 xhr 객체 생성
			const request = new XMLHttpRequest();
			
			// 환경설정을 위한 메서드
            		// request.open( 전송방식, 경로, 비동기 사용여부 )
            		// 동기방식 사용
			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>

 

 

▶  JavaScript 와 데이터베이스 연동 ( 비동기방식 )

<%@ 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>

 

 

※ request로 응답( 이벤트 ) 이 안오는데도 end( )를 처리해버린다.

이걸 조절하기 위해 여러가지를 사용한다.

•  readyState

•  StateCode

 

 

※ JavaScript 에서 데이터가 배달되면 onreadystateChange 이벤트로 알 수 있다.

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

- Ajax로 모든 데이터를 전송받는 시점은 readyState 속성이 4일때 이므로, 이때 문서 객체와 관련된 처리를 해주면 된다.

 

 

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

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

-  Status 속성값은 아래와 같다.

 

 

※ Ajax  비동기방식의 전형적인 처리흐름

 

 

 

반응형
저작자표시 비영리 변경금지

'■ 프로그래밍 SKILLS > HTML , CSS , JAVASCRIPT' 카테고리의 다른 글

[ JavaScript ] 내장객체 생성자( Number / Date / Math / Array ), Map 형식, Set 형식  (0) 2022.05.13
[ JavaScript ] 배열, 객체, 함수, 생성자, String 객체  (0) 2022.05.13
[ JavaScript ] 변수( 전역 / 지역 ), 형변환( 숫자형 / 문자열 / 논리값 ) , 경고창, 확인창, 타이머  (0) 2022.05.13
[ JavaScript ] 반복문( for / while / do-while ) / 점프문( break / continue ) / 함수  (0) 2022.05.13
[ JavaScript ] JavaScript 정의, 변수 및 자료형, 표현식과 연산자, 제어 구문  (0) 2022.05.12
'■ 프로그래밍 SKILLS/HTML , CSS , JAVASCRIPT' Related Articles more
Comments