자바스크립트 ajax 설명 및 예제보기

자바스크립트가 비동기방식의 ajax가 없었다면 꽃을 피웠다 얘기할 수 있었을까요? 재미있게 시작했지만 분명 자바스크립트에게 ajax, 비동기 방식의 호출은 가장 큰 발전의 계기가 되었음이 틀림없습니다... 아래는 이 중요한 ajax에 대하여 하나하나 알아보려합니다. 먼저, ajax가 무엇인지 알아보고 자바스크립트를 사용해 이를 구현하는 다양한 방법들에 대하여도 함께 알아보도록 하겠습니다.

! ajax란 무엇인가?

ajax는 비동기식 자바스크립트 통신을 의미합니다. 즉 서버와의 웹통신 방법을 비동기식으로 웹페이지를 리로드하지 않고 필요한 순간에 접속하여 데이터를 가져오는 방법입니다. 비동기 방식을 구현하기위해서는 자바스크립트의 XMLHttpRequest 라는 API가 존재하는데 이는 비동기 방식을 구현해주는 가장 중요한 객체로 자바스크립트를 사용한 가장 기본적인 방법이라 할 수 있습니다. 하지만 이를 사용하는 방법보다는 최근에는 제이쿼리를 사용하는 방법이 매우 간단하고 쉽기 때문에 이 방법을 우선 알아보겠습니다. (최근에는 많은 웹사이트에서 프론트엔드 프레임워크를 사용하여 비동기 통신을 구현합니다.)

! ajax() 제이쿼리 메소드 알아보기

제이쿼리는 비동기 방식을 지원하기 위해 몇가지 메소드를 제공하며 대표적으로 ajax() 메소드가 존재합니다. jquery의 ajax() 메소드는 손쉽게 비동기 방식의 구현을 도와주며 그 방법 역시 매우 간단합니다. 먼저 문법입니다.

$.ajax(설정 옵션)

ajax() 메소드는 다음의 옵션값을 인자로 전달할 수 있습니다. 아래는 설정가능한 옵션값의 내용으로 기본적인 url 주소는 물론 ajax 방식, 콜백함수 등등의 설정이 가능한데 아래 설정 가능한 옵션을 먼저 보시기 바랍니다.

i. url - 접근할 url 주소
ii. type - 전송 방식으로 get 또는 post 등등
iii. dataType - 파싱할 파일 형태를 설정 (json, xml, html)
iv. success - 성공시 호출할 함수
v. error - 실패시 호출할 함수
vi. complete - 성공하거나 실패하는 경우의 호출할 함수
vii. jsonCallback - json 방식의 콜백함수 호출
viii. async - 동기 또는 비동기 방식
ix. contentType - 콘텐츠 타입 설정
x. cache - 캐쉬에 저장할 것인지를 설정
xi. timeout - 지연시간의 기준 시간을 설정(밀리세컨 단위)


위에 내용을 보면 조금 복잡해보입니다. 하지만 반드시 필요한 것은 그리 많이 않으며 아래의 간단한 예제를 먼저 확인하시기 바랍니다.

# 제이쿼리 ajax() 예제 코드 보기

아래는 ajax() 를 활용하여 실제 구현가능한 코드를 만들어 보고자 합니다. 아래의 코드는 특정 url 위치에 있는 json() 파일을 불러와 이를 파싱하여 적용하는 일련의 과정들의 예제코드입니다.
가장 일반적인 모습의 코드입니다.

아래는 jsonp 방식으로 전송하는 경우 dataType을 설정한 경우입니다.

@ myAjax.js

참고로 비동기 방식을 사용하기 이전에 OOP(Origin Oriented Policy)에 대하여 유념할 필요가 있는데요... 브라우저는 기본적으로 OOP 정책에 따라 크로스도메인 즉, 다른 도메인에 접속해 정보를 가져가는 행위에 대하여 제약 사항을 갖게됩니다. 물론 이를 우회하기 위한 방법이 존재하지만 일단 OOP를 꼭 유념해야합니다.

! ajax 비동기 통신의 제이쿼리 약식 메소드 알아보기

위에 사용된 ajax() 메소드는 다양한 약식 메소드를 가지고 있어 더 쉽게 사용할 수 있습니다. 아래의 메소드들이 바로 약식(축약) 메소드이며 보통 HTTP 메소드를 선택하여 더 쉽게 사용할 수 있기 때문에 경우에 따라서는 필요한 약식 메소드를 사용하는 것이 더 편리한 방법입니다.

가끔씩 위 축약 메소드와 ajax()를 비교하는데 이는 상황에 맞게 동작하는 메소드의 차이일뿐 기능 구현은 동일하니 참고하세요.

# 기타 정보 알아보기

! 비동기(async)방식이란?

비동기 방식에 대하여 간단하게 얘기하자면 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식으로 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드 등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되죠... 이런 경우 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 통신의 Payload, 트래픽이 작아 성능이 빠르고 그래서 더 빨리 방문자에게 원하는 콘텐츠를 보여줄 수 있다는 매우 큰 장점을 가지게 됩니다.