23.05.13

이준영·2023년 5월 15일

Javascript
ajax 기술
XMLHttpRequest -> 원격에 데이터를 요청할 수 있다.

데이터
		csv : 문자열로 만듦   ( responseText )
        xml : 문자열로 만듦  ( responseXML )
        json : 문자열, 라이브러리로 만듦
        
        
       -- web 2.0 기술 --
        1.jsp(model2 포함) - 데이터 생성
        
        -----중간에 ajax 기술-----
        
        2. 데이터를 javascript에서 parsing
        
        전송 규약을 규정한 다음 1,2 번을 나눠서 만든다.
        
        
       -- web 3.0 기술 -- 
        
        blockchain 기술

🌕 크로스 도메인(CORS)

요청과 응답(브라우저 서버 실행)할 때 동일 ip, 동일 도메인이어야 된다. (데이터 보안 때문)

ex> localhost < - > ip == 서로 다른 ip기 때문에 에러 뜸

request.open('get', 'http://localhost:8080/AjaxEx02/data/xml1.jsp', true);

동일 ip일 때

다른 아이피일때

영화사이트 - 서버에서 정책으로 데이터 접근 허용(크로스 도메인 허용) => 그래서 데이터 가져와짐

🌙 접근 거부 데이터 강제로 가져오는 법

크로스 도메인 미허용(데이터 접근 거부 사이트) 강제로 데이터 가져오는 법 :
중간에 경유지 설정해서 가져오기(proxy)

jsp + jstl
servlet
중 선택하여 사용

jsp + jstl

./proxy/xml.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="xmldata" url="http://192.168.0.35:8080/AjaxEx02/data/xml.jsp" />

${ xmldata }

ajax01.jsp에서 proxy 폴더에 있는 xml을 넣어도 실행된다. (json도 똑같음, text/plain 하기)

request.open('get', './proxy/xml.jsp', true);

⭐응용 : model1 + ajax 우편번호 검색기

zipcode.jsp  ->  동 이름 검색 : (strDong) -- > 

										1. zipcode_xml.jsp
								<addresses>
                                	<address>
                                    	<zipcode / > ...
                                    </address>
                                </addresses>
                                
								------------------------------
                                
							 			2. zipcode_json.jsp
								[
                                	{
                                    	"zipcode" : "..",
                                        ...
                                        "bunji" : ".."
                                    }
                                ]

zipcodeTO/DAO 만들기

data_xml.jsp 만들어서 to/dao import하고 값 넣어보기

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@page import="model1.ZipcodeTO"%>
<%@page import="model1.ZipcodeDAO"%>
<%@page import="java.util.ArrayList"%>

    
<%
	request.setCharacterEncoding("utf-8");

	String strDong = "대치";
	
	ZipcodeDAO dao = new ZipcodeDAO();
	ArrayList<ZipcodeTO> lists = dao.zipcodeList(strDong);
	
	System.out.println(lists.size());
%>

브라우저에서 출력해보기(data_xml.jsp)

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@page import="model1.ZipcodeTO"%>
<%@page import="model1.ZipcodeDAO"%>
<%@page import="java.util.ArrayList"%>

    
<%
	request.setCharacterEncoding("utf-8");

	String strDong = "의정부";
	
	ZipcodeDAO dao = new ZipcodeDAO();
	ArrayList<ZipcodeTO> lists = dao.zipcodeList(strDong);
	
	StringBuilder sbXml = new StringBuilder();
	for(ZipcodeTO to : lists) {
		String zipcode = to.getZipcode();
		String sido = to.getSido();
		String gugun = to.getGugun();
		String dong = to.getDong();
		String ri = to.getRi();
		String bunji = to.getBunji();
		
		sbXml.append("<address>");
		sbXml.append("<zipcode>" + zipcode + "</zipcode>");
		sbXml.append("<sido>" +sido + "</sido>");
		sbXml.append("<gugun>" + gugun + "</gugun>");
		sbXml.append("<dong>" + dong + "</dong>");
		sbXml.append("<ri>" + ri + "</ri>");
		sbXml.append("<bunji>" + bunji + "</bunji>");
		sbXml.append("</address>");
	}
	
	
