[jQuery] ajax 통신 예제

1. ajax 서론

ajax는 Asynchronous JavaScript and XML의 줄임말로 비동기통신을 의미합니다. 

ajax Wikipedia : https://ko.wikipedia.org/wiki/Ajax

예를 들어 설명하겠습니다. 무언가를 form에서 post요청으로 서버에 보내는 작업을 생각해 보겠습니다. ajax가 없다면 post요청 후에 서버로부터 데이터를 받아 브라우저의 화면이나 상태가 변할 것입니다. 이렇게 되면 최근 인터넷에서 좋아요 버튼을 누르더라도 화면이 변경되거나 필요하지 않은 새로고침 효과까지 사용자가 경험하게 됩니다. 하지만 많은 인터넷 페이지에서 그런 경우가 발생한다면 사람들이 많이 실망할 것입니다. 

이런 경우 ajax를 사용하면 다른 브라우저 구성요소의 변동 없이 서버와 통신할 수 있습니다. 좋아요 버튼을 누르더라도 누른 버튼만 변경될 뿐 브라우저 전체의 변동은 없게 되는 것입니다. 물론 iframe등의 방법을 통해서도 이런 동작을 가능하게 할 순 있습니다. 하지만 ajax가 주는 안정성과 편리성은 따라갈 수 없습니다.

ajax통신을 하기 위해선 javascript만으로도 가능할 것입니다. 그러나 jQuery는 ajax통신을 획기적으로 편하게 해줍니다.

2. ajax 예제

저는 jQuery를 이용한 ajax를 구현해 보겠습니다. 

$("#submitBtn").click(function () {
  var getText = $("#submitTextarea").val();
  $.ajax({
    url:"/someurl/",
    type:"post",
    data:{
      c : getText,
    },
    dataType:"json",
    cache : false,
    success : function (data) {
      $.each(data, function (index, value) {
        do something
      });
 
    }
  });
});

위 코드는 id 값이 submitBtn 인 버튼을 클릭했을 시에 ajax 통신이 발생하도록 만든 코드입니다.

클릭이 발생하면 id 값이 submitTextarea인 Textarea로부터 값을 가져옵니다. val(); 은 jQuery에서 제공하는 값을 가져오는 함수입니다.

그 다음 ajax 통신이 발생합니다. $.ajax 이 부분입니다. jQuery는 이런식으로 ajax를 호출합니다. 그 후 인자별로 설명해보겠습니다.

1. 먼저 url입니다. url에는 현재 호스트 주소에 url에 전달된 값을 붙여 서버의 어떤 url 담당 부분과 통신하게 될지 결정합니다.

저같은 경우는 example.com/someurl/과 통신하게 될 것입니다.

2. 그 다음 type입니다. http 통신의 타입인 get, post 중 post를 사용한다고 생각하시면 됩니다.

3. data입니다. data는 request.POST에 dict 형식으로 전송됩니다. 서버에서 request body에서 데이터를 가져오게 하고 싶을 때 설정하시면 됩니다. 

4. dataType입니다. 서버로부터 받게 될 데이터의 타입을 결정합니다. json 말고도 html 타입을 사용할 수 있습니다.

5. cache는 통신후 캐시할지에 대한 여부입니다. false로 하겠습니다. true일 경우 다른 통신에 지장을 주기도 하는 것 같았습니다.

6. success입니다. 통신이 성공한 후 처리하게 되는 부분입니다. function 의 인자인 data는 서버로부터 받게 되는 데이터를 의미합니다. 물론 data_get 같이 이름을 변경해도 상관 없습니다.

7. $.each() 함수는 jQuery에서 json 같은 데이터를 다룰 때 유용하게 쓰입니다. for문 대용으로 편리하게 인덱스의 수만큼 작업을 하게 도와줍니다.

이상으로 ajax에 대해 알아보았습니다. 요즘같이 동적인 웹을 필요로 할 땐 ajax가 아주 유용하게 사용됩니다.