close
프로필 배경
프로필 로고

yyummmmmmmm

Study/Acorn · 2024. 11. 4. fullscreen 넓게보기

241101 AJAX (jQuery/fetch then/AXIOS)

241101 에이콘 아카데미 수업을 기반하여 작성되었음을 알립니다.

AJAX

AJAX는 자바스크립트와 XML기반의 비동기 통신 방식이다.

클라이언트 요청 시 서버 DB 데이터를 클라이언트 브라우저 앞의 자바스크립트 단에서 받아 출력한다.

우리가 현재까지 배워왔던 데이터 전달 방식은 같은 페이지 내에서 불가하고 새로운 HTML 페이지로 이동하여 출력했다.

하지만 AJAX를 쓰게된다면 한 페이지 내에서 요청과 응답을 모두 할 수 있다. SPA 구현에 효과적이다.

DOM을 사용하여 동적 화면 구성을 할 수 있다.
💡 나의 생각!
"AJAX는 자바스크립트 단에서 이루어지는 비동기 통신 방식이고 쉽게 말해서 서버에 데이터 요청을 했을 때 페이지 이동 없이, 싱글 페이지 내에서 새로고침 없이 요청과 응답을 받을 수 있는 기술인 것 같다."

AJAX를 배우기 전에 Promise에 대한 학습이 선행되어야한다.

🙏 데이터 과학자 + 프로그래머 세상 : Ajax 처리 : 전통적 -＞ fetch -＞ async & await, Promise란?

 

AJAX 설명시 해당 그림을 이해하고 그리면서 설명할 수 있어야 함

🙏 Jesse James Garrett : Ajax: une nouvelle approche pour les applications Web

AJAX의 대표적인 예시 (검색창), 구글 서버 데이터를 페이지 이동, 새로고침 없이 바로 출력 가능

AJAX 실습 1

의존성 추가

Spring Boot DevTools / Spring Web / Lombok

application.properties

spring.application.name=sprweb29ajax

server.port=80

VO

package pack;

import org.springframework.stereotype.Component;

import lombok.Data;

@Data
@Component
public class MyModel {
	private String name;
	private String skills[];
}

Controller

package pack;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class JsonController {
	@Autowired
	private MyModel myModel;
	
	@GetMapping("list")
	@ResponseBody // myModel의 결과값(데이터)을 클라이언트에 던짐
	public MyModel getJson(@RequestParam("name")String name) {
		myModel.setName(name);
		myModel.setSkills(new String[] {"자바 전문 개발", "웹 개발"});
		return myModel;
	}
	
	@GetMapping("list2")
	@ResponseBody // myModel의 결과값(데이터)을 클라이언트에 던짐
	public Map<String, Object> getJson2() { // key는 String, Object는 dataList
		List<Map<String, String>> dataList = new ArrayList<Map<String,String>>(); // dataList Map을 담는 그릇
		
		Map<String, String> data = new HashMap<String, String>(); // 키밸류 형식으로 하기 위한 HashMap 사용
		data.put("name", "한국인");
		data.put("age", "22");
		dataList.add(data);
		
		data = new HashMap<String, String>();
		data.put("name", "신기해");
		data.put("age", "26");
		dataList.add(data);
		
		data = new HashMap<String, String>();
		data.put("name", "이겨라");
		data.put("age", "28");
		dataList.add(data);
		
		Map<String, Object> data2 = new HashMap<String, Object>(); //
		data2.put("datas", dataList);
		return data2;
	}
}

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="list?name=james">json 처리 : 단일 자료</a><br/>
<a href="list2">json 처리 : 복수 자료</a><br/>
<a href="ajaxtest.html">Ajax 요청 처리</a>
</body>
</html>

ajaxtest (jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // jQuery() = $(), window.onload와의 차이 서버에 요청한 파일의 내용이 모두다 읽히고 난 후 클라이언트에 반영됨
	//alert("a"); //$(document).ready 텍스트만 먼저 읽어 옴
	$("#btnSingle").click(function(){
		//alert("1");
		$("#showData").empty();
		
		$.ajax({
			type:'get',
			url:'list',
			data:{
				'name':'oscar'
			},
			dataType:'json',
			success:function(data){
				let str = data.name + '<br>';
				str += data.skills[0] + " ";
				str += data.skills[1];
				$("#showData").append(str);
			},
			error:function(){
				$("#showData").html('<b>에러</b>발생')
			}
		});
	});
	
	$("#btnMulti").click(function(){
		//alert("2");
		$("#showData").empty();
		
		$.ajax({
			type:'get',
			url:'list2',
			dataType:'json',
			success:function(data){
				let str = '<table>';
				let list = data.datas;
				console.log(list.length);
				$(list).each(function(idx, objArr){
					str += "<tr>";
					str += "<td>" + objArr['name'] + "</td>";
					str += "<td>" + objArr.age + "</td>";
					str += "</tr>";
				});
				str += '</table>';
				$("#showData").append(str);
			},
			error:function(){
				$("#showData").html('<b>에러</b>발생')
			}
		});
	});
});
</script>
</head>
<body>
json 읽기(jQuery)<br/>
<input type="button" value="한 개의 자료 읽기" id="btnSingle"><br/>
<input type="button" value="여러 개의 자료 읽기" id="btnMulti"><br/>
<hr/>
<div id="showData"></div>
</body>
</html>

