매일 조금씩

01/12 - Ajax(2) : 우편번호 검색기 만들기 , jQuery(1) : 쓰는법 본문

빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정

01/12 - Ajax(2) : 우편번호 검색기 만들기 , jQuery(1) : 쓰는법

mezo 2021. 1. 25. 00:55
728x90
반응형

요청과 응답의 시간차(깜빡임, 모래시계)

web1.0 동기식 처리

 

web2.0 비동기식 처리

ajax(Asynchronous Javascript & XML)

       1. 요청방법 : 전형적인 틀이 있다.

                 document.getElementById('버튼아이디').onclick = function() {

                            const request = new XMLHttpRequest();

                            request.onreadystatechange = function() {

                                        if(request.readyState == 4){

                                                     if(request.status == 200){

                                                                 //정상 응답 처리

                                                                -------- 1번

                                                     } else {

                                                                 // 페이지 오류

                                                     }

                                        }

                            }

                            request.open('방식', 'url',true);

                            request.send();

                            -------- 2번

                 };

 

            1번, 2번 위치 둘다에 코드를 적는데 대부분 1번에다가 적는다 2번은 데이터가 오기전에 먼저 실행되는데

            대부분 데이터를 활용하는 것들이기 때문에 1번을 많이 쓴다.

            그리고 위의 코드는 첨에만 한번쓰고 대부분 복사해서 붙여서 쓴다.

 

       2. 데이터 만드는 법(cvs, xml, json)

                 csv - out.println

                 xml - out..println - 형식검사 

                 json - api          - 형식검사(json-lint)

 

 

 

 

 

실습1) 우편번호 검색기 xml

1. 데이터 파일 만들기 코드

xml.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"%>

<%
	String strDong = request.getParameter("strDong");	
	//String strDong = "신사동";	

	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/mariadb1");
	
		conn = dataSource.getConnection();
		
		String sql = "select seq, zipcode, sido, gugun, dong, ri, bunji from zipcode where dong like ?";
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, strDong + "%");
		
		rs = pstmt.executeQuery();
		
		// jdom 복잡한걸 할 때 이걸 쓴다.
		result.append("<result>");
		while(rs.next()){
			result.append("<address>");
				result.append("<seq>"+rs.getString("seq")+"</seq>");
				result.append("<zipcode>"+rs.getString("zipcode")+"</zipcode>");
				result.append("<sido>"+rs.getString("sido")+"</sido>");
				result.append("<gugun>"+rs.getString("gugun")+"</gugun>");
				result.append("<dong>"+rs.getString("dong")+"</dong>");
				result.append("<ri>"+rs.getString("ri")+"</ri>");
				result.append("<bunji>"+rs.getString("bunji")+"</bunji>");
			result.append("</address>");
		}
		result.append("</result>");
		
	}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. ajax로 처리하는 코드

zipcodeSearch01.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 strDong = document.getElementById('dong').value.trim();
			alert(strDong);
			
			const request = new XMLHttpRequest();
			request.onreadystatechange = () =>{
				if(request.readyState == 4){
					if(request.status==200){
						
						const data = request.responseText.trim();
						console.log(data);
						
						//console.log(request.responseXML);
						const xmlData = request.responseXML;
						
						const seqs = xmlData.getElementsByTagName('seq');
						const zipcodes = xmlData.getElementsByTagName('zipcode');
						const sidos = xmlData.getElementsByTagName('sido');
						const guguns = xmlData.getElementsByTagName('gugun');
						const dongs = xmlData.getElementsByTagName('dong');
						const ris = xmlData.getElementsByTagName('ri');
						const bunjis = xmlData.getElementsByTagName('bunji');
						
						//console.log(zipcodes);
						//console.log(seqs.length);
						
						let result = '<table width="800" border="1">';
						for(let i=0; i<seqs.length; i++){
							let seqValue = seqs[i].childNodes[0].nodeValue;
							let zipcodeValue = zipcodes[i].childNodes[0].nodeValue;
							let sidoValue = sidos[i].childNodes[0].nodeValue;
							let gugunValue = guguns[i].childNodes[0].nodeValue;
							let dongValue = dongs[i].childNodes[0].nodeValue;
							
							// 데이터가 없을 때 처리하는 방법
							let riValue = '';
							if(ris[i].childNodes[0] != null){
								riValue = ris[i].childNodes[0].nodeValue;
							}
							let bunjiValue = '';
							if(bunjis[i].childNodes[0] != null){
								bunjiValue = bunjis[i].childNodes[0].nodeValue;
							}
							
							result += '<tr>';
							result += '<td>' + seqValue +'</td>';
							result += '<td>' + zipcodeValue +'</td>';
							result += '<td>' + sidoValue +'</td>';
							result += '<td>' + gugunValue +'</td>';
							result += '<td>' + dongValue +'</td>';
							result += '<td>' + riValue +'</td>';
							result += '<td>' + bunjiValue +'</td>';
							result += '</tr>';
							
						}
						result += '</table>';
						
						document.getElementById('result').innerHTML = '';
						document.getElementById('result').innerHTML = result;
							
						
					}else{
						alert("에러페이지");
					}
				}
			};
		
			request.open('GET','./data/xml.jsp?strDong=' + strDong, true); 
			request.send();
			
			
			
		};
	};
