Ajax 사용하기

Ajax는 뭐죠?

웹 어플리케이션을 만들 때 번거로운 부분을 생각해보면 아마 서버와의 데이터 통신 부분이 손에 꼽힐겁니다.

보통 HTTP 통신으로 클라이언트(웹)가 서버에 요청을 보내면 서버에서는 클라이언트가 요청한 페이지 혹은 데이터를 보내주게 되죠.

그러면 HTTP 응답으로 온 HTML 문서 혹은 JSON 데이터등을 클라이언트에서 처리해서 사용자에게 보여주게 되는거죠.

자, 이때 매우 비효율적인 부분이 발생하는데요.

게시판을 예로 한번 들어보죠.

게시판에는 많은 글들이 있습니다.

흔히 페이징이라고 하는 기법으로 구현이 되어있죠.

위의 페이지 번호들을 생각하시면 이해가 빠르실 겁니다.

저 번호를 누를 때마다 알맞은 데이터들을 가져오는 방식이죠.

자 이때, 게시글을 제외한 나머지 영역들은 변하지 않습니다.
즉, 큰 틀은 그대로이고 안에 게시글 내용만 바뀌죠.

그런데 기존의 방식은 그냥 통째로 새로운 HTML을 받아옵니다.
결국 계속해서 중복되는 HTML 코드들이 네트워크 상에서 왔다갔다 하는거죠.

말 그대로 낭비입니다. 더욱이 통신량이 많으면 많을수록 손해죠.

이를 위해서 Ajax라는 기술이 나오게 된 것입니다.

Ajax를 사용하면 HTML 전체를 받아올 필요 없이 필요한 데이터만 서버에 요청에서 받아올 수 있습니다.
그리고 받아온 데이터를 처리해서 틀에 적용하면 되죠.

또한, 서버 처리를 기다리지 않고, 비동기 요청이 가능합니다.
웹 페이지 들어갔는데 페이지가 나오지 않고 계속 로딩중으로 떠있는 경험을 해보셨을 겁니다.

비동기 요청이 가능하다는 것은 방금 말한 것 처럼 서버에서 응답이 올 때까지 기다리는 것이 아니죠.
서버로 요청을 던져놓고 응답이 올 때까지 다른 일을 하다가 응답이 오면 데이터를 처리하겠다는 말입니다.
훨씬 효율적이죠.

이렇게 처리하면 기존 방식의 문제점이였던 네트워크 대역폭 낭비도 많이 줄일 수 있습니다.

그렇다고 Ajax가 무조건 좋은 것이라 할 순 없죠. 물론 단점도 존재합니다.

• Ajax를 쓸 수 없는 브라우저도 존재합니다.
• 페이지 이동 없이 데이터를 주고 받을 수 있기 떄문에 보안상 문제가 발생할 수 있습니다.
• 지원하는 Charset이 한정되어 있습니다.
• 스크립트로 작성되어 디버깅하기 힘들 수 있죠.
• 동일 출처 정책( same-origin policy)으로 인해 다른 도메인과는 통신이 불가능합니다.

하지만 이런 단점들에도 불구하고 기존 방식보다 더 효월적인 방식이기 때문에 Ajax는 사용할 가치가 충분하다고 말씀드리고 싶네요.

자 그럼 실질적으로 Ajax를 한번 사용해 보도록 하겠습니다.

ajax로 HTTP Post 요청 보내기

$.ajax({
            url : "http://target_url",
            type : "POST",
            data : { "key" : "value" }, 
            success : function(data, status, response) //서버로부터 받은 데이터, HTTP 요청결과가 문자열로 옴(success / fail), HTTP 응답값이 객체로 옴
            {
                //서버로부터 받은 JSON Array를 파싱한다
                var contents_data_array = JSON.parse(data);

                for(var i = 0; i < contents_data_array.length; i++)
                {
                    var content_data = contents_data_array[i];  //JSON Data
                    var board_title = content_data.board_title;
                    var board_content = content_data.board_contents;    
                    var board_date = content_data.date_upload;
                    

                    //받은 데이터를 처리
                }
            },
            error : function(response, status, error)  //HTTP 응답이 객체로 옴, HTTP 응답이 문자열로 옴, 에러값이 문자열로 옴
            {
                alert("글 목록 불러오기에 실패하였습니다. error : " + error);
            }
        });