[JavaScript] Ajax Fetch: 웹 애플리케이션 데이터 비동기 통신

 

 

 

 Ajax와 Fetch 

 

개발을 하면 데이터는 API로 통신하여 데이터를 가져오고 스크립트로 화면에 데이터를 뿌려줍니다.

그 API로 통신할 때는 jQuery를 쓴 Ajax이든 Fetch를 이용하여 비동기로 통신합니다.

이 글을 작성한 이유는 jQuery를 이용한 Ajax 사용과 Fetch 사용법을 익히기 위해 작성하게 되었습니다.

 

 

 

 

Ajax와 Fetch의 장, 단점

 

특징 목록	Ajax	Fetch
특징	ES6 이전부터 사용되었던 비동기적 데이터 교환 기능을 제공한다.	ES6에 도입된 JavaScript 내장 API로 비동기적으로 데이터를 교환하는 기능을 제공한다.
장점	1. 비동기 통신 : 웹 페이지에서 서버와 데이터를 교환할 때 페이지의 새로고침 없이 비동기적으로 데이터를 가져올 수 있다. 2. 빠른 응답시간 : Ajax를 사용하면 필요한 부분만 업데이트하여 사용자에게 더 빠른 응답시간을 제공할 수 있다.	1. 간편한 사용 : Fetch API는 간결하고 직관적인 인터페이스를 제공하여 데이터를 가져오기 위해 쉽게 사용할 수 있다. 2. Promise 기반 : Fetch는 Promise 기반의 비동기 처리를 지원하므로 비동기 코드를 더 쉽게 작성할 수 있다. 3. Cross-Origin 요청 : Fetch API는 Cross-Origin 요청에 대한 제어를 보다 세밀하게 할 수 있어 보안 측면에서 유연성을 제공한다.
단점	1. 브라우저 호환성 : 모든 브라우저에서 Ajax를 지원하지 않을 수 있으며, 호환성 문제를 해결해야 할 수 있다. 2. 보안 문제 : Ajax 요청은 동일 출처 정책(Same-Origin Policy)에 의해 제한되어 다른 도메인으로의 요청이 보안상 문제가 될 수 있다. 3. SEO 문제 : 초기 페이지 로딩 시 데이터가 비어있는 경우, 검색 엔진이 페이지를 적절하게 색인하지 못할 수 있다.	1. 에러 처리 : Fetch는 HTTP 상태 코드가 400 이상인 경우에만 에러로 간주한다. 2. 오래된 브라우저 지원 X : Fetch API는 IE에서 버전 11이하에서 지원하지 않으며, 오래된 브라우저에서는 다른 방법을 사용해야 할 수 있다. 3. 요청/응답 취소 불가능 : Fetch API는 요청이나 응답을 취소하는 기능을 제공하지 않아 요청을 중단하거나 취소하기 어려울 수 있다.

 

 

 

 

jQuery 공식 문서

 

순수 자바스크립트(XMLHttpRequest)로 ajax로 통신하는 거는 너무 복잡하고 코드가 더러워지는 것을 느꼈습니다.

그래서 문법을 편하게 작성하는 jQuery를 이용해서 ajax 통신하는 법을 알려주겠습니다.

공식문에서 jquery 버전을 확인하시고 사용하시면 좋습니다.

공식 문서 : https://jquery.com

jQuery

 

jquery를 이용한 ajax 관련 메서드들입니다.  이렇게 공식 문서에서 확인하는 것이 좋습니다.

또한 jquery ajax 공식 : https://api.jquery.com/jQuery.ajax

jQuery.ajax() | jQuery API Documentation

 

그냥 아래를 HTML head영역에 라이브러리를 가져오는 스크립트 문입니다. 최신 버전을 가져오면 참 좋겠죠?

구글 jQuery 버전 : https://developers.google.com/speed/libraries?hl=ko#jquery

 

 

 

 

 

jQuery를 이용한 Ajax 기본 구조

 

