01/11 - Ajax(1) : 데이터 전송형식(csv, xml, json)별로 데이터베이스에서 값 가져오는 방법, XMLHttpRequest 객체 - 동기, 비동기(readyState, State Code)

Java 이용한 웹 프로그래밍

          JSP / Servlet

 

web 1.0 방식

사용자의 요청            →  url (웹페이지명)          →  요청

*browser                                                ←   응답        서버       해석(WAS)  

            * java                                              html/css/javascript

            * jstl

 

 

web 2.0 방식

사용자의 요청

             - javascript(ajax)                              → 요청

             - 프로그램                                      ← 데이터

                      → 디자인화

                             - 구글맵

 

web 2.0 ajax

1. ECMAScript        - 프론트엔드

         변수 선언 : let, const 

         제어문

         객체 : 100 % 사용

                    기본객체

                             ECMAScript5 → ECMAScript6(많아짐 - 지속적으로 공부해야됨)

                             String, Date, Math, Array(Map, Set)

                             - json / class

                     DOM

                             Data + Design   

                     BOM

                             많이 쓰는편 X

 

2. Data

       1) CSV( , 구분자(|?) - 엑셀) - text : 각각 데이터들을 구분하지 못하는 단점이 있다. 대용량데이터 전송에 좋다.

       2) XML : CSV의 단점 보완. 그러나 실제 데이터보다 태그 용량이 더 커지는 단점이 있다.

              1. <?xml version="1.0" encoding="utf-8" ?>

              2. 루트엘리먼트는 반드시 한개

                  <products>  ← 가장 상위인 얘는  한개여야함

                         <product></product>

                         <product></product>

                         <product></product>

                  </products>

              3. 열리면 닫긴다.

                   <product></product>

              

               http://www.weather.go.kr/

               https://www.weather.go.kr/weather/main.jsp

                       '생활과 산업 > 서비스 > 인터넷 > RSS 파일' 보면 날씨를 XML형식으로 해놨다.

                          

       3) JSON : CSV, XML의 단점 보완.

               jsonlint.com    <- 여기서 JSON 테스트

 

▷p627

▷강사님이 주신 ajax pdf파일

 

 

 

 

Ajax

---

1. Ajax란?

Ajax는 자바스크립트처럼 특정한 프로그래밍 언어를 지칭하는 것이 아니다. 

또한 jQuery 와 같은 특정한 프레임워크를 지칭하는 것도 아니다. Ajax는 구현하는 방식을 뜻하는 말이다. 

 

Ajax 방식으로 구현된 웹 사이트를 살펴보자. 사용자가 검색창에 글자를 입력하면 자동으로 검색어를 추천한다. 이때 요소 검사의 Network 탭에 무언가 오고 가는 것이 보인다. 검색 사이트에서 자동 완성 기능은 거의 100% 사용되고 있다. 이것이 바로 Ajax의 가장 대표적인 예이다. 기존의 웹 페이지는 새로운 데이터를 사용자에게 보여주려면 항상 페이지를 전환해야 했다.

 

 

2. Ajax 구현

이클립스 워크스페이스 javascript-workspace로 바꿔준다.

 

dynamic으로 복습할거다!

 

AjaxEx01

ex01.jsp

new -> other -> javascript 있다.

default.js

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

이렇게 해주면 된다.

 

 

 

실습1) 데이터 전송 형식 별로 database에서 값 가져오기

 

1. 사용할 데이터 

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

 

 

2. 파일 형식에 따른 데이터 형태 예상 해보기 

1) csv → jsp    contentType="text/plain"

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.js 프로그래밍,한빛미디어,윤인성,22000원");
	out.println("모던 웹을 위한 HTML5 프로그래밍,한빛미디어,윤인성,30000원");
%>

 

2) xml → jsp   contentType="text/xml"

xml.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="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>

 

3) json → jsp  contentType="text/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.js 프로그래밍",
	"publisher":"한빛미디어",
	"author":"윤인성",
	"price":"22000원"
},{
	"name":"모던 웹을 위한 HTML5 프로그래밍",
	"publisher":"한빛미디어",
	"author":"윤인성",
	"price":"30000원"
}]
    

 

 

3. db에 books 테이블 생성, 데이터 넣기

create table books(

seq int not null primary key auto_increment,

name varchar(100),

publisher varchar(20),

author varchar(10),

price int

);

 

insert books values(0,"모던 웹 디자인을 위한 HTML5 + CSS3 입문", "한빛미디어","윤인성",30000);

insert books values(0,"모던 웹을 위한 JavaScript + jQuery 입문","한빛미디어","윤인성",32000 );

insert books values(0,"모던 웹을 위한 node.js 프로그래밍","한빛미디어","윤인성",22000);

