Ajax 사용, DB 읽어와서 웹브라우저에 보이기(레거시 방식 jsp)

▤ 목차

• ✔ DB연결
  • ⌨ jsp 파일
• ✔웹브라우저(html문서)에 DB가져오기(연결)
  • ⌨ html 문서 가져오기
• ✔DB의 원하는 데이터 브라우저로 가져오기
  • ⌨ jsp 파일
  • 💻 html 파일
• ✔비동기 처리 확인
  • ⌨ 비동기인 경우 
  • 💻 동기인 경우
• 😊정리

 

 

 

✔ DB연결

DB에 있는 데이터를 web브라우저에 보이려고 한다.

DB의 데이터를 가져오기 위해서는 jsp를 사용해야한다. 

 

데이터 테이블은 아래와 같다.

sangdata 데이터 테이블

 

⌨ jsp 파일

JDBC로 연결

<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8"%>
{"sangpum":[
<%
//sangdata 테이블을 읽어 json형식으로 출력
Connection conn =null;
PreparedStatement pstmt=null;
ResultSet rs =null;

try{	
	Class.forName("org.mariadb.jdbc.Driver");
	String url="jdbc:mariadb://localhost:3306/test";
	conn = DriverManager.getConnection(url,"root","123");
	
	pstmt = conn.prepareStatement("select * from sangdata");
	rs=pstmt.executeQuery();
	
	rs.next();
	out.print(rs.getString("sang"));
	
}catch(Exception e){
	System.out.println("err : " + e);
	
}finally{
	try{
		rs.close();
		pstmt.close();
		conn.close();
	}catch(Exception e){
		System.out.println("close : "+e);
	}
}
%>
]
}

jsp는 <%%>안에 java를 사용한다.

그 밖은 html소스를 사용한다.

 

위의 코드는 java를 사용해서 DB를 연결하는 코드이다.

우선 프린트가 잘되는지 확인해보기위해 

out.print(rs.getString("sang"));

이 코드를 찍어봤다.

 

데이터베이스와 잘 연결되었음을 알 수 있다.

 

그럼 각 데이터를 추출해보자.

 

	String result = "";
	while(rs.next()){
		result +="{";
		result +="\"code\":"+ "\"" +rs.getString("code")+ "\",";
		result +="\"sang\":"+ "\"" +rs.getString("sang")+ "\",";
		result +="\"su\":"+ "\"" +rs.getString("su")+ "\",";
		result +="\"dan\":"+ "\"" +rs.getString("dan")+ "\"";
		result +="},";
	}
	if(result.length()>0){ //마지막 ,버리기
		result = result.substring(0,result.length() -1);
		//전체길이 -1까지만 취함
	}
	out.print(result);

java에서와 같이 .getString을 사용해서 데이터를 가져올 수 있다.

 

 

 

 

---

 

 

 

✔웹브라우저(html문서)에 DB가져오기(연결)

⌨ html 문서 가져오기

<script type="text/javascript">
window.onload=()=>{
	document.querySelector("#btnOk").onclick = sijak;
}

let xhr;
function sijak(){

xhr = new XMLHttpRequest();
xhr.open('get','DBconn.jsp',true);  //get방식, jsp파일경로,비동기
xhr.onreadystatechange = function(){ 
	if(xhr.readyState === 4){
		if(xhr.status === 200){
			process();
		}
	}
}
xhr.send(null);
}

function process(){
	let parseData = JSON.parse(data);
	alert(parseData.sangpum.length);
};

 

이렇게 해당 DB와 잘 연결이 되었는지 확인해보자.

4개의 데이터가 잘 넘어오는 것을 알 수 있다.

 

 

 

👏 

html과 jsp를 통해 db의 데이터를 가져올 수 잇었다.

 

 

---

 

 

 

✔DB의 원하는 데이터 브라우저로 가져오기

⌨ jsp 파일

DB의 전체 데이터를 가져오려고 한다. while문을 돌려 모든 데이터를 가져와보자.

	String result = "";
	while(rs.next()){
		result +="{";
		result +="\"code\":"+ "\"" +rs.getString("code")+ "\",";
		result +="\"sang\":"+ "\"" +rs.getString("sang")+ "\",";
		result +="\"su\":"+ "\"" +rs.getString("su")+ "\",";
		result +="\"dan\":"+ "\"" +rs.getString("dan")+ "\"";
		result +="},";
	}
	if(result.length()>0){
		result = result.substring(0,result.length() -1);
		//전체길이 -1까지만 취함
	}
	out.print(result);

💻 html 파일

테이블에 넣어 가져오기로하자.

 

function process(){
	let data = xhr.responseText;
	let parseData = JSON.parse(data);
	//alert(parseData.sangpum.length);
	
	let str ="<table border='1'>";
	str +="<tr><th>코드</th><th>상품명</th><th>수량</th><th>단가</th></tr>";
	for(let i=0; i<parseData.sangpum.length; i++){
			str+="<tr>";
			str+="<td>" + parseData.sangpum[i].code+"</td>";
			str+="<td>" + parseData.sangpum[i].sang+"</td>";
			str+="<td>" + parseData.sangpum[i].su+"</td>";
			str+="<td>" + parseData.sangpum[i].dan+"</td>";
			str+="</tr>";
	}
	str +="</table>";
	document.getElementById("hi").innerHTML = str;
};

 

버튼을 누르면 테이블이 생성되도록 할것이다. 

 

 

👏 결과

 

---

 

 

✔비동기 처리 확인

⌨ 비동기인 경우 

네트워크는 언제 넘어올지 모른다. 클라이언트가 요청을하고 해당 데이터를 받아올때까지 클라이언트가 다른 일을 할 수 있도록 해야한다. 

 

지금까지 당연스럽게 비동기를 사용하고 있었다. 만약에 동기인 경우를 살펴보자.

 

 

💻 동기인 경우

 

Thread.sleep(5000);

 

데이터를 5초뒤에 불러오도록 하자.

그리고 html 파일에 코드를 동기로 바꾸고 텍스트영역을 넣어보자.

<script>
xhr.open('get','DBconn.jsp',false);
</script>
<textarea rows="10" cols="50"></textarea>

 

 

해당 화면이 등장한다.

텍스트를 넣다가 json 자료 읽기 버튼을 누르면 입력을 받지 않는다.

5초뒤에 해당 테이블이 나온다. 해당 테이블이 나오고나서 텍스트 입력을 다시 받는다.

 

 

 

 

---

 

 

😊정리

네트워크의 처리가 어떤 방식으로 진행될지 모른다. 때문에 비동기 방식으로 처리해야 클라이언트에서 기다리는 시간이 줄어든다. 만약 동기방식으로 처리하는데, 다량의 데이터를 로드하거나 파싱해야한다면 클라이언트는 기다리다가 이탈하게 될 것이다. Ajax를 사용하여 프로그램을 짤때는 비동기 방식으로 프로그램을 짜자.