Tiny Star

🖥️FrontEnd/🟡JavaScript

[JavaScript] ajax 파헤치기

청크 2024. 4. 16. 11:51

백엔드 개발자를 꿈꾸며 취뽀에 성공했지만 어쩌다보니 풀스택의 길을 걷고 있는 청크씨.

 

찍먹 js의 지식으로 현업에서 살아남기란 여간 쉬운게 아니다.

 

그 중 온 몸으로 js의 풍파를 가장 많이 겪은 ajax를 내가 이해하기 쉽게 파헤쳐놓으려고 한다.

(왜 다들 어려운 용어로 설명해놓는지 모르겠다. 한글로 써있는데 뭔말인지 몰라서 내가 보려고 만드는 것...)

 

언젠가 내가 10년차 개발팀장(?)이 되었을 때 나같은 꼬마 개발감자 후임이 온다면 내 블로그를 당당히 던져줄 수 있도록 

쉽게쉽게 가보자

- 2024년 4월 16일 취뽀 2개월차 개발감자 청크가 10년 뒤 개발팀장 청크에게-

Ajax

Asynchronous JavaScript and XML의 약자로 자바스크립트와 XML을 이용한 비동기적 통신방법이다.

프론트와 서버를 연결해주는 감초같은 놈

 

브라우저의 XMLHttpRequest를 이용하여 전체 페이지를 새로 가져오지 않고,

페이지의 일부만 변경할 수 있게 자바스크립트를 실행해 서버에 데이터만을 별도로 요청한다.

 

대충 얘가 어떻게 돌아가는가 정리해보면

1. 사용자가 브라우저를 통해 어떤 사이트에 접속하면 서버에서는 '템플릿'. 즉, html, css가 담긴 내용을 전달하면

2. 브라우저는 수신받은 템플릿 내에 있는 html, css를 해석하여 화면에 띄워 사용자가 볼 수 있게 되는 것이다.

3. 사용자가 브라우저 내 어떤 요청을 하게 되면 자바스크립트를 통해 서버의 데이터 요청방식, 수신받은 데이터를

어떤 로직으로 어떻게 가공할지를 기술하여 서버에 작업을 요청하면 (Request)

4. 서버는 작업을 완료하고 순수 데이터 응답으로 되돌려준다. (Response)

서버 작업 도중 예외가 발생 할 경우 에러창이 뜨는 것이다. (Exception)

5. 예외없이 정상적으로 데이터가 수신이 되었다면 브라우저는 수신한 데이터를 해석하여 템플릿의 적절한 위치에 삽입한다.

jQuery를 이용한 Ajax

jQuery없이도 xhr을 생성하거나 객체 인스턴스를 생성해서 서버와 통신이 가능하다곤 하는데

우리에겐 편리한 jQuery가 있으니, 이걸 사용해본다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery를 이용한 Ajax를 사용하기 위한 스크립트.

이걸 어딘가에 끼워넣어준다. <head>태그 안쪽이 되었든 <body>밖 스크립트 청크더미에 넣어두든 상관없다.

 

    function 함수명() {
        $.ajax({
            url : 'api/ / ' ,
            type : ' ',
            dataType : ' ' ,
            success: function (data, status, xhr) {
                실행내용
            },
            error : function (data, status, xhr) {
                실행내용
            },
            complete : function () {
                실행내용
            }
        )};
    }

대충 ajax의 모양은 이렇게 생겼다.

다양하게 커스텀 할 수도 있는데 값을 임의로 넣어놓으면 나같이 응용안되는 분들이 있을까 일단 값은 모조리 빼봤다.

Ajax의 설정값과 메서드

그래서 위에 비어있는 곳엔 대체 뭐가들어가냐면 설정값이 들어간다.

 

1. url

ajax를 요청할 매핑된 url을 입력해준다.

 

Java/SpringBoot 같은 경우는 Controller에서 사용하는 @PostMapping("/post")

또는 Python에서 url.py에 지정된 urlpatterns 중 api와 통신하는 api url이 여기 들어간다.

 

나같은 경우 Python으로 작업중이라 예시를 들어보면 urlpatterns의 board와 통신하는 글쓰기 기능을 구현했고

urlpatterns 내에 글쓰기 기능이 있는 api와 통신하는 url을 적어주었다.