insert books values(0,"모던 웹을 위한 HTML5 프로그래밍","한빛미디어","윤인성",30000);

 

 

4. 데이터 전송 형식별(xml, json) db 데이터 변환 방법

1) db에서 책에대한 정보를 가져와서 xml로 만들기

api로 하고 싶으면 jdom이란걸 찾아서 해라. 

xml2.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%>

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

<%
	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();
		
		// jdom 복잡한걸 할 때 이걸 쓴다.
		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);
%>

 

 

2) db에서 책에대한 정보를 가져와서 json으로 만들기

json2.jsp

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ 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"%>

<%
	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();
		
		// jdom 복잡한걸 할 때 이걸 쓴다.
		result.append("[\n");
		while(rs.next()){
			result.append("{\n");
			result.append("\"name\": \"" + rs.getString("name")+"\",\n");
			result.append("\"publisher\": \""+rs.getString("publisher")+"\",\n");
			result.append("\"author\": \""+rs.getString("author")+"\",\n");
			result.append("\"price\": \""+rs.getString("price")+"\"\n");
			result.append("},\n");
		}
		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);
%>

4번과 같으나 StringBuffer부분을 바꿔준다. 

마지막 ","를 없애주는 아래 코드를 마지막에 추가해줘야한다.

result.deleteCharAt(result.lastIndexOf(","));

 

 

3) json 타입일때 "\""출력이 불편하므로 라이브러리를 가져와서 쓰기

www.json.org   > 'json-simple'클릭 > '다운로드' > json-simple-1.1.1.jar 다운로드> 이클립스 프로젝트의 lib폴더에 추가

json3.jsp

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ 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"%>

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

 

 

 

 

 

 

3. XMLHttpRequest 객체

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

XMLHttpRequest 객체는 빈 편지와 같다. 이 빈 편지지에는 수취인과 배송 방식, 내용물을 넣을 수 있다.

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

open() 메서드의 형태는 다음과 같다.

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

 

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

동기, 비동기 다 되는데 비동기로 처리하는게 Ajax와 연관되는 것이다.

 

 

[ XMLHttpRequest 객체로 기본적인 Ajax를 수행하는 방법 ]

1.  간단한 문자열이나 HTML 태그를 받아오기 (csv)

 

실습1) javascript와 데이터베이스 연동하기 - 동기방식

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 = function(){
	// 화살표 함수
	window.onload = () => {
		document.getElementById('btn').onclick = function(){
			//alert('클릭');
			const request = new XMLHttpRequest();
			// 환경설정에 대한 메서드
			// request.open(전송방식, 경로 , 비동기 사용여부)
			// 동기방식
			//request.open('GET','./data/data.csv',false); 
			request.open('GET','./data/data.csv',false); 
			request.send();
			
			//console.log(request.responseText);
		
			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>

 

ip가 다른곳의 데이터는 불러오지 못한다. 그래서 가능하면 디렉토리 쓸때 앞에껄 쓰지말고 ./으로 대체해라!

 

request로 응답(이벤트)이 오면 send()를 처리한다.

가장중요한게 개발자 도구에서 network를 봐야한다.

 

 

 

실습2)  javascript와 데이터베이스 연동하기 - 비동기 방식

ajax02.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 = function(){
			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>

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

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

 

▶ readyState

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 = function(){
			const request = new XMLHttpRequest();
			console.log("1");
			request.onreadystatechange = () =>{
				console.log('응답', request.readyState);
				console.log("2");
			};
		
			// 비동기방식
			request.open('GET','./data/data.csv',true); 
			request.send();
			console.log("3");
		};
	};
</script>
</head>
<body>

<button id="btn">요청하기</button>
<div id="result"></div>
</body>
</html>

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

readyState 속성	설명
0	request 객체를 만들었지만 open() 메서드로 초기화하지 않았음
1	request 객체를 만들고 초기화했지만 send() 메서드가 사용되지 않음
2	send() 메서드를 사용했지만 아직 데이터를 받지 못함
3	데이터의 일부만을 받음
4	모든 데이터를 받음

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

 

 

▶ State Code

올바른 데이터가 아니여도 html을 만들어 주기 때문에 readyState만으론 그게 올바른 데이터인지 알수 없다.

그래서 가져온 데이터를 State Code를 통해 올바른 데이터인지 아닌지 구별해야 한다.

HTTP Status Code	설명	예
1XX	처리 중	100 Continue
2XX	성공	200 OK
3XX	리다이렉트	300 Multiple Choices
4XX	클라이언트 오류	400 Bad Request
5XX	서버 오류	500 Internal Server Error

2XX와 4XX만 구분하면 된다. 

2XX 일때 실행하도록 코드를 작성하면 된다.

ajax04.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 = function(){
			const request = new XMLHttpRequest();
			request.onreadystatechange = () =>{
				console.log('응답', request.readyState);
				if(request.readyState == 4){
					if(request.status==200){
						// 성공일때 처리
					}else{
						alert("에러페이지");
					}
				}
			};
		
			request.open('GET','./data/data.csv',true); 
			request.send();
			
		};
	};
</script>
</head>
<body>

<button id="btn">요청하기</button>
<div id="result"></div>
</body>
</html>

 

이렇게 비동기식의 방식에서 readyState와 State Code를 사용한 방식이 ajax의 전형적인 문구이다.

 

 

 

 

실습3) 비동기식으로 books정보 데이터 전송 형식별로 가져와서 table출력 

