> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/dom/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/dom/ajas/ajax-1/ajax.md). # AJAX란? ## AJAX AJAX는 **A**synchronous **J**avascript **A**nd **X**ML라는 의미이다. 직역하자면 "JavaScript와 XML 사이에서 서버를 통신, 응답하는 비동기 프로그래밍이다." JavaScript와 XML 또는 JSON을 사용하는 비동기 통신 방법으로 [웹 애플리케이션](https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98)(Web Application)을 제작하는 것을 말한다. 간단히 말하면 ***서버측 Scripts*****와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다.** {% hint style="info" %} **서버측 Scripts란?** 서버 컴퓨터에서 실행되는 스크립트를 말한다. ASP , PHP , JSP 등이 있다. {% endhint %} {% hint style="info" %} AJAX는 특정한 기술이 아니며 기술들 간에 비동기로 작동하는 것을 부르는 **용어**이다. {% endhint %} ## AJAX의 특징 * 서버측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식 등)의 정보를 주고 받을 수 있다. * 중요한 것은 **페이지 전체를 새로고침 하지 않고서도 수행 되는 비동기성이다.** 이러한 비동기성을 통해 사용자의 인터랙션에 따라 전체 페이지가 아닌 일부분 만을 업데이트 할 수 있게 해준다.\ (필요한 부분만 별로도 서버와 요청/응답 받아 처리한다.) ## AJAX의 장점 * 브라우저의 성능, 속도를 증진시키기 때문에 사용자의 **시간을 절약**할 수 있다. * 페이지 전체를 새로고침 하지 않고 일부만 업데이트 되기 때문에 **변경된 UI에 집중**할 수 있다. * 필요한 데이터만 받아와서 처리하기 때문에 **불필요한 대역폭 감소가 가능**하고, 이는 **비용 절감**에도 도움을 준다. {% hint style="info" %} [**대역폭이란?**](https://m.blog.naver.com/PostView.nhn?blogId=ki630808\&logNo=221927880095\&categoryNo=18\&proxyReferer=https:%2F%2Fwww.google.com%2F) 컴퓨터 네트워크나 인터넷 연결을 통해 한 지점에서 다른 지점으로 최대 데이터 양을 전송하는 유선 또는 무선 네트워크 통신 링크의 용량이다. {% endhint %} ![클라이언트와 서버의 대역폭](https://1258214208-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQG_6grsIF7SikoY7zP%2F-MQvXV1Hl92rH42cazyo%2F-MQvZB4CjkpwIiRNmhF3%2Fimage.png?alt=media\&token=0eaf11e1-296b-4a32-a2ab-ea2252bda16b) ## AJAX의 효과 수백개의 페이지를 가지고 있는 사이트를 만든다하고 생각해보자. 만약 수정사항이 발생했을 때 하드코딩으로 수정을 한다면? 벌써 부터 머리가 아파 오기 시작한다. AJAX는 위와같은 상황에서 유용하게 사용될 수 있다. 동적으로 필요한 부분을 서버에서 가져와서 변경하면 된다. 그렇게 되면 싱글 페이지 애플리케이션을 구현할 수 있다. {% hint style="info" %} #### 싱글 페이지 애플리케이션 [싱글 페이지 애플리케이션](https://ko.wikipedia.org/wiki/%EC%8B%B1%EA%B8%80_%ED%8E%98%EC%9D%B4%EC%A7%80_%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98)(single-page application)또는 줄여서 SPA라고 부르기도 한다. 하나의 페이지로 여러 정보들을 표현할 수 있는 애플리케이션을 말한다. {% endhint %} ## **AJAX 용어의 탄생** [Jesse James Garrett](https://en.wikipedia.org/wiki/Jesse_James_Garrett)이라는 사람이 처음 비동기 프로그램에 Ajax라는 용어를 붙여 사용하기 시작했다.