15.ajax 통신

Ajax (Asynchronous JavaScript and XML)

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다. 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 갱신이 발생한다. 이것은 브라우저와 서버와의 통신에 의한 것이다.

쉽게 말해 새로고침 없이 서버로부터 데이터를 주고 받는 기술이다. 

XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고 받을 수 있다.

JSON (JavaScript Object Notation)

JSON(JavaScript Object Notation)은 클라이언트와 서버 간 데이터 교환을 위한 규칙 즉 데이터 포맷을 말한다. JSON은 일반 텍스트 포맷보다 효과적인 데이터 구조화가 가능하며 XML 포맷보다 가볍고 사용하기 간편하며 가독성도 좋다. 자바스크립트의 객체 리터럴과 매우 흡사하다. 하지만 JSON은 순수한 텍스트로 구성된 규칙이 있는 데이터 구조이다.

{
  "name": "Lee",
  "gender": "male",
  "age": 20,
  "alive": true
}

XMLHttpRequest

XMLHttpRequest 객체를 이용해 Ajax 요청을 생성하고 전송한다. 서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.

// XMLHttpRequest 객체의 생성
var xhr = new XMLHttpRequest();
// 비동기 방식으로 Request를 오픈한다
xhr.open('GET', '/users');
// Request를 전송한다
xhr.send();

XMLHttpRequest의 메서드

: open, send, setRequestHeader가 있다. 

Reference

https://www.edwith.org/boostcourse-web/lecture/16701/

https://poiemaweb.com/js-ajax