Ajax 사용, DB 읽어와서 웹브라우저에 보이기(레거시 방식 jsp)
▤ 목차
✔ DB연결
DB에 있는 데이터를 web브라우저에 보이려고 한다.
DB의 데이터를 가져오기 위해서는 jsp를 사용해야한다.
데이터 테이블은 아래와 같다.
⌨ 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를 사용하여 프로그램을 짤때는 비동기 방식으로 프로그램을 짜자.