jQuery는 3.0 버전 이후에 옵션에 success, error, complete 을 사용하는 대신 콜백 함수로 done, fail, always를 사용합니다.

$.ajax({ 
    옵션명 : 옵션값, 
    옵션명 : 옵션값, 
    옵션명 : 옵션값, 
        .... 
})
.done( (data) => {			// done : ajax 통신 성공 했을 때 
                  			// data : 네트워크 통신하여 가져온 데이터 
})
.fail( (xhr, status, error) => {	// fail : ajax 통신 실패 했을 때 

}) 
.always ( (xhr, status) => {		// always : ajax 통신 성공,실패 했을 때 무조건 실행하는 함수 

})

 

 

 

 

jQuery를 이용한 Ajax 옵션들

 

속성	설명	값
url	(필수) 요청할 Url	`myUrl`  또는 'myUrl'
method | type	HTTP 메소드 요청 방식 , jquery 1.9.0이하 버전 사용할 때 type	(기본값) 'GET' 또는 'POST' 등
data	요청(Request) 시 전달할 데이터	{ key : value} , '문자열' 등
contentType	요청(Request)시 데이터 인코딩 방식을 정의 1. application/x-www-form-urlencoded; charset=UTF-8 : Default 값 2. application/json : JSON 형식의 데이터를 서버에 전송할 때 사용 3. multipart/form-data : 파일 업로드와 같이 데이터를 한번에 서버로 전송할 때 사용	(기본값) 'application/x-www-form-urlencoded; charset=UTF-8' 'application/json' 'multipart/form-data'
async	비동기의 여부를 설정	(기본값) true  또는 false
dataType	서버에서 응답(Response)으로 오는 데이터의 데이터 형식을 설정 값이 없다면 알아서 판단	xml, json, script, html, text
cache	요청(Request) 및 응답(Response)을 캐시할지 여부를 설정	(기본값) true 또는 false
beforeSend	ajax 요청(Request)하기 전에 실행되는 콜백 함수	function(xhr) {  ...  }
timeout	서버 요청 시 응답(Response) 제한 시간을 설정(ms)	5000 (= 5초) 또는 3000 (= 3초)
processData	서버에 보내는 값에 대해 맞게 변환하는 설정 여부 처리되지않고 그 자체의 값을 보낼라면 false를 해주면 된다.	(기본값) true 또는 false
statusCode	응답(Response)에 해당 코드가 있을 때 호출할 함수	{ 4xx :() => {} , 5xx : () => {} }
jsonp	다른 도메인으로부터 데이터를 가져오기 위해 사용되는 방법 서버에서 요청을 처리할 때 콜백 함수 이름을 지정 Ajax 요청의 대상을 신뢰할 수 없으면 보안상의 이유로 false가 좋다.	(기본값) false 또는 '문자열' (ture가 되며 문자열은 콜백함수 이름)
traditional	서버가 요구하는 파라미터 직렬화 방식과 클라이언트가 사용하는 직렬화 방식이 다를 때 사용 { names: ['John', 'Jane'] }라는 데이터를 traditional: true로 설정하면 names[0]=John&names[1]=Jane가 된다.	(기본값) false 또는 true

 

 

 

 

 

옵션 사용해 본 예시 Ajax

 

지금 이것은 쓸데 없이 옵션을 다 작성해 본 것이며 각자 필요한 옵션만 사용하시면 됩니다!!

const params = {
    id: 918,
    name: 'Aox',
    email: 'Aox@coasis.com',
};


