Javascript - jQuery ajax

 Ajax란 Asynchronous Javscript And XML의 앞 글자를 따서 만든 용어로 해석하자면 비동기적인 자바스크립트와 XML이라고 할 수 있겠습니다. Ajax가 등장하기 전까지 Web에서 서버를 보내 처리를 하고자하면 무조건 Get이든 Post든 데이터를 넘겨서 서버에서 처리 후 다음 화면에서 결과를 보여주는 방식으로 처리해야 했습니다. 그 이유는 Web이 애초에 전자문서를 목적으로 했기 때문이라고 합니다. 그러다가 Ajax가 나오게 되고 대중화되면서 한 페이지 내에서 비동기 방식을 통해 다음 페이지로 이동하지 않고도 결과물을 보여주어 더 효율적인 코드 작성 및 화면 사용, 파일 수 줄이기 등이 가능하게 되었습니다. 이전에 Ajax를 쓰던 방식도 보긴 했는데 지금 jQuery가 나오고 대중화된 시점에서 그것까지 알 필요는 없기에 일단 넘어가고 이번에는 jQuery에서 Ajax 사용법 및 셋팅에 대해 알려드리도록 하겠습니다.

$.ajax({
  method: "GET",
  url: "url.action",
  async : true,
  data : {
    data : 'data',
    data1 : 'data1',
  },
  dataType: "json",
  success : function(response, textStatus, jqXHR) {
  },
  error : function(jqXHR, textStatus, errorThrown) {
  }  
});

 

 위와 같은 형태가 제일 기본적인 형태라고 할 수 있겠습니다. 아래 있는 Option들에 대해 하나씩 설명해 드리도록 하겠습니다.

1. method
 - 요청을 위해 사용되는 HTTP Method를 선택할 수 있습니다. Method에는 'post', 'get', 'put' 등이 있습니다.
2. url
 - 요청이 보내질 URL을 작성하는 곳입니다.
3. async
 - Asynchronous의 약자로 비동기로 할 것인지 동기로 할 것인지 선택할 수 있습니다. 비동기가 기본 옵션으로 적지 않을 경우 true로 자동설정되고 false로 할 경우 동기화 방식이 됩니다. 어떤 결과값이 무조건 나온 후에 다음 행위가 이루어져야 한다면 false로 두시면 됩니다.
4. data
 - 서버에 보낼 데이터들입니다. 자동으로 GET방식으로(데이터=데이터값&데이터2=데이터2값...) 데이터를 서버에 보냅니다.
5. dataType
 - 서버에서 다시 받아올 데이터의 타입을 정할 수 있습니다. 가장 흔히 쓰이는 방식은 json입니다. json으로 받아야 javascript object로 구성되기 때문에 success에서 가공할 때 가장 편합니다. 이 외에 xml, html(화면으로 받아오는 방식), jsonp(크로스 도메인일 때 이용) 등이 있습니다.
6. success
 - 데이터 통신이 성공했을 때 실행되는 function입니다. 순서대로 response는 서버에서 받아 온 값, textStatus는 현재 상태에 대한 설명, jqXHR은 in jQuery 1.4.x, XMLHttpRequest Object로 jQuery에서 반환하는 값입니다.
7. error
 - 데이터 통신이 이루어지다가 에러가 났을 때 실행되는 function입니다. 순서대로 jqXHR은 in jQuery 1.4.x, XMLHttpRequest Object로 jQuery에서 반환하는 값, textStatus는 error가 한 가지 발생했을 시 에러에 대한 타입을 errorThrown은 HTTP 상태값에 대한 메시지를 받아볼 수 있습니다.

 대표적으로 자주 사용하는 7가지 Option을 적어 보았습니다. jQuery API 문서를 보면 더 다양한 기능들을 볼 수 있습니다. 가령 headers같은 헤더 설정이나 jsonp를 위해 사용되는 crossDomain이나 서버 통신전에 이용되는 function인 beforeSend같은 유용한 기능이 많으므로 자세한 내용은 jQuery API 문서에서 확인하시면 되겠습니다.

http://api.jquery.com/jQuery.ajax/