ajaxtest2 (fetch then)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
	//alert("a");
	document.querySelector("#btnSingle").addEventListener("click", function(){
		document.querySelector("#showData").innerHTML = "";
		fetch("list?name=oscar")
			.then(response => response.json()) // json 모양을 갖추고 있는 문자열이기 때문에 자바스크립트 명령어로 먹게 해주기 위함
			.then(data => {
				let str = data.name + '<br>';
				str += data.skills[0] + " ";
				str += data.skills[1];
				document.querySelector("#showData").innerHTML = str;
			})
			.catch(() => {
				document.querySelector("#showData").innerHTML = "";
			});
	});
	
	document.querySelector("#btnMulti").addEventListener("click", function(){
		document.querySelector("#showData").innerHTML = "";
		fetch("list2")
			.then(response => response.json()) // json 모양을 갖추고 있는 문자열이기 때문에 자바스크립트 명령어로 먹게 해주기 위함
			.then(data => {
				let str = '<table>';
				let list = data.datas;
				list.forEach(function(objArr){
					str += "<tr>";
					str += "<td>" + objArr['name'] + "</td>";
					str += "<td>" + objArr.age + "</td>";
					str += "</tr>";
				});
				str += '</table>';
				document.querySelector("#showData").innerHTML = str;
			})
			.catch(() => {
				document.querySelector("#showData").innerHTML = "";
			});
	});
});
</script>
</head>
<body>
json 읽기(fetch)<br/>
<input type="button" value="한 개의 자료 읽기" id="btnSingle"><br/>
<input type="button" value="여러 개의 자료 읽기" id="btnMulti"><br/>
<hr/>
<div id="showData"></div>
</body>
</html>

ajaxtest3 (AXIOS)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- AXIOS 라이브러리 -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
	document.querySelector("#btnSingle").addEventListener("click", function(){
		document.querySelector("#showData").innerHTML = "";
		
		axios.get('list',{
			params:{
				'name':'tom',
			}
		})
		.then(function(response){
			const data = response.data;
			let str = data.name + '<br>';
			str += data.skills[0] + " ";
			str += data.skills[1];
			document.querySelector("#showData").innerHTML = str;
		})
		.catch(function() {
			document.querySelector("#showData").innerHTML = "<b>에러 발생</b>";
		});
	});
	
	document.querySelector('#btnMulti').addEventListener('click', () => {
        document.querySelector('#showData').innerHTML = '';
        axios.get('list2')
            .then(response => {
                let str = '<table>';
                let list = response.data.datas;
                list.forEach(objArr => {
                    str += "<tr>";
                    str += "<td>" + objArr['name'] + "</td>";
                    str += "<td>" + objArr.age + "</td>";
                    str += "</tr>";
                });
                str += '</table>';
                document.querySelector('#showData').innerHTML = str;
            })
            .catch(() => {
                document.querySelector('#showData').innerHTML = '<b>에러 발생</b>';
            })
    });
});
</script>
</head>
<body>
json 읽기(axios)<br/>
<input type="button" value="한 개의 자료 읽기" id="btnSingle"><br/>
<input type="button" value="여러 개의 자료 읽기" id="btnMulti"><br/>
<hr/>
<div id="showData"></div>
</body>
</html>

결과

'Study > Acorn' 카테고리의 다른 글

241107 RESTful / AOP  (3) 2024.11.07
241106 RESTful (CRUD/문제)  (1) 2024.11.07
241105 RESTful (PUT/DELETE/문제)  (0) 2024.11.05
241105 RESTful (GET/POST)  (2) 2024.11.05
241104 AJAX (DB연동/문제)  (0) 2024.11.04
Study/Acorn 관련 글
더 보기

티스토리툴바