</script>
</head>
<body>
<form>
동이름: <input type="text" id="dong" size="30" />
<input type="button" id="btn" value="우편번호 검색" />
</form>
<hr /><br />
<div id="result"></div>
</body>
</html>

다음페이지로 넘어가는게 아니면 input 태그에서 name말고 id 써도 된다.

 

nodeValue가 null일수 없기 때문에 null인 nodeValue를 없애줘야 한다.

그렇게 정의된 값이 undefind이면 공백을 넣어주고 아니면 nodeValue를 붙인값으로 재정의해주면된다.

 

여기선 ri와 bunji가 null일 수 있으므로 

// 데이터가 없을 때 처리하는 방법
let riValue = ris[i].childNodes[0];
if(riValue == undefined){
    riValue = '';
}else{
	riValue = ris[i].childNodes[0].nodeValue;
}

let bunjiValue = bunjis[i].childNodes[0];
if(bunjiValue == undefined){
	bunjiValue = '';
}else{
	bunjiValue = bunjis[i].childNodes[0].nodeValue;
}

이렇게 처리하거나 

 

// 데이터가 없을 때 처리하는 방법
let riValue = '';
if(ris[i].childNodes[0] != null){
    riValue = ris[i].childNodes[0].nodeValue;
}
let bunjiValue = '';
if(bunjis[i].childNodes[0] != null){
    bunjiValue = bunjis[i].childNodes[0].nodeValue;
}

이렇게처리할 수도 있다.

 

 

 

 

 

 

실습2) 우편번호 검색기 json

1. 데이터 파일 만들기 코드

json.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"%>

<%
	String strDong = request.getParameter("strDong");	

	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/mariadb1");
	
		conn = dataSource.getConnection();
		
		String sql = "select seq, zipcode, sido, gugun, dong, ri, bunji from zipcode where dong like ?";
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, strDong + "%");
		
		rs = pstmt.executeQuery();
		
		while(rs.next()){
			
			JSONObject obj = new JSONObject();
			obj.put("seq", rs.getString("seq"));
			obj.put("zipcode", rs.getString("zipcode"));
			obj.put("sido", rs.getString("sido"));
			obj.put("gugun", rs.getString("gugun"));
			obj.put("dong", rs.getString("dong"));
			obj.put("ri", rs.getString("ri"));
			obj.put("bunji", rs.getString("bunji"));
		
			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);
%>

 

2. ajax로 처리하는 코드

zipcodeSearch02.jsp

xml 때와 다르게 데이터가 null일 때 처리를 안해줘도 돼서 좋다.

<%@ 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 strDong = document.getElementById('dong').value.trim();
			alert(strDong);
			
			const request = new XMLHttpRequest();
			request.onreadystatechange = () =>{
				console.log('응답', request.readyState);
				if(request.readyState == 4){
					if(request.status==200){
						
						const data = request.responseText.trim();
						console.log(data);
						
						const jsonData = JSON.parse(request.responseText);
						
						let result = '<table width="800" border="1">';
						for(let i=0; i<jsonData.length; i++){
							result += '<tr>';
							result += '<td>' + jsonData[i].seq +'</td>';
							result += '<td>' + jsonData[i].zipcode +'</td>';
							result += '<td>' + jsonData[i].sido +'</td>';
							result += '<td>' + jsonData[i].gugun +'</td>';
							result += '<td>' + jsonData[i].dong +'</td>';
							result += '<td>' + jsonData[i].ri +'</td>';
							result += '<td>' + jsonData[i].bunji +'</td>';
							result += '</tr>';
						}
						result += '</table>';
						
						document.getElementById('result').innerHTML = '';
						document.getElementById('result').innerHTML = result;
						
					}else{
						alert("에러페이지");
					}
				}
			};
		
			request.open('GET','./data/json.jsp?strDong=' + strDong,true); 
			request.send();
			
		};
	};
</script>
</head>
<body>

<form>
동이름: <input type="text" id="dong" size="30" />
<input type="button" id="btn" value="우편번호 검색" />
</form>
<hr /><br />
<div id="result"></div>
</body>
</html>

 

 

 

 

 

실습3) 실제 기상청 홈페이지에서 xml 데이터 가져오기

AjaxEx02

RSS 주소 복사해서 아래와 같이 open메서드에 넣는다.

request.open('GET','http://www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1159068000' + strDong,true);

 

jstl.jar와 standard.jar를 lib에 추가한다.

 

 

proxy.jsp에서 아래 처럼 상위다이렉트에 trimDirectiveWhitespaces="true"를 추가해야한다.

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

 

데이터를 직접적으로 가져올수 없기 때문에 proxy를 통해서 가져와야한다.

