[240615] 43장 Ajax

Ajax란?

• 자바 스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
• 브라우저에서 제공하는 Web API 인 XMLHttpRequest 객체를 기반으로 동작

💡 Fetch API 는 XMLHttpRequest 의 현대적인 대안, Promise 기반의 API 제공
Axios 는 HTTP 요청을 위한 외부 라이브러리

JSON

• 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷
• 키와 값으로 구성

1. JSON.stringify

• 직렬화
• 객체 → JSON 포맷의 문자열로 변환
• 문자열로 변환하면서 들여쓰기 : JSON.stringify(obj, null, 2);

2. JSON.parse

• 역직렬화
• JSON 포맷의 문자열을 객체로 변환

XMLHttpRequest

• Web API

HTTP 요청 전송

const xhr = new XMLHttpRequest();

// HTTP 요청 초기화
xhr.open("POST", "/users");

// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정 : json
xhr.setRequestHeader("content-type", "application/json");

// HTTP 요청 전송
xhr.send(JSON.stringify({ id: 1, content: "HTML", completed: false }));

HTTP 응답 처리

const xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonTest');

xhr.sned();

// 이벤트 핸들러 프로퍼티에 콜백함수 정의
// readyState 프로퍼티가 변경될 때마다 발생
// load 이벤트는 요청이 성공적으로 완료됐을 때 발생
xhr.onreadystatechange = () = {
	if(xhr.readyState !== XMLHttpRequest.DONE) return;

	if(xhr.status === 200) {
		console.log(JSON.parse(xhr.response));
	} else {
		console.error('Error', xhr.status, xhr.statusText);
		}

}