🐰 Ajax
Ajax(Asynchronous JavaScript and XML) 는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다.
전통적 웹페이지의 방식은 완전한 HTML 문서를 전송받아, 처음부터 전체를 렌더링 하는 방식(화면 전환시 처음 부터 전체를 다시 렌더링해야 했다)
이와 같은 방식은 다음과 같은 단점 발생 시킴
• 변경할 필요가 없는 부분까지 처음부터 다시 전송받아 불필요한 데이터 통신 발생
• 화면 전환으로 인한 깜빡이는 현상
• 통신 방식은 동기적으로 동작하여 응답이 있을 때까지 다음 처리는 블로킹됨
Ajax를 통해 웹페이지 변경에 필요한 데이터만 비동기 방식으로 전송받아 부분 렌더링이 가능해짐
🐰 JSON
JSON(JavaScript Object Notation) 은 HTTP 통신을 위한 텍스트 데이터 포맷 (JS이외에도 사용 가능)
JSON의 형태는 객체 리터럴과 유사한 구조를 가진 순수 텍스트이며 JSON의 키와 문자열은 반드시 큰따옴표(작은따옴표 X)로 묶어야 한다.
const obj = {
name: "Jaina",
class: "Mage",
skills: ["fireball", "blizzard"],
};- JSON.stringify 메서드는 객체를 JSON 포맷의 문자열로 변환
클라이언트가 서버로 객체를 전송하려면 객체를 문자열화(직렬화, serializing)해야한다. - JSON.parse 메서드는 JSON 포맷의 문자열을 객체로 변환한다.
서버로부터 전송받은 JSON 데이터는 문자열이므로, 이를 객체로 사용하려면 JSON 포맷의 문자열을 객체화(역직렬화, deserializing)해야 한다.
🐰 XMLHttpRequest
브라우저는 기본적으로 주소창, HTML form, a 태그등을 통해 HTTP 요청 전송 기능을 제공한다. JavaScript를 사용해 HTTP 요청을 전송하는 방법으로는 XMLHttpReqeust 객체가 존재한다.
XMLHttpRequest 객체는 XMLHttpRequest 생성자 함수를 호출하여 생성하며, Web API이므로 브라우저 환경에서만 동작한다.
