[TIL] AJAX

AJAX란

AJAX(Asynchronous Javscript And XML)는 XMLHttpRequest 기술을 사용하여 복잡하고 동적인 웹페이지를 구성하는 프로그래밍 방식이다.

AJAX는 전체 페이지가 다시 로드되지 않고 HTML 페이지 일부 DOM만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해준다. 또한 AJAX를 사용하면 웹페이지 일부가 리로드 되는 동안에도 코드가 계속 실행되어, 비동기식으로 작업할 수 있다.

XMLHttpRequest

XMLHttpRequest(XHR) 객체는 서버와 상호작용할 때 사용한다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지 일부를 업데이트 할 수 있다. 이름에 XML이 들어가지만, XML뿐만 아니라 모든 종류의 데이터를 가져올 수 있다.

AJAX Method

• GET: 데이터를 읽거나 검색할 때 주로 사용
• POST: 새로운 리소스를 생성할 때 주로 사용
• PUT: 리소스를 생성/업데이트할 때 주로 사용
• DELETE: 지정된 리소스를 삭제할 때 주로 사용

예제

VanilaJS

// Ajax 요청을 초기화합니다
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php');

// 요청의 상태 변화를 추적합니다
xhr.onreadystatechange = function(){
	if(xhr.readyState !== 4) return;
	// readyState 4: 완료

	if(xhr.status === 200) {
    // status 200: 성공
		console.log(xhr.responseText); // '반환된 텍스트'
	} else {
		console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
	}
}

jQuery

jQuery에서는 $.ajax를 사용하거나 요청 방식에 따라 $.get 또는 $.post를 사용한다.

$.get('send-ajax-data.php').done(function(data) {
    console.log(data); //  '반환된 텍스트'
}).fail(function(data) {
    console.log('에러: ' + data); // 요청 도중 에러 발생
});

예제 출처: 위키백과