Java 언어를 이용한 웹 프로그래밍
Java EE
jsp( java server page) / servlet
WAS( Web Application Server )
- Apache-Tomcat
Pattern
hardcoding(날코딩) => 웹사이트 흐름(navigation) 개념
*.jsp
서블릿
모델 1
MVC 모델 2 (*) => 최적화( 최종으로 이것을사용 )
=> simple게시판 - 모델2버전
=> emoticon 게시판 - 모델2버전
=> paging 게시판 - 모델2버전 은 항상 온전하게 가지고있기
jsp책 99p의 그림은 항상 알아둬야함
웹(인터넷) 흐름
web1.0 - 화면 전환시 깜빡임
- 화면(페이지)간의 데이터 전달 X => stateless
브라우저 -> url -> 웹서버(WAS) - 웹프로그램
<- html / css / js
web 2.0
+ js
ajax(Asynchronous javascript and xml)
브라우저 js -> url -> 웹서버(WAS) - 프로그램
<- (DOM) <- data <-
Ajax (Asynchronous - 비동기 = 쓰레드처럼 병렬정리)
동기
요청 - 응답 => 대기(순차처리)
비동기
스레드
테이블로 표현 - xml, json ( 가능하면 css추가해서 )
rank
movieNm
openDt
audiAcc
Ajax
Ajax란?
Ajax는 자바스크립트처럼 특정한 프로그래밍 언어를 지칭하는 것이 아니다.
jQuery처럼 특정한 프레임 위크를 지칭하는 것도 아니다.
Ajax는 구현하는방식이다.
(자바스크립트로 접근하는 방식)
예를들어 로그인을 할때 아이디,비밀번호 입력후
로그인 버튼을 누르는순간 데이터가 서버로 전송될때 페이지가 전환되는 1~2초동안
페이지가 정지된다.
하지만 Ajax를 사용하면 페이지를 전환하지않고 서버에서 데이터를 받아와 사용자에게 보여준다.
예를들어 트위터같은 sns로 글입력시 페이지가 전환되지않고 현재페이지에 글입력, 추가.
Ajax사용시
Ajax를 사용하려면 javascript - workspace가 필요함.
이클립스 windows -> Preferences 에서 utf-8전환도 해주어야함
프로젝트 생성은 Dynamic Web Project로 같음.
라이브러리에서
DB연결시 mariadb jar파일필요
json-simple은 json 만들때나 분석할때 필요
모던 웹 디자인을 위한 HTML5 + CSS3 입문, 한빛미디어, 윤인성, 38000원
모던 웰을 위한 JavaScript + jQuery 입문, 한빛미디어, 윤인성, 32000원
모던 웹을 위한 node.j 5 프로그래밍, 한빛미디어, 윤인성, 22000원
모던 웹을 위한 HTML5 프로그래밍, 한빛미디어, 윤인성, 30000원data.csv
csv 가져오기
<%@ 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">
window.onload = function() {
document.getElementById('btn').onclick = function(){
//alert('cleck');
const request = new XMLHttpRequest();
request.open('GET', './data/data.csv', false);
request.send();
alert('요청완료');
//console.log(request.responseText);
document.getElementById('result').innerHTML = request.responseText;
};
};
</script>
</head>
<body>
<button id="btn">요청하기</button>
<br><hr><br>
<div id="result"></div>
</body>
</html>
ajax01.jsp
XMLHttpRequest 객체
XMLHttpRequest 객체는 빈 편지지와 같음.
이 빈 편지지에는 수취인과 배송방식, 내용물 을 넣을수 있다.
XMLHttpRequest 객체의 open()메서드로 편지지의 전송위치와 방식을 지정할 수 있다.
request.open( 전송방식, 경로, 비동기 사용여부)
ex) request.open( 'GET', '/data.html', false);
여기서 비동기 사용여부란
그림에서 보듯 동기식은 응답을 받아야지만 다음 동작이 이루어진다.
비동기식은 응담과는 상관없이 동작한다.
이런이유로인해 http전송중에도 클라이언트가 웹 어플리케이션과 상호작용을 할 수 있다.
<%@ 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() {
document.getElementById('btn').onclick = function(){
//alert('cleck');
const request = new XMLHttpRequest();
// request.open('GET', 'http://localhost:8080/AjexEx01/data/data.csv', false); - 가능
// 크로스도메인(서로 다른 도메인의 자료 접근에는 크로스도메인 문제 발생)
request.open('GET', 'http://192.168.200.102:8080/AjexEx01/data/data.csv', false);
request.send();
alert('요청완료');
//console.log(request.responseText);
document.getElementById('result').innerHTML = request.responseText;
};
};
</script>
</head>
<body>
<button id="btn">요청하기</button>
<br><hr><br>
<div id="result"></div>
</body>
</html>
ajax02.jsp
다른 도메인에 존재하는 데이터를 가져오는법
크로스도메인
Ajax에서 이용하는 XMLHttpRequest 객체는 보안상의 제한으로 인해 자바스 크립트 파일을 가져왔던 서버하고만 통신할 수 있습니다. 자바스크립트가 있는 서벼가 아닌 다 른 서버와 통신한다변 브라우저에서 입력한 정보를 사용자가 모르는 사이에 다른 서버로 전송 할 수 있기 때문입니다. 이렇게 불특정 다수의 도메인 서버에 접근하는 것을 ‘크로스 도메인 통신’이라고합니다.
<%@ 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">
window.onload = function() {
document.getElementById('btn1').onclick = function(){
//alert('cleck');
const request = new XMLHttpRequest();
console.log('1');
// false = 동기방식
request.open('GET', './data/data.csv', false);
console.log('2');
request.send();
console.log('3');
document.getElementById('result').innerHTML = request.responseText;
console.log('4');
};
document.getElementById('btn2').onclick = function(){
//alert('cleck');
const request = new XMLHttpRequest();
console.log('1');
// true = 비동기방식
request.open('GET', './data/data.csv', true);
console.log('2');
request.send();
console.log('3');
document.getElementById('result').innerHTML = request.responseText;
console.log('4');
};
// 이 형태가 ajax의 완벽한 형태
document.getElementById('btn3').onclick = function(){
const request = new XMLHttpRequest();
// 요청에 대한 상태변화
request.onreadystatechange = function(){
console.log('readyState : ', request.readyState)
if(request.readyState == 4){
if(request.status == 200){
document.getElementById('result').innerHTML = request.responseText;
} else {
alert('페이지 에러처리');
}
}
}
request.open('GET', './data/data.csv', true);
request.send();
console.log('요청완료');
};
};
</script>
</head>
<body>
<button id="btn1">요청하기</button>
<button id="btn2">요청하기</button>
<button id="btn3">요청하기</button>
<br><hr><br>
<div id="result"></div>
</body>
</html>
ajax03.jsp
동기식 과 비동기식 방식
btn1은 동기방식
응답을 기다렸다가 응답받으면 요청
btn2는 비동기방식
응답을 기다리지않고 요청
(출력문이 존재하지않음, 응답 스킵하기때문)
btn3은 비동기방식이지만 ajax에서의 거의 완벽한형태이다.
응답을 기다리지않고 요청은 같지만 나중에 응답을 받아옴
(btn2에서의 스킵문까지 가져옴)
readyState의 상태
status의 상태
<%@ 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() {
// 이 형태가 ajax의 완벽한 형태
document.getElementById('btn').onclick = function(){
const request = new XMLHttpRequest();
// 요청에 대한 상태변화
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
document.getElementById('result').innerHTML = request.responseText;
} else {
alert('페이지 에러처리');
}
}
}
request.open('GET', './data/data.csv', true);
request.send();
};
};
</script>
</head>
<body>
<button id="btn">요청하기</button>
<br><hr><br>
<div id="result"></div>
</body>
</html>ajax04.jsp
ajax의 기본적인 디폴트값
<%@ 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">
window.onload = function() {
// 이 형태가 ajax의 완벽한 형태
document.getElementById('btn').onclick = function(){
const request = new XMLHttpRequest();
// 요청에 대한 상태변화
request.onreadystatechange = function(){
console.log('readyState : ', request.readyState)
if(request.readyState == 4){
if(request.status == 200){
// dom 처리 => 디자인처리
//document.getElementById('result').innerHTML = request.responseText;
const data = request.responseText.trim();
const rowdatas = data.split('\n');
//console.log(rowdatas)
let result = '<table border="1" width="600">';
for(let i=0; i<rowdatas.length; i++){
let coldatas = rowdatas[i].split(',');
result += '<tr>';
result += '<td>' + coldatas[0] + '</td>';
result += '<td>' + coldatas[1] + '</td>';
result += '<td>' + coldatas[2] + '</td>';
result += '<td>' + coldatas[3] + '</td>';
result += '</tr>';
}
result += '</table>';
//console.log(result);
document.getElementById('result').innerHTML = result;
} else {
alert('페이지 에러처리');
}
}
}
// request.open('GET', './data/data.csv', true);
request.open('GET', './data/csv1.jsp', true);
request.send();
};
};
</script>
</head>
<body>
<button id="btn">요청하기</button>
<br><hr><br>
<div id="result"></div>
</body>
</html>
ajax05.jsp
배열로 만들어 테이블생성
xml 가져오기
<?xml version="1.0" encoding="UTF-8"?>
<books>
<book>
<name>모던 웹 디자인을 위한 HTML5 + CSS3 입문</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>38000원</price>
</book>
<book>
<name>모던 웹을 위한 JavaScript + jQuery 입문</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>32000원</price>
</book>
<book>
<name>모던 웹을 위한 nodè.j 5 프로그래밍</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>22000원</price>
</book>
<book>
<name>모던 웹을 위한 HTML5 프로그래밍</name>
<publisher>한빛미디어</publisher>
<author>윤인성</author>
<price>30000원</price>
</book>
</books>data.xml
<%@ page language="java" contentType="text/xml; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ 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.SQLException" %>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.ResultSet"%>
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
StringBuilder sbXml = new StringBuilder();
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";
// System.out.println( sql );
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
sbXml.append("<books>");
while(rs.next()){
sbXml.append("<book>");
sbXml.append("<name>" + rs.getString("name") + "</name>");
sbXml.append("<publisher>" + rs.getString("publisher") + "</publisher>");
sbXml.append("<author>" + rs.getString("author") + "</author>");
sbXml.append("<price>" + rs.getString("price") + "</price>");
sbXml.append("</book>");
}
sbXml.append("</books>");
}catch(NamingException e){
System.out.println("[에러] " + e.getMessage());
}catch(SQLException e){
System.out.println("[에러] " + e.getMessage());
}finally{
if(pstmt != null) pstmt.close();
if(rs != null) rs.close();
if(conn != null) conn.close();
}
out.println(sbXml);
%>
xml1.jsp
DB연결해 xml형식으로 데이터 출력
<%@ 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() {
// 이 형태가 ajax의 완벽한 형태
document.getElementById('btn').onclick = function(){
const request = new XMLHttpRequest();
// 요청에 대한 상태변화
request.onreadystatechange = function(){
console.log('readyState : ', request.readyState)
if(request.readyState == 4){
if(request.status == 200){
// console.log(request.responseText); // String 리턴
// console.log(request.responseXML); // XML 객체
const xmlData = request.responseXML;
const names = xmlData.getElementsByTagName('name');
console.log(names);
console.log(names.length);
console.log(names[0]);
console.log(names[0].innerHTML); // hmtl
console.log(names[0].textContent); // text
} else {
alert('페이지 에러처리');
}
}
}
// request.open('GET', './data/data.xml', true);
request.open('GET', './data/xml1.jsp', true);
request.send();
};
};
</script>
</head>
<body>
<button id="btn">요청하기</button>
<br><hr><br>
<div id="result"></div>
</body>
</html>
ajax06.jsp
DB연결해 xml 데이터 출력
[{
"name": "모던 웹 디자인을 위한 HTML5 + CSS3 입문",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "38000원"
},
{
"name": "모던 웹을 위한 JavaScript + jQuery 입문",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "32000원"
},
{
"name": "모던 웹을 위한 nodè.j 5 프로그래밍",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "22000원"
},
{
"name": "모던 웹을 위한 HTML5 프로그래밍",
"publisher": "한빛미디어",
"author": "윤인성",
"price": "30000원"
}
]data.json
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ 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.SQLException" %>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.ResultSet"%>
<%
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
StringBuilder sbJson = new StringBuilder();
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";
System.out.println( sql );
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
sbJson.append("[");
while(rs.next()){
sbJson.append("{");
sbJson.append("\"name\": \"" + rs.getString("name") + "\",");
sbJson.append("\"publisher\": \"" + rs.getString("publisher") + "\",");
sbJson.append("\"author\": \"" + rs.getString("author") + "\",");
sbJson.append("\"price\": \"" + rs.getString("price") + "\"");
sbJson.append("},");
}
sbJson.append("]");
sbJson.deleteCharAt(sbJson.lastIndexOf(","));
}catch(NamingException e){
System.out.println("[에러] " + e.getMessage());
}catch(SQLException e){
System.out.println("[에러] " + e.getMessage());
}finally{
if(pstmt != null) pstmt.close();
if(rs != null) rs.close();
if(conn != null) conn.close();
}
out.println(sbJson);
%>json1.jsp
DB연결해 json 데이터 출력
json형식으로 쿼리작성
<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ 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.SQLException" %>
<%@ page import="java.sql.PreparedStatement"%>
<%@ page import="java.sql.ResultSet"%>
<%@ 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(pstmt != null) pstmt.close();
if(rs != null) rs.close();
if(conn != null) conn.close();
}
out.println(jsonArray.toString());
%>
json2.jsp
DB연결해 json 데이터 출력
jsonObject 형식으로 쿼리작성
(json1,2의 출력문은 같음)
<%@ 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() {
// 이 형태가 ajax의 완벽한 형태
document.getElementById('btn').onclick = function(){
const request = new XMLHttpRequest();
// 요청에 대한 상태변화
request.onreadystatechange = function(){
if(request.readyState == 4){
if(request.status == 200){
// console.log(request.responseText); // String 리턴
// console.log(request.responseXML); // XML 객체
const jsonData = JSON.parse( request.responseText.trim() );
console.log(jsonData);
// console.log(jsonData[0].name);
// console.log(jsonData[0]['name']);
let result = '<table border="1" width="800">';
for(let i=0; i<jsonData.length; i++) {
result += '<tr>';
for(let key in jsonData[i]){
result += '<td>' + jsonData[i][key] + '</td>';
}
result += '</tr>';
}
result += '</table>'
// console.log(result);
document.getElementById('result').innerHTML = result;
} else {
alert('페이지 에러처리');
}
}
}
// request.open('GET', './data/data.json', true);
// request.open('GET', './data/json1.jsp', true);
request.open('GET', './data/json2.jsp', true);
request.send();
};
};
</script>
</head>
<body>
<button id="btn">요청하기</button>
<br><hr><br>
<div id="result"></div>
</body>
</html>
json07.jsp
DB연결해 json데이터 테이블형식으로 출력
json은 키와 값을 가지고있음.
영화 진흥위원회 xml 데이터 가져오기
<%@ 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() {
document.getElementById( 'btn' ).onclick = function() {
const request = new XMLHttpRequest();
request.onreadystatechange = function() {
if( request.readyState == 4 ) {
if( request.status == 200 ) {
const xmlData = request.responseXML;
const weeklyBoxOffices = xmlData.getElementsByTagName( 'weeklyBoxOffice' );
//console.log( weeklyBoxOffices[0].innerHTML );
for( let i=0 ; i<weeklyBoxOffices.length ; i++ ) {
for( let j=0 ; j<weeklyBoxOffices[i].childNodes.length ; j++ ) {
console.log( weeklyBoxOffices[i].childNodes[j].nodeName );
console.log( weeklyBoxOffices[i].childNodes[j].childNodes[0].nodeValue );
}
}
} else {
alert( '페이지 처리 에러' );
}
}
};
request.open( 'GET', 'http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.xml?key=f5eef3421c602c6cb7ea224104795888&targetDt=20221127', true );
request.send();
};
};
</script>
</head>
<body>
<button id="btn">요청하기</button>
<br /><hr /><br />
<div id="result"></div>
</body>
</html>ajax08.jsp