AJAX란
웹 페이지에서 서버와 데이터를 주고받는 방법을 말한다.
가장 큰 핵심은 웹 페이지 전체를 새로고침 없이 페이지의 일부분만을 새롭게 업데이트할 수 있다는 점이다.
AJAX를 사용하면 웹 페이지가 보이는 부분을 유지한 채, 배경에서 서버와 통신할 수 있는데, 이렇게 하면 서버에서 받아온 데이터를 페이지의 특정 영역에만 즉시 반영할 수 있어서 웹사이트 사용이 훨씬 원활하고 효율적이다.
AJAX 개념
- 비동기 통신:
- 서버에 요청을 보내고 응답을 기다리는 동안 웹 페이지가 멈추지 않고 계속 작동하는 걸 의미하는데 페이지가 새로고침 없이도 데이터가 업데이트될 수 있다.
- JavaScript와 AJAX:
- AJAX는 주로 JavaScript를 사용해서 구현한다. JavaScript는 웹 페이지에서 동적인 기능을 추가하는 데 사용되는 프로그래밍 언어이다.
- 서버와의 대화:
- 웹 페이지에서 AJAX를 사용하면, 서버에 데이터를 요청하고 결과를 받아와서 페이지의 일부분만 업데이트할 수 있다. (웹 페이지의 특정 부분만 업데이트 하는 것과 같다.)
AJAX의 구성
XMLHttpRequest
- 웹페이지와 서버 사이의 통로와 같으며 요청을 만들고, 서버에 보내고, 응답 받는 역할한다.
fetch API
- 위에 XMLHttpRequest에 비해 비동기 처리 방식이 더 직관적이고 유연해서 코드의 가독성과 유지보수성이 향상된다
JSON
- 데이터의 형식인데 사람이 읽기 쉽고 JavaScript에서 쉽게 다룰 수 있어서, 서버와 클라이언트 간의 데이터 교환에 많이 사용된다.
CORS
- 웹 페이지에서 다른 서버로 요청을 보낼 때 보안의 이유로 허가를 받아야 한다. 설정에 따라 차단, 허용 가능
AJAX 활용)
간단하게 웹 페이지가 서버와 비동기적으로 통신할 수 있는 방식, 요청 설정
// AJAX 요청
$.ajax({
url: '/ajax/getInfo',
type: 'GET',
dataType: 'json',
timeout: 5000,
beforeSend: function() {
console.log('요청을 보내기 전에 실행됩니다.');
},
success: function(response) {
console.log('서버에게 받은 데이터:', response);
},
error: function(request, status, error) {
console.log('문제 발생했습니다:', status, error);
},
complete: function() {
console.log('요청 완료되었습니다.');
}
});
$.ajax({
url: '/ajax/getInfo',
type: 'GET',
dataType: 'json',
timeout: 5000,
beforeSend: function() 이 부분은 /ajax/getInfo 주소로 JSON 형식의 데이터를 GET 방식으로 요청하고, 5초(밀리초 기준) 내에 응답이 없으면 요청을 중단한다. 요청 전에는 콘솔에 메시지를 출력한다.
{
console.log('요청을 보내기 전에 실행됩니다.');
},
success: function(response) {
console.log('서버에게 받은 데이터:', response);
},
error: function(request, status, error) {
console.log('문제 발생했습니다:', status, error);
},
complete: function() {
console.log('요청 완료되었습니다.');
}
});코드는 AJAX 요청의 전, 성공, 오류, 완료 상태를 각각 콘솔에 알려준다
https://sw-sh-65e76.web.app/
배포용 웹 사이트
SW 개발자 홈페이지
sw-sh-65e76.web.app
* member.html이 선으로만 이루어져 보기가 힘들고 복잡해서 레이아웃 어느정도 수정 후 주말과제 진행예정*
