AJAX
AJAX (Asynchronous JavaScript and XML)
AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받기 위한 기술이다.
전통적인 방식의 문제점
- 웹 페이지에서 데이터를 서버로 전송하면 새로운 페이지를 로드해야 했다.
- 이로 인해 화면이 깜빡이거나, 데이터 양이 많을 경우 웹 사이트가 느려지는 문제가 발생
AJAX의 장점
- 웹 페이지의 특정 부분만을 동적으로 업데이트하여 전체 페이지 리로드 없이 데이터 갱신 가능
- 사용자 경험이 향상되며, 서버 부하 감소로 웹 애플리케이션의 성능 개선 가능
기술적 세부 사항
- 원래 XMLHttpRequest 객체를 이용하여 서버와 비동기 통신
- 최근에는 더 간편한 fetch API가 많이 사용됨
Fatch 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="fetchTodo2(2)"> 통신요청 </button>
<script>
//네트워트 요청 처리 Fetch API 의 활용
// 소화시키는 방법 - 1
async function fetchTodo(todoId){
try{
// 인수 1 -> URL 넣기
// fetch 함수는 미래 타입으로 응답함
let promiseData = await fetch("http://jsonplaceholder.typicode.com/todos/" + todoId);
console.log(promiseData);
// JSON 형식의 문자열을 변수에 저장
let todo = await promiseData.json();
console.log("todo : " + todo);
} catch(error) {
// 오류 발생 시 콘솔에 출력
console.log("error : " + error);
}
}
// 소화시키는 방법 - 2 : 비동기 처리 then()과 catch()사용하기
function fetchTodo2(todoId) {
fetch(`http://jsonplaceholder.typicode.com/todos/${todoId}`)
.then(proData => {
console.log("then 수행1");
console.log("proData : " + proData);
console.log("proData.json() : " + proData.json());
return proData.json();
})
.then( todo => {
//
console.log("then 수행2");
console.log(todo);
})
.catch(error => {
console.log(error);
});
}
</script>
</body>
</html>'JS' 카테고리의 다른 글
| 실행환경 구축 (VS CODE) (0) | 2024.08.21 |
|---|---|
| 로컬스토리지(localStorage) (0) | 2024.08.21 |
| JS 이벤트 처리 - Promise (0) | 2024.08.02 |
| JS 이벤트 처리 - 배너변경하기 (0) | 2024.08.02 |
| JS 이벤트 처리 - 이미지 토글 (0) | 2024.08.02 |