Ajax

(Asynchronous JavaScript and XML)
: JavaScript와 XML을 이용한 비동기적 정보 교환 기법

→ 백그라운드에서 서버와 통신하여, 웹 페이지의 일부분만 업데이트하는 개발 기법

→ 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하고, 페이지 새로고침 없이 작업을 수행하는 것

jQuery : Ajax 프레임워크

 

구성 요소

구성 요소	역할
HTML, CSS	웹 페이지의 표현
DOM	데이터에 접근하거나 화면 구성을 동적으로 조작
JSON이나 XML	데이터의 교환
XMLHttpRequest 객체	웹 서버와의 비동기식 통신
JS	위 기술들을 결합하여 작업 흐름 제어

 

---

데이터의 교환

XML과 JSON

: 구조화된 데이터를 교환하기 위한 텍스트 기반 형식

XML
: EXtensible Markup Language 확장된 마크업 언어
JSON
: JavaScript Object Notation 자바스크립트 객체 표기법

 

XML과 JSON의 공통점

• 데이터를 저장하고 전달할 목적으로 고안됨
• 텍스트 기반이므로 사람과 기계가 모두 읽기 수월
• 계층적인 데이터 구조를 가짐
• XMLHttpRequest 객체를 이용하여 서버로부터 데이터를 전송받음

 

XML과 JSON의 차이점

파일 형식	특징
XML	태그를 사용자가 직접 정의
-	종료 태그 사용
-	새로운 태그를 추가해도 계속 동작하므로, 확장성이 좋음
-	XML DOM을 이용하여 엑세스
-	태그 정보가 담겨있는 스키마 문서를 함께 사용하여 유효성 검증에 특화
JSON	XML의 대안으로, 간결하고 민첩
-	배열, 객체 사용
-	문자열을 전송받은 후에 해당 문자열을 바로 파싱
-	파싱된 JSON은 다른 JavaScript 객체와 같은 방법으로 액세스
-	데이터 무결성을 사용자가 직접 검증

 

 

---

Ajax 통신

XMLHttpRequest

: 웹 브라우저가 백그라운드에서 서버와 데이터를 교환할 때 사용하는 객체

// 인스턴스 생성
let xhttp = new XMLHttpRequest();

// 객체의 현재 상태와 서버상의 문서 존재 유무 확인
xhttp.onreadystatechange = function() {
  if(this.readyState == 4 && this.status == 200) {
    // 요청이 정상적으로 처리된 경우
  }
}

// 서버로 보낼 요청의 형식 설정
// open(전달방식, URL, 비동기여부)
xhttp.open("GET", "./xml/data.xml", true);

// 작성된 요청을 서버로 전달
xhttp.send();       // GET 방식

status property

• 200 : 서버에 문서가 존재함
• 404 : 서버에 문서가 존재하지 않음

readyState property

1. UNSENT (0) : XMLHttpRequest 객체가 생성됨
2. OPENED (1) : open 메소드가 성공적으로 실행됨
3. HEADERS_RECEIVED (2) : 모든 요청에 대한 응답이 도착함
4. LOADING (3) : 요청한 데이터를 처리 중임
5. DONE (4) : 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨

onreadystatechange property

: 객체의 readyState 값이 변할 때마다 자동으로 호출되는 이벤트 핸들러
→ 서버에서 응답이 도착할 때까지 readyState 값의 변화에 따라 총 5번 호출

일반적으로 XMLHttpRequest를 직접적으로 사용하는 경우는 별로 없다. 환경에 따라 변수가 있어 사용하기 어렵기 때문이다.
통상적으로는 axios 혹은 jQuery ajax와 같은 HttpRequest 라이브러리를 사용하거나, XMLHttpRequest의 발전된 형태인 Fetch API를 사용하는 것을 권장한다.