$.ajax({
   url : '/api/post',

 

2. type

HTTP통신을 할 때 메서드 종류를 선택한다.

HTTP 메서드는 GET, POST, PATCH, PUT, DELETE 등의 값이 있는데,

 

GET : 데이터를 읽거나 검색 시 사용

POST : 데이터를 쓸 때 즉, 새로운 리소스 생성에 사용

PATCH/PUT : 데이터 수정에 사용하는데 두가지 차이점은 HTTP메서드를 다루면서 따로 다루겠다.

DELETE : 데이터 삭제에 사용되는 메서드이다.

 

이 역시 Java/SpringBoot 같은 경우는 Controller에서 사용하는 @PostMapping 등의 어노테이션에 붙은 메서드가

type에 들어갈거고, Python에서는 View.py파일에 작성해놓은 메서드가 type에 들어갈 것이다.

 

따로 타입을 명시해줘도 되지만, 파이썬의 경우 def + 메서드명으로 사용해도 해당 메서드로 동작하기 때문에

코드를 좀 더 효율적으로 짤 수 있는 것 같다.

 

$.ajax({
	url : '/api/post',
	type : 'POST',

 

3. dataType

ajax를 통해 리턴받을 데이터의 타입을 설정한다.

생략이 가능한데, 생략한 경우 똑똑하게도 jQuery가 MIME타입 등으로 자동으로 결정해준다.

 

MIME타입은 아래 URL에서 더 자세히 다뤄주길래 넣어놔본다!

 

MIME 타입 (IANA 미디어 타입) - HTTP | MDN

미디어 타입 (Multipurpose Internet Mail Extensions 또는 MIME type로도 알려져 있음)이란 문서, 파일 또는 바이트 집합의 성격과 형식을 나타냅니다. MIME 타입은 IETF의 RFC 6838에 정의 및 표준화되어 있습니다

developer.mozilla.org

 

들어갈 수 있는 값에는 xml, html, json, script, jsonp, text 등 다양한 데이터 타입이 존재하는데,

보통의 경우는 JSON을 많이 사용하기 때문에 나도 JSON만 파본다.

$.ajax({
url : '/api/post',
	type : 'POST',
	dataType: 'json',

 

4. contentType

서버로 데이터를 보낼때에 어떤타입으로 보낼것인지를 지정해준다.

기본값은 application/json; charset-utf-8 이며, 기본값을 가장 많이 사용하기 때문에 이대로 작성해주면 된다.

$.ajax({
url : '/api/post',
	type : 'POST',
	dataType: 'json',
   	contentType : 'application/json',

뒤에 charset 이후부터는 생략이 가능하니 참고해두면 좋다.

 

5. data

또 뭔놈의 데이터냐면.. URL 파라미터를 통해 보낼 데이터를 지정해주어야 한다.

예를들어 Value의 값이 JSON타입이 아니라면 JSON.stringify()메서드를 통해서

자바스크립트의 값이나 객체를 JSON 문자열로 변환하여 전송할 수 있다.

$.ajax({
url : '/api/post',
	type : 'POST',
	dataType: 'json',
   	contentType : 'application/json',
	data : JSON.stringify(Data),

 

6. headers

헤더에 포함하여 서버로 보낼 값을 지정한다.보통 토큰(인증/인가)을 넣어 권한의 여부를 판단할 때 localStorage또는 Cookies에 들어있던 토큰값을 헤더에 넣어준다.

$.ajax({
url : '/api/post',
	type : 'POST',
	dataType: 'json',
   	contentType : 'application/json',
	data : JSON.stringify(Data),
	headers: {Authorization: localStorage.getItem('Authorization')},

 

7. timeout

이건 선택사항이라서 어렵지 않은데,ajax가 호출된 시점부터 시간을 재어 만약 일정 시간이 흘러 요청이 초과된다면 error 상태로 전환시킨다.

 

8. success

ajax의 통신이 성공했을 때 실행되는 콜백함수로, 통신 성공 후에 로직을 작성하면 된다.

$.ajax({
url : '/api/post',
	type : 'POST',
	dataType: 'json',
   	contentType : 'application/json',
	data : JSON.stringify(Data),
	headers: {Authorization: localStorage.getItem('Authorization')},
    success : function(response) {
    	alert("게시글 작성 성공");
        },

 

9. error

request에 실패했을 때 실행되는 콜백함수로, 예외는 모두 서버로직에서 잡고,

사용자가 볼 수 있는 오류인 alert창이나, 개발자가 예외를 파악할 수 있는 log를 넣어준다.

$.ajax({
url : '/api/post',
	type : 'POST',
	dataType: 'json',
   	contentType : 'application/json',
	data : JSON.stringify(Data),
	headers: {Authorization: localStorage.getItem('Authorization')},
    success : function(response) {
    	alert("게시글 작성 성공");
        },
    error : function(xhr, status, error) {
    	alert("게시글 작성 실패");
        },

 

10. complete

success 또는 error가 호출된 이후 호출되는 콜백함수로 나는 따로 사용해주지 않았다.

 

 

 

ajax의 기본은 이렇다고 정리해두고 싶었다.

물론 별건아니어도 현업에서 사용되는 코드라 이 블로그에 100% 똑같이 옮겨적진 않았지만,

이렇게 적다보니 어떻게 굴러가는지 나도 +1 더 이해하게 된 것 같다.

저작자표시 비영리 변경금지

'🖥️FrontEnd > 🟡JavaScript' 카테고리의 다른 글

[JavaScript] 함수의 선언 및 호출  (0) 2023.05.13
[JavaScript] 반복문  (0) 2023.05.13
[JavaScript] 조건문  (0) 2023.05.12
[JavaScript] 연산자  (0) 2023.05.12
[JavaScript] 자료형 이해하기  (0) 2023.05.12

'🖥️FrontEnd/🟡JavaScript'의 다른글

  • 현재글[JavaScript] ajax 파헤치기

관련글

티스토리툴바