Ajax란.

Asynchronous Javascript And XML의 약자
자바스크립트를 사용해 브라우저가 서버에서 데이터를 비동기적으로 요청하고, 서버가 응답한 데이터를 수신해 웹페이지를 동적으로 갱신하는 통신 방식.

• 장점 : 새로고침이 없어 웹페이지 전환이 부드럽다.

비동기적 : 갱신이 필요한 일부만 로드하여 갱신하는 방식

HTTP 요청

AJAX로 HTTP 요청을 보내기 위한 방법 (비동기적으로 정보를 요청해서 받아오는 법) 은 크게 세가지 방식이 있다.

1. XMLHttpRequest
2. fetch
3. jQuery Ajax (외부 라이브러리 방식)

XMLHttpRequest은 오래된 방식, 최근 가장 많이 사용하는 방식이 fetch다.

1. XMLHttpRequest

콜백 기반
Wep API인 XMLHttpRequest 객체는 HTTP 요청 전송, HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공한다.

길고 복잡하기 때문에 잘 사용하지 않는다.

let URL = "API URL";

let xhr = new XMLHttpRequest();
xhr.open("GET", URL, true); //옵션 :: 전송방식, 경로, 비동기사용여부
xhr.send();
xhr.onload = function(){
        
        if (httpRequest.readyState === XMLHttpRequest.DONE){	  			// 이상 없음, 응답 받았음
            console.log(xhr.responseText);
        } else {	  
        	// 아직 준비되지 않음
        }
}

2. fetch

프로미스 기반
ES6부터 생긴 Javascript 내장 API.
Web API인 Fetch API가 제공하는 fetch() 함수를 통해 네트워크 리소스를 비동기적으로 받아올 수 있다.

XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다.

• 장점
  (1) 자바스크립트 내장라이브러리이므로 사용을 위한 별도의 절차가 필요없음
  (2) Promise 기반으로 데이터를 다루기 편리
  (3) 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지 가능
• 단점
  (1) 네트워크 에러 발생시 response timeout이 없어 기다려야함
  (2) json으로 변환해주는 과정 필요
  (3) axios에 비해 상대적으로 기능 부족

2-2. fetch() 사용법

fetch를 사용할 때는 두단계를 거친다.

1. 올바른 url로 요청을 보낸다.
2. 응답에 대해 json으로 바꿔준다.

fetch() 함수는 2개의 인자를 받는다.
기본적으로 GET 방식으로 통신한다.

fetch(url, options)
	.then(response => response.json())
	.then((data) => console.log(data));
    .catch(error => console.log(error));

• url : 접근하고자 하는 url (필수)

• options : 매개변수 (선택)

• .then() : 요청이 성공하면 실행

• .catch() : 에러 처리, 요청이 실패하면 실행

일반적으로 에러 캐치할 때는 아래와 같은 방식으로 한다

fetch(url)
	.then((response) => {
    	if (!response.ok) {
        	throw new Error('500 Error')
        }
    })

[options]에서는 사용할 HTTP 메서드, headers, body 등을 정의한다.
생략이 가능하며 생략할 경우 GET 방식으로 통신되어 url로부터 콘텐츠가 다운로드된다.

대부분의 REST API들은 JSON 형태의 데이터를 응답하기때문에 응답(response) 객체는 json()메서드를 통해 JSON 포맷의 응답 전문을 자바스크립트 객체로 변환하여 얻을 수 있다.

ES7에 도입된 async/await를 활용해서 fetch API를 활용하면 코드 양을 줄일 수 있다고한다.

3. 외부 라이브러리 방식

3-1. jQuery Ajax

jQuery에서 제공하는 $.ajax() 함수를 사용하는 방식

var serverAddress = 'https://localhost:3000';

$.ajax({
    url: serverAddress,
    type: 'GET',
    success: function onData (data) {
        console.log(data);
    },
    error: function onError (error) {
        console.error(error);
    }
});

3-2. axios

axios는 Promise API를 활용하는 HTTP 통신 라이브러리다.
리액트나 뷰환경에서에서는 axios를 사용한다.

• 장점
  (1) reponse timeout 처리 방법이 존재 (fetch에는 없는 기능)
  (2) 브라우저 호환성이 우수
• 단점
  (1) 사용을 위해 별도의 설치 필요 (npm install axios)

axios({
  method: 'post',
  url: 'https://localhost:3000/user',
  data: {
    userName: 'Cocoon',
    userId: 'co1234'
  }
}).then((response) => console.log(response));

---