AJAX란?
AJAX(Asynchronous JavaScript and XML)는 JavaScript를 사용하여 비동기적으로 서버와 통신하고, DOM을 업데이트하는 기술입니다. AJAX를 사용하면 페이지 전체를 새로 고치지 않고도 필요한 데이터만 서버로부터 가져와서 웹 페이지의 일부를 업데이트할 수 있습니다.
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.
동기와 비동기의 차이
| 기준 | 동기(Synchronous) | 비동기(Asynchronous) |
|---|---|---|
| 흐름 처리 | 요청을 하면 응답을 받을 때까지 다음 작업을 기다림 | 요청을 하고 바로 다음 작업으로 넘어감, 응답은 나중에 처리 |
| 사용 예 | 전통적인 웹 페이지 요청 | AJAX 요청 |
| 장점 | 구현이 간단하고, 작업 흐름이 명확함 | 페이지 새로고침 없이 특정 부분만 업데이트 가능, 사용자 경험 향상 |
| 단점 | 요청마다 페이지 전체를 새로고침, 사용자 경험 저하 | 복잡한 프로그래밍, 에러 핸들링 및 디버깅이 어려울 수 있음 |
AJAX의 장단점
장점
- 페이지 새로고침 없이 데이터를 불러와서 업데이트 가능
- 백그라운드에서 서버와 통신
- JSON, XML, HTML, 텍스트 파일 등 다양한 형식의 데이터 처리 가능
단점
- 보안 문제
- 브라우저 호환성 문제
- 검색 엔진 최적화(SEO) 문제
사용하는 방법
AJAX 요청을 만들기 위해서는 JavaScript의 XMLHttpRequest 객체를 사용하거나, jQuery의 $.ajax() 함수를 사용할 수 있습니다.
jQuery를 이용한 AJAX 예시
$.ajax({
url: "example.php", // 요청을 보낼 서버의 URL
type: "POST", // 데이터 전송 방식
data: {name: "John", location: "Boston"}, // 서버로 보낼 데이터
success: function(response) {
// 요청이 성공하면 실행되는 콜백 함수
$("#someElement").html(response); // 요청으로 받은 데이터로 무언가를 업데이트
},
error: function(xhr, status, error) {
// 요청이 실패하면 실행되는 콜백 함수
console.error("AJAX 요청에 실패했습니다: " + status + ", " + error);
}
});왜 사용하는가?
기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하면서 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우 페이지의 일부분만 갱신할 경우에도 페이지 전체를 다시 로드해야하는데 엄청난 자원낭비와 시간낭비를 한다. 하지만 ajax는 html 페이지 전체가아닌 일부분만 갱신할수 있도록 XML HttpRequest객체를 통해 서버에 request를 한다. 이 경우 Json이나 xml형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다. 요새 웹페이지에서 가장 중요한것은 속도가 아닐까싶다. 이 이유하나만으로도 Ajax를 사용해야 하는 이유로써 충분하지 않을까 싶다..
