# Ajax란 무엇인가?

- Author: @smithsolution
- Published: 2023-08-01
- Updated: 2024-01-14
- Source: http://blex.me/@smithsolution/ajax%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
- Tags: 테크톡

---

## Ajax란 무엇인가?
Ajax는
> Asynchronous
Javascript
And
XML

의 약자로서, "서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술"을 의미하는데,
이 얘기를 처음 들어보셨다면, 너무 추상적일거라 예상이 됩니다.

## ajax를 이해하기 위한 사전지식 - 서버
그래서! 비유를 통해 설명드리기에 앞서 다음과 같은 사전지식들을 알고 있어야 합니다.

"바로 서버입니다!"
![](https://static.blex.me/images/content/2023/8/1/20238118_oLoVRQ0KNyCPdLoySCdt.png)
서버는 비유하자면, 은행창구와 같습니다.

![](https://static.blex.me/images/content/2023/8/1/20238118_E9LHajgYW968kXnqRZK1.png)
<br>
우리가 창구에 가서 내 돈 찾아달라고 하면, 내 계좌에 있는 돈을 주겠죠?
이때 이걸 클라이언트에서 서버에게 데이터를 달라고 요청하면,
서버에서 그에 맞게 데이터를 주는 것으로 응답하는 것과 같다고 볼 수 있습니다.
예를 들어 보도록 하겠습니다.

## 서버의 예시
![](https://static.blex.me/images/content/2023/8/1/20238118_YKI1vcRco744ibnfrQqT.png)

자! 그러면 네이버 웹툰 서버는 뭘까요?
클라이언트가 웹툰 달라고  요청하면 서버는 웹툰을 주는 역할(응답)을 하죠.

![](https://static.blex.me/images/content/2023/8/1/20238118_a2AIXsOcWu1g2jeUmvcD.png)

그러면! 인스타 서버는요?
클라이언트가 "내 인스타 사진 보여주세요"라고 요청을 보내오면, 서버가 그에 맞게 인스타사진을 던져주는 역할(응답)을 하죠.

![](https://static.blex.me/images/content/2023/8/1/20238118_ikeSExE2PaN8N7VCYKLL.png)

그러면! 토스서버는요?
클라이언트가 나의 게좌정보를 달라고 요청하면 서버는 유저의 계좌정보를 주는 역할(응답)을 하죠.

![](https://static.blex.me/images/content/2023/8/1/20238119_nHRovln3u4hbsHEcBvkB.png)

유튜브 서버도 마찬가지겠죠? 영상 달라고 요청하면 영상을 서버에서 던져주게 됩니다.(응답)

## 서버한테 싸가지없이 달라고 하면 안줍니다
자! 그런데 여기서부터가 문제입니다! 클라이언트가 그냥 싸가지 없이 달라고 하면 서버는 무시하고 안줍니다. 

![](https://static.blex.me/images/content/2023/8/1/20238119_8U6U98rOx5TUtKEL1VWc.png)

서버도 하나의 프로그램이기 떄문에, 정해진 양식에 맞춰 보내진 요청에만 응답하도록 규칙이 되어 있습니다. 

![](https://static.blex.me/images/content/2023/8/1/20238119_0IrGuJXCsWVYK4f5VDZO.png)

그래서 정확한 양식에 맞춰서 달라고 요청서를 보내야 합니다.
## 요청서 작성하는 법(feat. 서버한테 싸가지 있게 요청하는 법)
그 요청서가 뭐냐면요!
바로 아래 양식에 맞춰 요청서를 짜면 됩니다.
위에서 말한 첫번째 조건에는 대표적으로 "www.naver.com" 이 있을 겁니다. 그러면! get요청을 보내는 방법에는 무엇이 있을까요?
![](https://static.blex.me/images/content/2023/8/1/20238119_RdjKipPmLhl9lYDkNRqn.png)
![](https://static.blex.me/images/content/2023/8/1/20238119_mbcNnCSSvvFMgIRPbb7p.png)

단점: 전부 브라우저가 새로고침됨(사용자가 보기에 시각적으로 별로다) 

첫번째 방법은 일일이 입력해야 해서 귀찮고, 두번째 방법은 요청보낼따마다 브라우저에 내용을 처음부터 다시 그리는 문제가 발생하니까 싫다고 하면 3번째 방법을 쓰여야 합니다. 
->그게 바로 Ajax로 get요청을 보내는 겁니다.

## 그래서 Ajax가 쉽게 말해서 뭔냐면요?!
Ajax는 쉽게 말해서 "새로고침 없이 서버에게 get요청하는 쪼그만한 js코드"라고 보시면 됩니다.
그럼 뭐가 좋을까요?(what is advantage?)
장점: 새로고침이 없으니까 웹페이지 전환이 부드러워집니다.

네이버 같은 경우에도 2006년 이전 버전의 [옛날페이지](https://web.archive.org/web/20040926050258/http://www.naver.com/)에서는 이벤트가 발생할때마다 항상 화면이 새롭게 그려지는 문제가 있었으나, [그 이후](https://www.naver.com/)로는 ajax비동기 통신으로 화면전환이 부드럽게 되어지게 되었습니다.

## 실제 API서버에서 데이터 받아오기
아래 링크를 실제 API서버의 링크입니다.

https://codingapple1.github.io/price.json
 
 안에 들어가면 { "price": 5000 }이 있습니다.
 이를 받아오는 방법은 위와 같이 3가지일 겁니다.
 1> 브라우저 url입력칸에 입력하기
 2> 버튼으로 GET요청하기
 3>ajax로 GET요청 보내기
 여기서는 3번쨰 방법에 대해서만 다뤄보도록 하겠습니다.
* 옛날방식
![](https://static.blex.me/images/content/2023/8/1/20238119_EMZd2ZuE4ucLA3Sg5ECs.png)

* 요즘 방식
![](https://static.blex.me/images/content/2023/8/1/20238119_i3g4EJQJl8IKfo2lznYP.png)

* 외부 라이브러리를 쓰는 방식(JQuery 라이브러리)
![](https://static.blex.me/images/content/2023/8/1/20238119_s0KP3EZJWGRumamF4Uzl.png)

※리액트나 Vue같은 프론트엔드 프레임워크에서는 axios라는 키워드를 사용하여 ajax를 구현하기도 합니다.)

## 실무에서 AJAX를 쓰다보면 겪게되는 문제점
실무에서 ajax를 쓰다보면 항상 브라우저의 CORS정책 때문에 데이터유입이 막히게 되는 것을 자주 볼 수 있습니다.

![](https://static.blex.me/images/content/2023/8/1/20238119_mwMPqNciX9X68NkwNcZU.png)

이 부분에 대해서 자세히 알아보고 싶으시면 아래 링크를 참고해주시면 감사하겠습니다.
[CORS는 왜 이렇게 우리를 힘들게 하는 걸까?](https://evan-moon.github.io/2020/05/21/about-cors/)


출처: https://www.youtube.com/watch?v=nKD1atl6cAw&t=292s
참고:
https://www.youtube.com/watch?v=avfIUwDG2d8
https://www.youtube.com/watch?v=U_ICTI-1DBc&t=7s