AJAX

AJAX?

Asynchronous Javascript And XML.

비동기식 자바스크립트 통신을 의미하고, 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서
전체 페이지를 새로고침 하지 않고, 페이지의 일부분만을 로드하는 기법이다.
Ajax는 JSON, XML, HTML, 텍스트 파일 등 다양한 형태의 데이터를 비동기식으로 주고 받을 수 있다.

비동기적 자바스크립트를 동작하는 기술들을 통틀어서 AJAX라고 부른다!!! (햇갈림 주의)
이전에는 XMLHttpRequest API를 이용해서 구현했지만, 불편함을 느꼈던 사용자들이 JQuery로 시작해서 Fetch API(ES6), Axios API(Vuejs) 등을 통해 비동기적 통신을 구현하고 있다.

AJAX를 사용 가능하게 만드는 것들

AJAX 기술은 여러가지 기술이 혼합적으로 사용되어 이루어진다.

• HTML
• DOM
• Javascript
• XMLHttpRequest
• Etc

AJAX로 할 수 있는 것, 사용하는 이유

AJAX 네트워크 기술을 이용하여 클라이언트 - 서버로 데이터를 요청하고, 응답을 받을 수 있다.

AJAX는 HTML 페이지 전체가 아닌, 일부분만 갱신할 수 있도록 XMLHttpRequest 객체를 통해 서버에 request(요청)한다. 이 경우, JSON이나 XML 형태로 필요한 데이터만 받아 갱신하기 때문에, 그만큼의 자원과 시간을 아낄 수 있다.

AJAX 장, 단점

장점

• 웹페이지의 속도 향상
• 서버의 처리가 완료될 때까지 기다리지 않고, 처리가 가능하다.
• 서버에서 Data만 정송하면 되므로 전체적인 코딩의 양이 줄어든다.

단점

• 히스토리 관리가 되지 않는다.
• 페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
• script로 작성되므로 디버깅이 용이하지 않다.

AJAX 진행과정

1. XMLHttpRequest Object를 만든다.
   • request를 보낼 준비를 브라우저에게 시키는 과정
   • 이것을 위해서 필요한 method를 갖춘 object가 필요함
2. callback 함수를 만든다.
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
3. Open a request
   • 서버에서 response가 왔을 때 실행시키는 함수
   • HTML 페이지를 업데이트 함
4. send the request

예제

// 클라이언트-사이드 스크립트

// 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); // 요청 도중 에러 발생
	}
}

Reference

참고
참고