<목차>
1. AJAX
2. AJAX 동작방식
3. 비동기 요청의 try catch
1. AJAX (Asynchronous JavaScript and XML)란?
AJAX(에이잭스)는 Asynchronous JavaScript and XML의 약자로, 웹 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있도록 해주는 기술입니다. AJAX를 사용하면 웹 애플리케이션이 더 빠르고 반응성이 좋아지며, 동적인 콘텐츠를 쉽게 구현할 수 있습니다.
1. 비동기적으로 동작하며 페이지를 세로고침 하지안고도데이터를 서버와 교환하거나 일부 콘텐츠만 업데이트 할 수 있습니다.
2. JSON , XML , HTML 등 일반 텍스트 등 다양한 데이터 형식을 지원합니다
3. XMLHttpRequest 객체를 사용하여 서버 요청 처리
4. 기존 웹 페이지와 서버 간의 불필요한 통신을 줄여 성능 향상
2. AJAX 동작방식
- **클라이언트(브라우저)**에서 XMLHttpRequest 객체를 생성합니다.
- 서버에 비동기 요청을 보냅니다.
- 서버가 요청을 처리한 후 데이터를 반환합니다.
- JavaScript가 서버 응답을 받아서 웹 페이지 일부를 업데이트합니다.
const xhr = new XMLHttpRequest();
form.addEventListener("submit", (e) => {
e.preventDefault();
if(!user_id.value) return alert("아이디 입력해주세요!");
if(!user_pw.value) return alert("비밀번호 입력해주세요!");
xhr.open('post', '/user/login');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(`user_id=${user_id.value}&user_pw=${user_pw.value}`);
xhr.onload = () => {
const { success, redirect } = JSON.parse(xhr.responseText);
if(success) window.location.href = redirect;
}
})
3. 비동기 요청의 try catch
비동기 요청은 네트워크 문제, 서버 오류 등의 이유로 실패할 수 있습니다. 이를 안전하게 처리하기 위해 try-catch를 사용합니다.
try-catch가 필요한 이유
1.네트워크 오류 감지: 서버가 응답하지 않거나 인터넷이 끊어졌을 때 오류를 안전하게 처리할 수 있습니다.
2.HTTP 응답 코드 확인: fetch는 HTTP 오류(404, 500 등)도 정상 응답으로 간주하기 때문에
response.ok로 검사해야 합니다.
3. 예외 발생 시 코드 중단 방지: 오류 발생 시 프로그램이 강제 종료되지 않고,
사용자에게 적절한 피드백을 제공할 수 있습니다.
try -catch 를 사용한 예제
async function loginUser(userId, userPw) {
try {
const response = await fetch('/user/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ user_id: userId, user_pw: userPw })
});
if (!response.ok) throw new Error(`HTTP 오류! 상태 코드: ${response.status}`);
const data = await response.json();
if (data.success) window.location.href = data.redirect;
else alert("로그인 실패");
} catch (error) {
console.error("AJAX 요청 실패:", error);
alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
}
}