<자바스크립트> Ajax

Ajax를 이해하고 생각난 짤(…)

- Ajax(Asynchronous Javascript)란?
Ajax란, 자바스크립트 기반 라이브러리인 제이쿼리(JQuery)를 바탕으로 한 기능이다. 제이쿼리는 자바스크립트에서 동적 기능을 보다 편리하게 개발할 수 있도록 돕는 역할을 하는데, 형태는 CSS선택자를 이용하여 다음과 같이 표현한다.

//모든 태그 요소 선택 $("*") //적용하려는 id 선택 $("#id") //적용하려는 class 선택 $(".class")

따라서 Ajax도 위의 형태를 따른다. Ajax를 구체적으로 풀어 설명하자면, '비동기 자바스크립트 + XML'의 의미인데, 클라이언트와 서버 간에 데이터를 XML(혹은 JSON)으로 주고 받는 기술이다.


- '비동기'의 의미
그럼 Ajax에서 비동기란? 비동기를 이해하려면 동기와 비교하여 알아야 한다. 동기는 직렬의 형태로, 한 번에 하나씩의 task만 처리가 가능하며, 따라서 순차적으로 작업이 진행된다. 비동기는 이와 반대로, 병렬의 형태로서 순서를 지킬 필요가 없고 A task를 하는 와중에 B task를 시작하는 등의 작업이 가능하다. 한 마디로 시간순서에 구애받지 않고 작업을 처리할 수 있는 것이다. Ajax가 바로 이러한 비동기적 방식 기술이다.

가장 대표적 예로 많이 사용되는 것은 웹사이트에서 회원가입을 할 때에 아이디 중복확인을 하는 것이다. 중복확인을 위해 창을 띄우고, 이 창에서만 먼저 아이디 중복확인 작업이 이루어지는데 그 순간 원래 화면의 회원가입 절차는 잠시 중단이 되어있는 채로 아이디 중복확인을 중간에 끼어들어서(?) 먼저 처리하게 되는 것이다.


- Ajax 설정
제이쿼리에서 Ajax를 사용하기 위해서는 다음과 같은 속성 설정이 필요하다.

$.ajax({ type:"get", //get 방식으로 전송 async:false, //false인 경우 동기식으로, true인 경우 비동기식으로 처리 url:"url 주소", //요청할 url 주소 설정 data:{param:"Hello, jquery"}, //서버로 전송할 데이터 success:{ }, //정상 요청이며 응답이 성공했을 경우 처리됨 error:{ }, //오류 발생 시 처리됨 complete:{ } //작업이 완료된 후 처리됨 })

여기서 async 속성의 경우 false로 설정하면 동기식이 되는데, 동기식으로 설정하는 이유는 ajax로 설정한 작업이 처리되는 동안 다른 작업은 잠시 홀딩하도록 해두기 위함이다. 즉, async:false이면 코드 실행이 중단되고 다른 코드들은 이 ajax내의 코드가 실행되고 마칠 때까지 기다리게 된다. 반대로 async:true이면, 코드 실행은 계속되고 다른 코드들도 동시에 함께 진행되는 등 ajax를 기다리지 않게 된다.





참고 : 도서 <자바 웹을 다루는 기술>, 웹사이트 - 스택 오버 플로우, PoiemaWeb