Ajax란 무엇일까? (+ 비동기 프로그래밍에 대해)

[작성자의 다른 글 보러가기: 'jQuery란 무엇일까?']

AJAX란 무엇일까?

코딩에서 많이 쓰이고 흔히듣는 AJAX란 무엇일까? AJAX의 기본개념과 기능, 장단점 등을 살펴보며

AJAX에 대해 알아보도록 하자.

* 목차

- AJAX의 기본개념

- 비동기 프로그래밍이란?

- AJAX를 사용가능하게 만드는것들

- AJAX의 기능

- AJAX의 장단점

- AJAX의 진행과정

- AJAX 코드 예시

# AJAX의 기본개념

AJAX (Asynchronuous Javascript And XML)란, JavaScript의 라이브러리 중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.

즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

# 비동기프로그래밍이란?

먼저 Javascript는 단일 스레드에서 동작(한번에 한가지 일만 할 수 있다)라는 전제를 이해해야 한다. '그럼 안좋은거 아니야?"라고 생각할 수 있지만 싱글스레드는 멀티스레드가 겪어야 하는 골치아픈 문제들을 신경쓰지 않아도 된다는 장점이 있다.

싱글스레드만으로 멀티스레드 부럽지 않은 부드러운 소프트웨어를 만들기 위해서는 대가를 치뤄야 한다. 그 대가가 바로

비동기적(Asynchronous) 프로그래밍이다.

하나의 요청 처리가 완료되기 전에 제어권을 다음 요청으로 넘겨 Blocking 되지 않으며, 다음 요청을 처리하는 방식이다.

# 방식

- 콜백방식

자바 스크립트에서 함수는 일급 객체이므로 파라미터로 넘길 수 있다.

*일급객체란?

변수나 데이터에 할당 가능
객체의 인자로 넘길 수 있음
리턴값으로 사용 가능

실행 결과를 보면 비동기로 수행되는것을 알 수 있음
위의 전달된 콜백 함수는 디렉토리를 모두 읽은 후 호출됨으로써 비동기 프로그래밍이 가능해짐.

- Promise 방식

복잡한 처리에서는 위의 콜백방식을 사용할 경우 콜백 헬 발생
비동기 작업을 콜백에 비해 쉽게 컨트롤 가능, 비교적 가독성이 좋음
오류 처리를 가시적으로 대응할 수 있음

- Generator 방식

- async/await 방식

async, await는 ES8(ECMAScript2017)의 공식 스펙
promise, generator보다 더욱 절차적(동기적)인 프로그래밍 방식으로 개발가능

# AJAX를 사용가능하게 만드는 것들

AJAX라는 기술은 여러가지 기술이 혼합적으로 사용되어 이루어진다. 대표적인 예로는 아래와 같은 것들이 있습니다.

HTML
DOM
JavaScript
XMLHttpRequest
ETC

# AJAX의 기능

AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다.

간단하게 말하면 서버와 클라이언트(나)와의 통신이다.

*클라이언트란?

서버에서 정보를 가져와서 사용자에게 보여줄 수 있고 사용자와 상호작용할 수 있는 소프트웨어를 일컫는다.

EX) 웹 브라우저, 핸드폰 어플리케이션 등..

*서버란?

네트워크 상에서 접근할 수 있는 프로그램으로서 어떤 자료들에 대한 관리나 접근을 제어해주는 프로그램을 말한다. 서버는 일반적으로 사용자가 직접적으로 사용하지 않는다.

# AJAX를 사용하는 이유

단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있다.

기본적으로 HTTP 프로토콜은 클라이언트쪽에서 Request를 보내고 서버쪽에서 Response를 받으면, 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하고 response를 하며 페이지 전체를 갱신하게 된다. 하지만 이렇게 할 경우, 엄청난 자원낭비와 시간낭비를 초래하고 말 것이다.

AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

# AJAX의 장단점

장점

웹페이지의 속도향상
서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
기존 웹에서는 불가능했던 다양한 UI를 실현가능하게 해준다.(Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드없이 수정할 수 있다.)

단점

히스토리 관리가 되지 않는다.
페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
HTTP 클라이언트의 기능이 한정되어 있다.
지원하는 Charset이 한정되어 있다.
Script로 작성되므로 디버깅이 용이하지 않다.
동일 출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다 (Cross-Domain 문제)

# AJAX의 진행과정

XMLHttpRequest Object를 만든다.
- request를 보낼 준비를 브라우저에게 시키는 과정
- 이것을 위해서 필요한 method를 갖춘 object가 필요함
callback 함수를 만든다.
- 서버에서 response가 왔을 때 실행시키는 함수
- HTML 페이지를 업데이트 함
Open a request
- 서버에서 response가 왔을 때 실행시키는 함수
- HTML 페이지를 업데이트 함
send the request

# AJAX의 구조 및 예제

기본 구조

$.ajax({
    url: "",
    type: "",
    cache: ,
    dataType: "",
    data: "",
    success: function(data){
  
    },
    error: function (request, status, error){        

    }
});

url : 요청 url을 의미한다.
type : 데이터 전송방식. GET 또는 POST
cache : 요청 페이지의 캐시 여부. false 또는 true
datatype : 서버에서 받아올 데이터를 어떤 형태로 해석할 것인지. xml, json, html, script를 선택할 수 있다.
data : 서버로 데이터를 전송할 때 사용한다. "name="+name 이런 형태로
success : Ajax 통신에 성공했을 때 실행되는 이벤트.
error : Ajax 통신에 실패했을 때 실행되는 이벤트. request, status, error로 에러 정보를 확인할 수 있다.

사용 예제

'#기본개념' 카테고리의 다른 글

REST란? REST API란? RESTful이란? (0)	2022.12.29
추상클래스와 인터페이스의 차이가 무엇일까?(추상메소드란 뭘까?) (1)	2022.12.28
jQuery란 무엇일까? (2)	2022.12.22
Web Server와 Was의 차이는 (Feat. 정적 페이지와 동적 페이지) (0)	2022.12.21
#객체지향 프로그래밍이란? (0)	2022.12.20

David`s story

Ajax란 무엇일까? (+ 비동기 프로그래밍에 대해)