그럼 weather.jsp에서 data폴더의 proxy.jsp를 부르고 proxy.jsp가

www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1159068000를 부른다.

이렇게 거쳐서 부르는걸 proxy라고 한다.

 

 

weather01.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 strDong = document.getElementById('dong').value.trim();
			const request = new XMLHttpRequest();
			request.onreadystatechange = () =>{
				if(request.readyState == 4){
					if(request.status==200){
						const data = request.responseText.trim();
						console.log(data);
						
					}else{
						alert("에러페이지");
					}
				}
			};
		
			// crossdomain - 허용안함
			// 데이터와 요청은 같은 아이피여야 함
			//request.open('GET','https://www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1159068000',true); 
			request.open('GET','./data/proxy.jsp',true); 
			request.send();
			
		};
	};
</script>
</head>
<body>

<form>
동이름: <input type="text" id="dong" size="30" />
<input type="button" id="btn" value="우편번호 검색" />
</form>
<hr /><br />
<div id="result"></div>
</body>
</html>

 

proxy.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:import var="data" url="https://www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1159068000" />
${data}

 

 

 

ajax는 여기까지이다. 

proxy개념 잘 이해해 놓자.

 

 

 

 

 

 

 

jQuery

ECMAScript 로  html과 연동된 표현을한다. DOM에 쉽게 접근하는 방법이다. 

 jQuery는 빠르고, 작고, 기능이 풍부한 자바스크립트 라이브러리이다.

library(framework)의 jQuery를 쓰면서 여러문서를 건드릴수 있다.

https://jquery.com/ 

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

HTML과 Javascript로 swing을 만든거라고 보면된다.

jQuery로 DOM을 만들면 디자인이 편리해진다.

 

 

※ 프로젝트 세팅

1) jQuey.com 에 접속해서 아래 두개 파일을 주소 저장으로 저장한다. 

zipping - 네트워크 부하 감소를 위해서 불필요한 공백을 제거한 파일

 

2) 위에서 주소 저장으로 받은 파일 두개를 js라는 폴더를 만들어서 그안에 넣는다.

 

3) jquery를 쓰기 위한 다음과 같은 script태그를 <head>에 추가 해줘야한다.

<script type="text/javascript" src="./js/jquery-3.5.1.js"></script>

 

 

$ 는 jQuery를 위한 특수 기호이기 때문에 $가 나오면 jQuery라고 보면된다. 

$(document).ready()는 window.onload 와 같은 뜻으로 '문서가 전부 읽혀지면...' 이라는 뜻이다.

 

  

※ CDN(Contents Delivery Network)

기본적으로 사용자가 원격지에 있는 서버(Origin Server)로 부터 Content(예. Web Object, Video, Music, Image, Document 등)를 다운로드 받을 때 가까이 있는 서버에서 받는 것보다 시간이 오래 걸리므로, 사용자와 가까운 곳에 위치한 Cache Server에 해당 Content를 저장(캐싱)하고 Content요청시에 Cache Server가 응답을 주는 기술이다. 

CDN은 웹, 애플리케이션, 스트리밍 미디어를 비롯한 콘텐츠를 전송하도록 최적화된 전세계적으로 촘촘히 분산된 서버로 이루어진 플랫폼이다. CDN은 오리진이라고도 불리는 콘텐츠 서버와 엔드유저(클라이언트) 사이에서 컨텐츠를 전달하는 역할을 한다. CDN을 사용하지 않으면 콘텐츠를 담고있는 오리진 서버들은 모든 엔트유저의 요청에 일일이 응답해야 한다.

 

https://jquery.com 에 들어가서 다음과 같이 script태그를 복사해온다.

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

 

복사한 위의 script 태그를 코드의 head에 추가한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

 

실습1) jQuery 쓰는 법 

jQueryEx01

 

jQuery 쓰는 법 

ex01.jsp ~ ex10.jsp 

 

 

jQuery에서 사용하는 메서드

배열 - forEach, each 

객체 - each

each01.jsp ~ each04.jsp

 

 

 

728x90
반응형

'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' 카테고리의 다른 글

01/14 - jQuery + Ajax , jQuery UI (1)  (0) 2021.01.31
01/13 - jQuery(2) : 사용법, 우편번호 검색기  (0) 2021.01.31
01/11 - Ajax(1) : 데이터 전송형식(csv, xml, json)별로 데이터베이스에서 값 가져오는 방법, XMLHttpRequest 객체 - 동기, 비동기(readyState, State Code)  (0) 2021.01.17
01/08 - JSP(13) : 표준태그라이브러리(JSTL), 특수한 서블릿 - 필터(filter), 리스너(listener)  (0) 2021.01.17
01/07 - JSP(12) : controller만들어서 Model2 게시판 만들기(url 방식), 표현언어(EL) 기본객체 사용법  (0) 2021.01.17
'빅데이터 플랫폼 구축을 위한 자바 개발자 양성과정' Related Articles more