%>
<addresses>
<%=sbXml %>
</addresses>

요청 페이지 만들어서 콘솔에 보여주기 (zipcode01.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<!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 strDong = document.getElementById('dong').value.trim();

				if (strDong.length < 2) {
					alert('동 이름을 2자 이상 입력');
				}
				else {
					alert('정상');
					const request = new XMLHttpRequest;
					
					request.onreadystatechange = function() {
						if(request.readyState == 4) {
							if(request.status == 200) {
								console.log(request.responseText);
							}
						}
					};
						request.open('get','./data/data_xml.jsp?strDong=' + strDong ,true);  <-- 주소뒤에 strDong 써주기
						request.send();
				}
		};
	};
</script>
</head>
<body>
<input type="text" id="dong" />
<button id="btn">동이름 검색</button>
<br><hr><br>

<div id="result"></div>
</body>
</html>

요청 페이지 만든 후, data_xml.jsp에 특정 동 이름 대신 request.getParameter로 값 가져와서 검색한다.

xml데이터 브라우저로 보여주기

request.onreadystatechange = function() {
						if(request.readyState == 4) {
							if(request.status == 200) {
								//console.log(request.responseText);
								
								const result = showData(request.responseXML);
								console.log(result);
								
								document.getElementById('result').innerHTML = result;
							}
						}
					};
						request.open('get','./data/data_xml.jsp?strDong=' + strDong ,true);
						request.send();
				}
		};
		
		const showData = function(xmlData) {
			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');
			
			let result = '<table width="800", border="1">';
			for(let i = 0; i <zipcodes.length; i++) {
				result += '<tr>';
				result += '<td>' + zipcodes[i].innerHTML + '</td>';
				result += '<td>' + sidos[i].innerHTML + '</td>';
				result += '<td>' + guguns[i].innerHTML + '</td>';
				result += '<td>' + dongs[i].innerHTML + '</td>';
				result += '<td>' + ris[i].innerHTML + '</td>';
				result += '<td>' + bunjis[i].innerHTML + '</td>';
				result += '</tr>';
			}
				result += '</table>';
				return result;
		}

전체적인 정리!

request.open으로 해당 url에 정보 주고 요청
request.responseText(XML)로 응답 받음(data_xml.jsp에는 우편번호 정보가 들어있으므로, 그것을 가져오게 됨)
응답 받은 정보를 활용하여 브라우저에 띄우는 것!

⭐ json으로 하기

data_json.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="model1.ZipcodeTO"%>
<%@page import="model1.ZipcodeDAO"%>
<%@page import="java.util.ArrayList"%>
    
<%@page import="org.json.simple.JSONObject"%>
<%@page import="org.json.simple.JSONArray"%>
<%
	request.setCharacterEncoding("utf-8");

	String strDong = request.getParameter("strDong");
	
	ZipcodeDAO dao = new ZipcodeDAO();
	ArrayList<ZipcodeTO> lists = dao.zipcodeList(strDong);
	
	JSONArray arr = new JSONArray();
		
	for(ZipcodeTO to : lists) {
		String zipcode = to.getZipcode();
		String sido = to.getSido();
		String gugun = to.getGugun();
		String dong = to.getDong();
		String ri = to.getRi();
		String bunji = to.getBunji();
		
		JSONObject obj = new JSONObject();

		obj.put("zipcode", to.getZipcode());
		obj.put("sido", to.getSido());
		obj.put("gugun", to.getGugun());
		obj.put("dong", to.getDong());
		obj.put("ri", to.getRi());
		obj.put("bunji", to.getBunji());
		
		arr.add(obj);
	}
	
