[JavaScript] Chapter 14. Ajax - XMLHttpRequest, Fetch, JSON

XMLHttpRequest

• Ajax의 핵심
• 서버와 데이터를 주고 받을 때, 사용
• W3C 표준으로 정의 (주요 웹 브라우저에 내장)

*IE5, IE6 => ActiveXObject 이용

 

XMLHttpRequest 사용 방법

• IE7 이상, 크롬, 파이어폭스, 사파리, 오페라
  • var 변수명 = new XMLHttpRequest();
• IE5, IE6
  • var 변수명 = new ActiveXObject("Microsoft.XMLHTTP");

var httpRequest;
if (window.XMLHttpRequest) {  // 모질라, 사파리, IE7 + ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) {  // IE6 이하
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

 

---

 

Fetch 란

• Promise 기반으로 구성
• 비동기 방식
• JS 기본 기능

Fetch API는 HTTP에 대한 자세한 정보를 제공하며 JavaScript에서 접근하고 있다.

Fetch는 비동기 처리 방식 중 하나인데, XMLHttpRequest로 이용해서 비동기로 처리하는 방식은 복잡하다. 그래서 Fech를 사용해서 더 좋은 기능을 쉽게 사용할 수 있다.

const data = { username : 'example' };
 
fech('https://example.com/profile', {
     method : 'POST',  // 또는 'PUT'
     headers : {
         'Content-Type' : 'application/json',
     },
     body : JSON.stringify(data),
 })
  .then((response) => response.json())
  .then((data) => {
      console.log('성공:', data);
 }
);

 

Fetch 사용 방법

fetch(url, option)
     .then((res) => res.text())
     .then(text => console.log(text));

// url : 요청할 url
// option
// - http 메서드, headers, body 정의
// - 생략 가능
// - default Get 방식

// ex)
fetch('http://example.com/movies.json')
     .then((response) => response.json())
     .then((data) => console.log(data));

 

비동기 처리 방식 3가지

1.  jQuery 라이브러리 Ajax를 이용
2.  XMLHttpRequest
3.  JavaScript가 고유적으로 가지고 있는 비동기 처리 방식인 Fetch 이용

비동기 처리 중 가장 강력한 특징

• 서버에 통신할 때, 전체 페이지를 로딩시키는 것이 아니라 일부 페이지만 로드를 해서 렌더링하는 형식

 

---

 

JSON

• JavaScript Object Notation
• 자바스크립트 객체 문법 (객체 리터럴)
• 구조화된 데이터 표현을 위한 표준 형식
• 데이터 전송 시, 사용
• 문자열 형태, 따옴표 표시

 

JSON 형식

• 다양한 데이터 형식 가능

{
    "name" : "홍길원",
    "age" : 30,
    "gender" : "남",
    "school" : null,
    "family" : {"father" : "홍투길", "mom" : "김연삼"}
}

JSON 내장 객체

1.  JSON.parse()
   • JSON 객체 -> 자바스크립트 객체
2.  JSON.stringify()
   • 자바스크립트 객체 -> JSON 객체