AJAX 란 무엇인가?

기본 설명

asynchronous Javascript And XML 이라고도 하며
자바스크립트를 이용하여 서버와 브라우저가 비동기 방식으로 데이터를 주고 받을 수 있는 통신 기능이다.
또는 클라이언트와 서버간에 XML 데이터를 주고 받는 기술이다.

XML(Extensible Markup Language)
계층 구조로 데이터를 표현하는 마크업 언어입니다. 주로 문서를 저장하고 전송하기 위한 형식으로 사용됩니다.
HTML 구조랑 거의 비슷하다고 생각하면 됩니다.

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.

---

AJAX 분석

// 1. XMLHttpRequest객체 생성
var httpRequest = new XMLHttpRequest(); 

// 2. onreadystatechange 등록
httpRequest.onreadystatechange = function() {
	// XMLXttpRequest 객체의 현재 상태와 서버 상의 문서 존재 유무를 확인
    if (httpRequest.readyState == XMLHttpRequest.DONE && 
	    httpRequest.status == 200 ) {
	    	console.log(httpRequest.responseText); 
	    	// 서버에 요청하여 응답으로 받은 데이터를 문자열로 반환
	    }
	};

// 3. GET 방식으로 요청을 보내면서 데이터를 동시에 전달함
httpRequest.open("GET", "서버URL", true);
httpRequest.send();

onreadystatechange

onreadystatechange 로 서버로 부터 응답이 오게 되어
XMLHttpRequest 객체의 값이 변하게 되면 이를 감지해 자동으로 호출되는 함수를 설정한다

서버로 보낼 Ajax 요청의 형식을 설정

httpRequest.open(전달방식, URL주소, 동기여부) 메소드를 등록한다.

• 전달 방식은 요청을 전달할 방식으로 GET 방식과 POST 방식 중 하나를 선택할 수 있다.
• URL 주소는 요청을 처리할 서버의 파일 주소를 전달한다.
• 동기 여부는 요청을 동기식으로 전달할지 비동기식으로 전달할지를 전달한다. (true : 비동기 / false : 동기)

작성된 Ajax 요청을 서버로 전달

httpRequest.send() 메서드를 통해 서버로 객체를 전달한다.
이때 send() 메서드 매개변수를 쓰냐 안쓰냐에 따라 GET / POST 방식으로 다르게 보내게 된다.

• send() - GET 방식
• send(문자열) - POST 방식

개인적인 견해

요즘은 간단하게 서버에서 데이터를 전송받을때는 fetch , 좀 더 전문적으로 서버에 데이터를 받고싶다면
axios 를 사용하는 요즘 ajax 를 몰라도 된다고 생각하겠지만 개발자들은 어떤 편한 라이브러리를
사용하거나 할 때 작동원리나 그 기원에 대해서 이해할 필요가 있다고 생각합니다!!
그래서 ajax 의 기본적인 작동 원리를 이해하는게 좋다고 생각해요