AJAX (Asynchronous JavaScript and XML) 란?
AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술이다.
전통적인 방식의 문제점
- 웹 페이지에서 데이터를 서버로 전송하면 새로운 페이지를 로드해야 했음.
- 이로 인해 화면이 깜빡이거나, 데이터 양이 많을 경우 웹 사이트가 느려지는 문제가 발생함.
AJAX의 장점
- 웹 페이지의 특정 부분만을 동적으로 업데이트하여 전체 페이지 리로드 없이 데이터를 갱신.
- 사용자 경험이 향상되며, 서버 부하 감소로 웹 애플리케이션의 성능 개선 가능.
기술적 세부 사항
- 원래 XMLHttpRequest 객체를 이용하여 서버와 비동기 통신.
- 최근에는 더 간편한 fetch API가 많이 사용됨.
Fetch API란 ?
웹 브라우저에서 제공하는 인터페이스로, 네트워크 요청을 쉽게 수행할 수 있게 해주는 기술이다. 전통적으로 웹에서 비동기적으로 서버와 데이터를 주고받을 때 주로 사용되던 기술은 XMLHttpRequest(XHR)였다. XHR은 웹 개발 초기부터 사용되었으며, AJAX(Asynchronous JavaScript and XML)의 핵심 구성 요소로서 많은 웹 애플리케이션에서 사용되었다. 그러나 XHR에는 복잡한 인터페이스, 불편한 오류 처리, 비표준화, Promise 미지원 등 한계점이 있어서 이를 대체 하기 위해 Fetch API 가 도입 되었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button onclick="fetchTodo1('2')">통신 요청</button>
<script>
// 네트워크 요청 처리 Fetch API 의 활용
// 소화시키는 방법 1
async function fetchTodo1(todoId) {
try {
// 인수 1 -> URL 넣기
// fetch 함수는 미래타입으로 응답 한다.
let promiseData = await fetch(
"https://jsonplaceholder.typicode.com/todos/" + todoId,
{
method: "GET",
headers: {
"Content-type": "application/json",
},
}
);
console.log('동기적 방식으로 요청 및 파싱 까지');
let todo = await promiseData.json();
console.log(todo);
} catch (error) {
// 요류 발생시 콘솔에 출력
console.log("error : " + error);
}
}
// 소화시키는 방법 2 = 비동기 처리 then() 과 catch 사용하기
function fetchTodo2(todoId) {
fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`, {
method: "GET",
headers: {
"Content-type": "application/json",
},
})
.then((proData) => {
console.log("수행 1");
return proData.text(); // 응답 본문(body)을 문자열 변환 처리
})
.then((bodyText) => {
console.log("수행 2");
const todo = JSON.parse(bodyText);
console.log("파싱된 객체 : ", todo);
console.log(" completed : ", todo.completed);
console.log(" id : ", todo.id);
console.log(" title : ", todo.title);
console.log(" userId : ", todo.userId);
})
.catch((error) => {
console.log(error);
});
}
// HTTP 1.1 <--- JSON - GET, POST () --> REST API // --> GET, POST, PUT, DELETE
function fetchPost1() {
fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
title: "서버에 자원 등록 요청",
body: "비동기 통신 POST 처리 방식 연습",
userId: 1,
}),
})
.then((proData) => {
console.log("수행 1");
return proData.text(); // 응답 본문(body)을 문자열 변환 처리
})
.then((bodyText) => {
console.log("수행 2");
const todo = JSON.parse(bodyText);
console.log("파싱된 객체 : ", todo);
console.log(" completed : ", todo.completed);
console.log(" id : ", todo.id);
console.log(" title : ", todo.title);
console.log(" userId : ", todo.userId);
})
.catch((error) => {
console.log(error);
});
}
// fetchPost1(); // 함수에 호출
testPatch(); // 함수 호출
function testPatch() {
fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PATCH",
body: JSON.stringify({
title: "foo",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));
}
</script>
</body>
</html>728x90
'JS' 카테고리의 다른 글
| JavaScript 게시판 만들기 - 실행환경 구축 ( VS CODE ) (0) | 2024.08.21 |
|---|---|
| JavaScript 게시판 만들기 - 로컬스토리지 ( localStorage ) 란? (0) | 2024.08.21 |
| JS 이벤트 처리 - 7 ( Promise ) (0) | 2024.08.02 |
| JS 이벤트 처리 - 6 ( 배너 변경하기 ) (0) | 2024.08.01 |
| JS 이벤트 처리 - 5 ( 이미지 토글 ) (0) | 2024.08.01 |