out.println(arr);
%>

zipcode02.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() {
		document.getElementById('btn').onclick = function() {
			const strDong = document.getElementById('dong').value.trim();


			if (strDong.length < 2) {
				alert('동이름을 2자 이상 입력하세요.');
			} else {
				alert('정상');
				const request = new XMLHttpRequest;

				request.onreadystatechange = function() {
					if (request.readyState == 4) {
						if (request.status == 200) {
							const data = request.responseText;
							
							const jsonData = JSON.parse(data);
							
							console.log(data);
							
							console.log(jsonData[0].zipcode);

							let result = '<table border="1">'
								for (let i = 0; i < jsonData.length; i++) {
									result += '<tr>';
									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 += '</tr>';

								}
								result += '</table>';
								
							document.getElementById('result').innerHTML = result;
						} else {
							alert('페이지 에러');
						}
					}
				}
				request.open('get', './data/data_json.jsp?strDong=' + strDong,
						true);
				request.send();

			}
		};
	};
</script>
</head>
<body>
	<input type="text" id="dong" />
	<button id="btn">동이름 검색</button>
	<br>
	<hr>
	<br>

	<div id="result"></div>
</body>
</html>

🌕 javascript 라이브러리

dom에 대한 접근을 편리하게 할 수 있음

🌙 jquery

웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리

https://jquery.com/ 참고

jquery.com = core
desktop = jquery ui
mobile = jquery mobile

jquery 사용 방법

1. https://jquery.com <---- 이 사이트에서
jquery-3.7.0.js (개발 버전) / jquery-3.7.0.min.js 9 (서비스 버전) 다운,
또는 Using jQuery with a CDN 로 가서 CDN 사용하기

2. webapp에 폴더 하나(js) 만들고 집어넣기

3. <script src="~~~~"></script> 에서 에 라이브러리 선택하여 넣기

$ 사용법
window.jquery => jQuery => $로 단축되어옴


<!-- 서비스 버전 (CDN) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
	//window.jquery => jQuery => $
	$( document ).ready( function() {   (가장 많이 사용)
		console.log('Hello JQuery 1');
		
	});
    
	
	jQuery(document).ready( function() {
		console.log('Hello JQuery 2');
		
	});
    
	
	$(function() {   (가끔 사용)
		console.log('Hello JQuery 3');
	});
    
    
    $(() => {
		console.log('Hello JQuery 4');
	})
</script>

🌕 html 문서에 쉽게 접근 (css)

jquery -> html
			selector  <---- css

$('selector').처리할 내용 ...

css( css 효과 )
css('color', 'red') = 글자색
css('background-color', 'red') = 배경색

🌙 기본

<!-- 서비스 버전 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">

	//선택을 하여 css적 효과를 줌
	$( document ).ready( function() {
		$('*').css('color', 'orange');
        
		/*$( '*' ).css( {   <-- 이렇게도 쓰임
			color: 'blue'
		}); */
	});
</script>
</head>
<body>
<h2>Header - 1</h2>
<h3>Header - 2</h3>
<h2>Header - 3</h2>
<h3>Header - 4</h3>

</body>

🌙 특정 태그만 주고 싶을 때

$('h2').css('color', 'orange');  <-- 이런식으로 셀렉터쪽에 태그 이름 주면 된다.
//$('h' + '2').css('color', 'orange');   <-- 문자열이라 문자열 결합으로 표현 가능
const select = 'h3';
const val = 'green';
$(selector).css('color', val);   <-- 각각 변수를 만들어서 안에 대입

🌙 태그 연결자 사용

// , == 태그 연결자
		$('h2, h3').css('color', 'lightblue');  <-- 두개를 한꺼번에 연결

🌙 id를 각각 줘서 사용

	$('#i1').css('color', 'grey');
    
    $('#i1, #i3').css('color', 'grey');
    