'요청하기' 버튼을 누르면 아래에 테이블이 출력되록 구현한다.

 

1. csv로 가져오기 - responseText

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 = function(){
			const request = new XMLHttpRequest();
			request.onreadystatechange = () =>{
				console.log('응답', request.readyState);
				if(request.readyState == 4){
					if(request.status==200){
						// 성공일때 처리
						console.log(request.responseText);
						
						const data = request.responseText.trim();
						const rowdata = data.split('\n');
						
						let result = '<table width="800" 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 = '';
						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>

 

 

2. XML로 가져오기  - responseXML

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 = function(){
			const request = new XMLHttpRequest();
			request.onreadystatechange = () =>{
				console.log('응답', request.readyState);
				if(request.readyState == 4){
					if(request.status==200){
						// 문자열 - 문자열 API
						//console.log(request.responseText);
						// XML Dom 객체 - DOM API
						// https://www.w3schools.com/xml/dom_intro_asp
						//console.log(request.responseXML);
						
						const xmlData = request.responseXML;
						
						const names = xmlData.getElementsByTagName('name');
						const publishers = xmlData.getElementsByTagName('publisher');
						const authors = xmlData.getElementsByTagName('author');
						const prices = xmlData.getElementsByTagName('price');
						
						//console.log(names);
						//console.log(names.length);
						//console.log(prices);
						
						let result = '<table width="800" border="1">';
						for(let i=0; i<names.length; i++){
							let nameValue = names[i].childNodes[0].nodeValue;
							let publisherValue = publishers[i].childNodes[0].nodeValue;
							let authorValue = authors[i].childNodes[0].nodeValue;
							let priceValue = prices[i].childNodes[0].nodeValue;
							
							result += '<tr>';
							result += '<td>' + nameValue +'</td>';
							result += '<td>' + publisherValue +'</td>';
							result += '<td>' + authorValue +'</td>';
							result += '<td>' + priceValue +'</td>';
							result += '</tr>';
							
						}
						result += '</table>';
						
						document.getElementById('result').innerHTML = '';
						document.getElementById('result').innerHTML = result;
							
						
					}else{
						alert("에러페이지");
					}
				}
			};
		
			request.open('GET','./data/xml2.jsp',true); 
			request.send();
			
		};
	};
</script>
</head>
<body>

<button id="btn">요청하기</button>
<div id="result"></div>
</body>
</html>

문자열까지는 responseText를 사용했지만 xml은 responseXML를 사용한다. 

DOM 메서드가 필요하다.

 

 

여기서 잠깐!

---

DOM 이란?

DOM은 문서를 제어하는 API이다.

DOM 트리는 documet객체의 트리 구조이다.

html문서를 브라우저가 읽는(렌더링) 순간 트리구조로 바꾼다. ->  dom 트리

DOM(문서 객체 모델) 은 HTML 문서를 노드트리로 나타내는데
그렇기 때문에 DOM트리의 모든 노드는 객체이다.

document > html > text

 

※ <script>를 documet위에 써주면 위에서부터 차례대로 실행되서 흐름이 꼬일수 있기 때문에 script안에서

    window.onload를 쓰거나, 함수형식으로 정의해서 onclick으로 불러와야 실행되게 함으로서 

    흐름을 방해하지 않을 수 있다. 

      => window.onload : 자바스크립트가 문서가 준비된 상황 이후에 발동하도록 하는 것.

---

 

 

 

3.  JSON으로 가져오기 - responseText

books03.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 = function(){
			const request = new XMLHttpRequest();
			request.onreadystatechange = () =>{
				console.log('응답', request.readyState);
				if(request.readyState == 4){
					if(request.status==200){
						// console.log(request.responseText);
						
						// 문자열의 내용을 json 객체화 (배열)
						const jsonData = JSON.parse(request.responseText);
						//console.log(jsonData);
						//console.log(jsonData.length);
						//console.log(jsonData[0].name);
						//console.log(jsonData[0].price);
						
						let result = '<table width="800" 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 = '';
						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>

 

문자열처럼 responseText를 사용한다.