$.ajax({
    url: `통신하고 싶은 Url`,
    method: 'GET',		// HTTP 메소드, Default GET
    data: JSON.stringify(params),
    dataType: 'json',
    // 서버에게 보내는 데이터 타입, Default
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    async: true,		// 비동기 통신 여부, Default true
    cache: false,		// 캐시 여부, Default false
    timeout: 1000,		// 응답 대기 인정 시간 (ms)
    beforeSend: function(xhr) {		// 비동기 통신 전 함수 실행
        console.log('비동기 통신 보내기전에 보내기');
    },
    statusCode: {		// 서버에서 응답해온 HTTP 상태 코드
        200: function(data) {
            console.log('서버 응답의 상태 코드가 200인 경우:', data);
        },
        404: function() {
            console.log('서버 응답의 상태 코드가 404인 경우');
        },
        500: function(xhr, status, error) {
            console.log('서버 응답의 상태 코드가 500인 경우');
            console.log('Error: ' + error);
            console.log('Status: ' + status);
            console.dir(xhr);
        }
    },
    jsonp: 'callback', 			// jsonp 옵션을 "callback"으로 설정 (잘 안씀)
    traditional: true, 			// Default false (잘 안씀)
})
.done(function(data) {		// 통신 성공 했을 경우 done 콜백 함수 실행
    console.log('요청 성공 - done 콜백:', data);
})
.fail(function(xhr, status, error) {		                                                               // 통신 실패 했을 경우 fail 콜백 함수 실행
    console.log('요청 실패 - fail 콜백');
    console.log('Error: ' + error);
    console.log('Status: ' + status);
    console.dir(xhr);
})
.always(function(xhr, status) {			                                                                // 항상 실행되는 함수
    console.log('요청 완료 - always 콜백');
});

 

 

jQuery를 이용한 ajax를 잘 이해가 되셨나여?

jQuery를 이용한 ajax는 불편의 법칙으로 같이 쓰입니다 ㅎㅎㅎㅎ,,,

개발 공부를 시작하면 jQuery는 하양세다, 이제 안 쓴다 말은 많아도 아직 많은 기업과 프로젝트에서 사용하고 있는 현역입니다 ㅎㅎ,

비동기 통신을 ajax가 마음이 안 든다면 아래에 Fetch도 있으니 ES6인 Fetch API를 공부해 볼게요 한번 봐주세요~~

 

 

 

 

 

 

Fetch 기본 구조

 

ajax에서 주었던 옵션처럼 Fetch도 옵션을 줄 수 있습니다!

let promise = fetch(url, [options]);

 

 

 

 

Fetch 옵션들

 

속성	설명	값
method	HTTP 메소드 요청 방식	(기본값) 'GET' 또는 'POST' 등
headers	요청(Request)헤더를 설정 1. application/x-www-form-urlencoded : Default 값 2. application/json : JSON 형식의 데이터를 서버에 전송할 때 사용 3. multipart/form-data : 파일 업로드와 같이 데이터를 한번에 서버로 전송할 때 사용	(기본값) 'application/x-www-form-urlencoded' 'application/json' 'multipart/form-data'
mode	CORS 요청을 허용하는 설정	(기본값) cors 또는 no-cors, same-origin
cache	요청에 캐시를 사용할지 여부 설정	(기본값) default 또는 no-cache, reload, force-cache 등
body	POST로 보낼 경우 데이터를 Request Body에 넣을 때	JSON.stringify(data)

 

 

그래로 jQuery.ajax 보다는 옵션이 많이 없네요! 

Fetch API의 큰 특징으로는 Front, Back 에서 모두 사용할 수 있는 비동기 통신이라는 거예요

ajax든 Fetch든 상황에 따라서 프로젝트 따라서 사용하면 좋겠습니다. ㅎㅎㅎㅎㅎ

 

 

 

 

Fetch API 사용해 본 예시

 

async function postData() {		// async 함수 구현
    const url = '통신하고 싶은 Url';
    const params = {
        id: 918,
        name: 'Aox',
        email: 'Aox@coasis.com',
    };

    const options = {		// 옵션 설정
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(params),
    };

    try {
        const response = await fetch(url, options);		// Fetch 통신 
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();		// 데이터 json으로 변환
    
        console.log('요청 성공 - 서버 응답:', data);
    
    } catch (error) {
        console.log('요청 실패 - 에러:', error);
    } finally {
        console.log('요청 완료 - 항상 실행되는 부분');
    }
}

postData();		// ajax 통신 함수 호출

 

 

 

 

감사합니다.