<body>
<h2 id="i1">Header - 1</h2>
<h3 id="i2">Header - 2</h3>
<h2 id="i3">Header - 3</h2>
<h3 id="i4">Header - 4</h3>

</body>

🌙 class를 줘서 사용

1.
$('.c1').css('color', 'purple');

2.
$('h2.c1').css('color', 'purple');    <--- h2 중 c1만 적용(제한을 둠)

3.
$('.c1, .c2').css('color', 'purple');   <--- 두 개 다 적용


<body>
<h2 class="c1">Header - 1</h2>
<h3 class="c1">Header - 2</h3>
<h2 class="c2">Header - 3</h2>
<h3 class="c2">Header - 4</h3>

</body>

🌙 자손('>') 과 후손('')

1.
$('div > *').css('color', 'yellowgreen');    <--- div 자손 전부 실행

2.
$('div *').css('color', 'yellowgreen');    <--  div 후손까지 전부 실행

🌙 속성 참조

ex> input type=~~~ <-- 속성

//속성(^=, *=, ...)
1.
$('input[type="text"]').css('background-color', 'pink');  <-- input 중 type이 텍스트인 것

2.
$('input[data="text2"]').css('background-color', 'blue');  <- data 값 text2인 것

3.
$('input[data^="te"]').css('background-color', 'blue');  <-- data="te"가 포함되면 모두 바꿈, ^=는 처음부터 검사 기준으로, ate <--이건 안됨, 시작이 te어야함  / *= <- 이게 te 포함만 되면 다 적용 

4.
$('input[data="text1"]').val('Hello jQuery');  <-- val를 통하여 데이터 집어넣기


<body>
<input type="text" data="text1"><br>
<input type="password" data="text2"><br>

</body>

🌙 수도 클래스 - 홀 / 짝

선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용


$('table').css('width', '800');  <--- table width 조정
		
0행 기준		
$('tr:odd').css('background-color', 'lightgrey');   <-- odd: 홀수
$('tr:even').css('background-color', 'yellowgreen');  <-- even : 짝수




<table>
	<tr>
		<th>이름</th>
		<th>혈액형</th>
		<th>지역</th>
	</tr>
	
	<tr>
		<th>tester1</th>
		<th>A</th>
		<th>서울</th>
	</tr>
	
	<tr>
		<th>tester2</th>
		<th>AB</th>
		<th>도쿄</th>
	</tr>
	
	<tr>
		<th>tester3</th>
		<th>O</th>
		<th>런던</th>
	</tr>
</table>

🌙 수도 클래스 - 버튼 누를시 변경


document.getElementById('btn1').onclick = function() {
			//btn1 버튼을 누를 시 변경
			$('tr:odd').css('background-color', 'lightgrey');
			$('tr:even').css('background-color', 'yellowgreen');

			$('tr:first').css('background-color', 'red');  <--첫번째 줄 색상 변경
		};
		
		document.getElementById('btn2').onclick = function() {
			//btn2 버튼을 누를 시 원래색상
			$('tr:odd').css('background-color', 'white');
			$('tr:even').css('background-color', 'white');
		};
        
<button id="btn1">색상변경</button>
<button id="btn2">원래색상</button>

🌙 수도클래스 - 행에 따라 변경 (0 기준)


n == 1

$('tr:nth-child(3n)').css('background-color', 'lightgrey');  <--- 3n = 3번째행 색 변경
$('tr:nth-child(3n + 1)').css('background-color', 'yellowgreen'); <-- 4번째 행 색 변경
$('tr:eq(0)').css('background-color', 'red'); <-- 0번째 색 변경

🌙 셀렉터 메서드화 - eq / first / last

// eq  <-- 어떤 위치에 있는것
// first/ last

$('tr').eq(-1).css("background-color", "aqua")   <-- 맨 마지막 적용
$('tr').eq(0).css("background-color", "aqua")    <-- 0번쨰(처음) 적용
$('tr').first().css("background-color", "coral") <--- 첫번째 적용, eq와 겹쳐서 coral로 변경

