안녕하세요, 오늘은 순수 자바스크립트(Javascript)만으로 ajax를 구현하는 법을 작성하도록 하겠습니다.
jQuery 같은 다른 라이브러리를 사용하지 않고, 오직 Javascript만 사용하여 구현하는 것을 바닐라(vanilla) Javascript 혹은 퓨어(Pure) 자바스크립트라고 하는데, jQuery가 너무도 많이 쓰이고 강력한 라이브러리이지만 최근 여러 이유로 탈제이쿼리를 하는 프로젝트들이 많아지고 있는 추세입니다.
그래서 jquery의 $.ajax 기능을 바닐라 Javasxcript를 이용하여 간단히 구현하도록 하겠습니다.
1. ajax - GET 방식 구현 (JSON 응답 및 요청)
구현할 기능은 간단합니다. html 페이지에서 name을 입력받고, 서버에 ajax 요청을 하여 해당 이름에 맵핑된 나이를 가져와서 다시 화면에 뿌려주는 기능입니다. 여기서 요청 및 응답은 모두 JSON 타입으로 진행을 하고, 바닐라 자바스크립트를 통해 ajax를 구현하도록 하겠습니다.
구현은 Spring Boot 프로젝트로 작성을 하였고, 파일은 Controller.java 파일과 static 폴더에 index.html 파일 한개만 생성을 하였습니다.
(name과 age 데이터는 DB를 구성하거나 그렇게까지는 하지 않고, 미리 map에 몇 개 수동으로 샘플데이터 넣어줍니다.)
index.html (FrontEnd)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
var httpRequest;
/* button이 클릭되었을때 이벤트 */
document.getElementById("ajaxCall").addEventListener('click', () => {
/* textBox에 작성된 name 데이터를 가져옴 */
var inputName = document.getElementById("inputName").value;
/* 통신에 사용 될 XMLHttpRequest 객체 정의 */
httpRequest = new XMLHttpRequest();
/* httpRequest의 readyState가 변화했을때 함수 실행 */
httpRequest.onreadystatechange = () => {
/* readyState가 Done이고 응답 값이 200일 때, 받아온 response로 name과 age를 그려줌 */
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var result = httpRequest.response;
document.getElementById("name").innerText = result.name;
document.getElementById("age").innerText = result.age;
} else {
alert('Request Error!');
}
}
};
/* Get 방식으로 name 파라미터와 함께 요청 */
httpRequest.open('GET', '/getAgeByName?inputName=' + inputName);
/* Response Type을 Json으로 사전 정의 */
httpRequest.responseType = "json";
/* 정의된 서버에 요청을 전송 */
httpRequest.send();
});
}
</script>
<style type="text/css"> span { color: blue } </style>
</head>
<body>
<h1>AJAX GET TEST</h1>
Name: <input type="text" id="inputName"></input>
<button id="ajaxCall">호출</button>
<!-- 응답 받은 name 및 age 데이터를 추가해서 작성할 간단한 결과 텍스트 -->
<h2> <span id="name"></span>의 나이는 <span id="age"></span>입니다. </h2>
</body>
</html>Controller.java (BackEnd, 서버)
package com.oriental.AjaxTest.controller;
import java.util.*;
import org.springframework.web.bind.annotation.*;
@RestController
public class AjaxTestController {
@GetMapping("/getAgeByName")
/* inputName 파라미터를 받아, 미리 저장된 ageMap에서 해당 이름에 맵핑된 나이를 리턴해주는 메소드 */
public Map<String,Object> getAgeByName( @RequestParam String inputName ) {
Map<String, Integer> ageMap = new HashMap<>();
ageMap.put("tom", 10); ageMap.put("bob", 20); ageMap.put("kim", 30);
Map<String,Object> returnMap = new HashMap<>();
returnMap.put("name", inputName);
returnMap.put("age", ageMap.get(inputName));
return returnMap;
}
}
2. ajax - POST 방식 구현 (JSON 응답 및 요청)
Post도 Get과 거의 동일하지만, RequestHeader에 Content-Type을 정의해야 한다는 점(httpRequest.setRequestHeader('Content-Type', 'application/json'))과 send 요청 시 파라미터 데이터를 포함하여 요청해야 하는 점(httpRequest.send(JSON.stringify(reqJson)))이 다릅니다.
(index2.html으로 파일을 만들어서 127.0.0.1:8080/index2.html로 수동으로 접근을 하였습니다.)
index2.html (FrontEnd)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
var httpRequest;
/* button이 클릭되었을때 이벤트 */
document.getElementById("ajaxCall").addEventListener('click', () => {
/* textBox에 작성된 name 데이터를 가져옴 */
var inputName = document.getElementById("inputName").value;
/* 입력된 데이터 Json 형식으로 변경 */
var reqJson = new Object();
reqJson.name = inputName;
/* 통신에 사용 될 XMLHttpRequest 객체 정의 */
httpRequest = new XMLHttpRequest();
/* httpRequest의 readyState가 변화했을때 함수 실행 */
httpRequest.onreadystatechange = () => {
/* readyState가 Done이고 응답 값이 200일 때, 받아온 response로 name과 age를 그려줌 */
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
var result = httpRequest.response;
document.getElementById("name").innerText = result.name;
document.getElementById("age").innerText = result.age;
} else {
alert('request에 뭔가 문제가 있어요.');
}
}
};
/* Post 방식으로 요청 */
httpRequest.open('POST', '/postAgeByName', true);
/* Response Type을 Json으로 사전 정의 */
httpRequest.responseType = "json";
/* 요청 Header에 컨텐츠 타입은 Json으로 사전 정의 */
httpRequest.setRequestHeader('Content-Type', 'application/json');
/* 정의된 서버에 Json 형식의 요청 Data를 포함하여 요청을 전송 */
httpRequest.send(JSON.stringify(reqJson));
});
}
</script>
<style type="text/css"> span { color: blue } </style>
</head>
<body>
<h1>AJAX POST TEST</h1>
Name: <input type="text" id="inputName"></input>
<button id="ajaxCall">호출</button>
<!-- 응답 받은 name 및 age 데이터를 추가해서 작성할 간단한 결과 텍스트 -->
<h2> <span id="name"></span>의 나이는 <span id="age"></span>입니다. </h2>
</body>
</html>Controller.java (BackEnd, 서버)
같은 컨트롤러에 아래 메서드만 추가해줍니다.
@PostMapping("/postAgeByName")
/* inputMap 파라미터를 받아, 미리 저장된 ageMap에서 해당 이름에 맵핑된 나이를 리턴해주는 메소드 */
public Map<String,Object> postAgeByName( @RequestBody Map<String,Object> inputMap ) {
Map<String, Integer> ageMap = new HashMap<>();
ageMap.put("tom", 10); ageMap.put("bob", 20); ageMap.put("kim", 30);
Map<String,Object> returnMap = new HashMap<>();
returnMap.put("name", inputMap.get("name"));
returnMap.put("age", ageMap.get(inputMap.get("name")));
return returnMap;
}
위와 같이 간단하게 바닐라(순수) 자바스크립트를 가지고 Json 타입으로 요청 / 응답하는 Ajax 예제를 구현해봤습니다.
반응형
'[IT] Javascript' 카테고리의 다른 글
| [Javascript] 오픈소스 차트 및 그래프 생성 - ECharts 소개 및 예제 (0) | 2022.06.09 |
|---|---|
| [Javascript][Node.js] Map 자료 구조 정의, 사용법, 문법 및 반복문 활용 (0) | 2022.03.04 |
| 바닐라 자바스크립트(Javascript) + 타임리프(Thymeleaf) 이용 AJAX 구현 예제 (1) | 2021.12.17 |
댓글