너와 나의 연결고리, JSP 🔗(10) - Ajax, JSON

joyfulwave·2022년 11월 29일

Java ajax eclipse json jsp 비동기

📚 Ajax

Ajax(Ascynchronous Javascript And XML) - 비동기적 통신

Ajax는 빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법이에요. 웹페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신 할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있어요.
서버와 데이터를 주고 받을 수 있는 대표적인 데이터는 JSON, XML, HTML, 텍스트 파일 등이 있어요.

📌 비동기 방식이란? (주식, 날씨, 실시간데이터 모니터링)

비동기 방식은 웹페이지를 리로드하지않고 데이터를 불러오는 방식으로 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포해요.

📌 동기 vs 비동기방식

동기 방식은 하나의 업무 처리가 끝나기 전까지 다른 업무 처리를 하지 않지만 비동기방식은 하나의 업무 처리 중 다른 업무 처리도 가능해요.

📌 Ajax 장, 단점

⚫ 장점

웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지 일부분만 갱신할 수 있어요.
웹 페이지가 로드된 후에 서버로 데이터 요청을 보내거나 받을 수 있어요.
다양한 UI 구현이 가능해져요.

⚫ 단점

페이지 이동이 없기 때문에 히스토리 관리가 안돼요.
반복적인 데이터 요청이 있으면 느려지거나 작동하지 않을 수 있어요.

📌 서버에 요청하기 - request

⚫ XMLHttpRequest 객체

ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체에요. 이 객체는 웹 브라우저가 서버와 데이터를 교환 할 때 사용해요.
웹 브라우저가 백그라운드에서 서버와 계속해서 통신할 수 있는 것은 바로 이 객체를 사용하기 때문이에요.
```
	let xhr = new XMLHttpRequest();
```

⚫ open()

서버로 보낼 ajax 요청의 형식을 설정해주는 메서드에요.

open(전달방식, url주소, 동기여부);

전달방식 : GET, POST 방식 중 하나 선택

url주소 : 요청을 처리할 서버의 파일 주소 선택

동기여부 : 요청을 동기식으로 전달할지 비동기 식으로 전달할지 선택(비동기: true(기본값), 동기 : false)

⚫ send()

작성된 ajax 요청을 서버로 전달하는 역할을 해요.

📌 서버로부터 응답(response)

⚫ status

서버의 문서상태를 나타내요.(HTTP 상태코드)

100번대 : 조건부 응답

200번대 : 성공

300번대 : 리다이렉션 완료

400번대 : 요청 오류

500번대 : 서버 오류

⚫ readystate

XMLHttpRequest 객체의 현재 상태를 나타내요.

UNSENT(숫자0) : XMLHttpRequest 객체가 생성됨

OPENED(숫자1) : open()메서드가 성공적으로 실행된

HEADERS_RECEIVED(숫자 2) : 모든 요청에 대한 응답이 도착

LOADING(숫자 3) : 요청한 데이터를 처리 중

DONE(숫자 4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨.

⚫ onreadystatechange

XMLHttpRequestr 객체의 readyState프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정해요.

📌 간단한 ajax 구현해보기

<%@ 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>
</head>
<body>
	<h3>Ajax 요청 보내기 테스트</h3>
	<input type="submit" value="GET 방식으로 요청보내기" onclick="send1();" />
	<input type="submit" value="POST 방식으로 요청보내기" onclick="send2();" />
	<p id="result"></p>
</body>

<script>

	function send1(){
		let xhr = new XMLHttpRequest();
		xhr.open("GET", "request_ajax.jsp?userid=apple&userpw=1234", true);
		xhr.send();
		xhr.onreadystatechange = function(){
			if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
				document.getElementById("result").innerHTML = xhr.responseText;
				//alert(xhr.responseText);
			}
		}
	}

	function send2(){
		let xhr = new XMLHttpRequest();
		xhr.open("POST", "request_ajax.jsp", true);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send("userid=post&userpw=5678");
		xhr.onreadystatechange = function(){
			if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
				document.getElementById("result").innerHTML = xhr.responseText;
			}
		}
	}

</script>
</html>

📚 JSON

📌 JSON 이란

서로 다른 언어들 간 데이터를 주고 받을 수 있도록 만들어진 텍스트기반의 형식으로 경량화된 데이터 교환 형식을 의미해요.
프로그래밍 언어가 아닌 데이터 표기 방법 중 하나이고 기본적으로 name:value 형태의 구조를 가지고 있다.

📌 JSON으로 Ajax 구현해보기

⚫ 라이브러리 추가

eclipse 에서 json으로 데이터를 사용하기 위해서는 라이브러리를 추가해주어야 해요

⚫ data.json

{
	"search_word" : [
		{"rank" : "1", "name" : "코로나"},
		{"rank" : "2", "name" : "비트코인"},
		{"rank" : "3", "name" : "JSP"},
		{"rank" : "4", "name" : "JAVA"},
		{"rank" : "5", "name" : "웹개발"}	
	]
}

⚫ json_test.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실시간 순위</title>
</head>
<body>
	<h1>Ajax를 이용해 실시간 순위 나타내기</h1>
	<table border="1">
		<tr>
			<th>실시간 검색 순위</th>
			<th>키워드</th>
		</tr>
		<tr>
			<td id="td1">순위</td>
			<td id="td2">키워드</td>
		</tr>
	</table>
	
	<script>
	
		//window.onload : HTML이 다 load가 완료 했을 때 실행
		window.onload = function(){
			let obj = "";
			let word = new Array();
			let xhr = new XMLHttpRequest();
			xhr.open("GET", "data2.json", true);
			xhr.send();
			xhr.onreadystatechange = function(){
				if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
					obj = JSON.parse(xhr.responseText);
					/*
						파싱된 obj에서 search_word라는 key를 가지고 있는 것을 꺼내보면
						[{}, {}, {}, {}, {}]가 나온다. (배열 return)
					*/
					for(let i = 0; i < obj.search_word.length; i++){
						/*
							obj.search_word 배열의 각 방에는 또 json들이 담겨있다.
							{"rank" : 순위, "name" : 검색어}
							각 방의 json들에서 name키로 담겨있는 검색어를 꺼내서 word 배열의 각 방에 넣는다.
						*/
						word[i] = obj.search_word[i].name;
					}
				}
			}
			
			let i = 0;
			let interval = setInterval(function(){
				// 0, 1, 2, 3, 4 -> 5가 되는 순간 다시 0
				i = i % obj.search_word.length;
				document.getElementById("td1").innerHTML = i + 1;
				document.getElementById("td2").innerHTML = word[i];
				i++;
			}, 2000);
			
			// setTimeout(함수, 밀리초);
			setTimeout(function(){
				// clearInterval(인터벌) 해당 인터벌 삭제
				clearInterval(interval);
			}, 20000);
		}
	</script>
</body>
</html>