🌙 자손, 후손 메서드화

// parent() / childern()  -> 부모 / 자식    (parent().parent() : 조상)
// prev() / next()  ->  위 / 아래
// siblings() - 형제들

1.
$('#l1').css('color', 'Crimson');    <-- 아이디 l1 변경

2.
$('#l1').parent().css('color', 'Dodgerblue'); <-- l1의 부모 변경(원래라면 실행 순서에 따라 l1도 같이 Dodgerblue색으로 
바껴야하지만, 1번의 코드가 순서 상관없이 더 나중에 선언되어 바뀌지 않는다)

3.
$('#d1').children().css('color', 'Dodgerblue');   <-- d1의 자손들

4.
$('#d1').children('ol').css('color', 'Indigo');   <-- d1의 자손 중 ol

5.
$('#d1').prev().css('color', 'Forestgreen');   <--- d1 요소 위 변경

6.
$('#d1').next().css('color', 'Lightcoral');    <---- d1 요소 아래 변경


<div>
	<div>내용1</div>
	<div>내용2</div>
	<div id="d1">
		<ul>
			<li id="i1">사과</li>
			<li>딸기</li>
			<li>자몽</li>
		</ul>
	
		<ol>
			<li id="l2">사과</li>
			<li>딸기</li>
			<li>자몽</li>
		</ol>
	</div>
	<div>내용3</div>
	<div>내용4</div>
</div>

1,2

3, 4, 5, 6

🌙 배열 선언

$( document ).ready( function() {
		const array = [
			{name: 'daum', link: 'https://www.daum.net'},
			{name: 'naver', link: 'https://www.naver.com'},
			{name: 'google', link: 'https://www.google.com'}
			
		];
		console.log(array);
		
        1.
		//for in
		for(let arr in array) {
			console.log(array[arr], arr);
		}
		
        <br>
        
        //forEach
		array.forEach(function(item) {
			console.log(item.name, '/', item.link);
		})
        
       -------------------------------------------------------- 
        
       2.  //foreach 이렇게 표현 가능
        $.each(array, function(index, item) {
			console.log('array');
			console.log(index, '/', item.name, '/', item.link); <--index / name / link 순

		})
	});

⭐ 응용

$( document ).ready( function() {
		const array = [
			{name: 'daum', link: 'https://www.daum.net'},
			{name: 'naver', link: 'https://www.naver.com'},
			{name: 'google', link: 'https://www.google.com'}
			
		];
	
		let output = '';
		
		$.each(array, function(index, item) {
			output += '<a href="'+ item.link +'">';
			output += '<div>' + item.name + '</div>'
			output += '</a>'
		})
		
		document.body.innerHTML = output;
	});

클릭시 해당 링크 이동

🌙 객체 데이터 분리해서 가져오기


const obj = {name: 'naver', link: 'https://www.naver.com'};
				
		$.each(obj, function(key, value) {  <-- name == key / link  == value
			console.log(key, '/', value);
		})

🌙 html 태그에 forEach 적용하기

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">


	$( document ).ready( function() {

		$('h2').each(function(index, item) {
			1.
            console.log(index);    <--- 인덱스 출력(0~4)
            
            2.
            console.log(index,  '/', item);   <--- 인덱스 / item   출력
            
            3.
            console.log(item.innerHTML);   <--- 태그 안 내용만 출력
            
            4.
            console.log(this.innerHTML);  <--- 자기 자신 출력(3번과 동일)
            
            5.
			this.innerHTML = 'New Text : ' + index;

            
		});
        
        
	});
		
</script>
</head>
<body>

<h2>Header - 1</h2>
<h2>Header - 2</h2>
<h2>Header - 3</h2>
<h2>Header - 4</h2>
<h2>Header - 5</h2>


</body>