jQuery를 통해 간단하게 Ajax를 사용해봅시당.

Ajax를 이용한 웹 페이지는 여기저기 많이 분포하고 있습니다.

우리가 편리하게 사용하고 있는 구글, 네이버 등의 지도 역시 Ajax를 통한 비동기화 방식을 채택하였고

자동완성검색과 같이 키워드를 입력하면 그 뒤에 이어질 수 있는 검색어들이 검색창 밑으로 나열되는 것도

역시 Ajax를 이용하여 구현한 내용입니다.

그럼 간단하게 Ajax가 무엇이고 장점과 단점으로 어떤 것이 있는지 알아봅시다.

 

l  Ajax란? 

Asynchronous JavaScript and XML의 약자로, 사용자 요청을 즉시 처리하는 인터랙티브 형식의 웹 응용프로그램을 

만들기 위한 컴퓨터 프로그래밍 방법을 말합니다. Ajax는 JavaScript, DHTML, XML, CSS, DOM 그리고 마이크로소프트 

객체인 XMLHttpRequest 등 여러 가지 프로그래밍 도구들을 결합시킵니다.

이전의 HTTP 요청에서 새로운 페이지 전체가 새로 표시될 때까지 사용자들이 기다려야 했다면, Ajax는 사용자가 어떤 동작을 

수행하면 그 즉시 웹 페이지의 내용이 수정되도록 해준다. 하지만 Ajax 응용프로그램을 위해 따로 플러그인을 설치할 필요가 

없고, 웹 브라우저와 직접 동작한다. 이 기술이 XMLHttpRequest에 의존하고 있기 때문에, 초창기에는 마이크로소프트 인터넷 

익스플로러에서만 동작했지만, 현재는 대부분의 브라우저에서 Ajax를 지원하고 있다.

장점 

1. 전체 HTML 데이터가 아닌 필요한 데이터만을 요청하므로, 

   서버와 클라이언트 사이의 데이터 전송량을 줄일 수 있고 응답성이 빨라진다.

2. 사용자의 요청에 대해 페이지 새로고침을 하지 않고도 응답결과를 화면에 업데이트 할 수 있어서 

    사용자 편의성이 높아집니다.

단점 

1. Ajax를 올바로 이해하지 않고 남발과 오용을 하게 되면 오히려 서버에 해가 될 수 있다.

2. 요청이 백그라운드로 처리되기 때문에 비동기 프로그램에 대해 알고 있어야 한다.

3. 여러 브라우저가 존재하고 브라우저마다 화면을 업데이트하기 위한 방법이 다르기 때문에 

    브라우저에 따라 개별 처리가 필요할 수 있다.

l  동기와 비동기?

동기와 비동기에 대한 차이를 설명하기 위해 하나의 예를 들자면, 자바 프로그램을 실행할 때 중간에 메소드를 호출하는 

경우를 생각해봅시당. 프로그램은 순차적으로 내용을 처리하다가 메소드 호출을 만나고 메소드로 넘어가 그 내용을 처리한 

뒤에 나머지 내용을 실행하게 됩니다. 하지만 비동기방식의 경우는 말 그대로 비동기입니다. 작업의 흐름 중 또 다른 업무가 

있는 경우 그 업무는 그 업무대로 진행하도록 하고 원래 진행하던 대로의 일을 진행합니다.

 

동기와 비동기방식의 차이점을 설명한 그림입니다. 그림실력이 타의 추종을 불허하네요 ㅋㅋㅋㅋㅋ

왼쪽에 묘사된 그림이 동기 방식에 대한 내용입니다. 앞에서 예시를 들었던 것과 같이 프로그램 수행 중 메소드를 만나게 되면 

그 뒤의 작업은 메소드 작업이 끝난 후로 순서가 미뤄지게 됩니다. 그래서 모든 업무들을 거쳐서 작업을 끝낼 수 있습니다. 

하지만 오른쪽에 묘사된 Ajax의 비동기 방식은 조금 얘기가 다릅니다. 중간에 길게 뻗어나가는 선이 업무의 흐름입니다. 

중간에 다른 업무를 만나게 되더라도 각각의 업무와 더불어 본래의 업무도 순차적으로 계속 진행하게 됩니다. 

Ajax를 적용한 웹페이지를 예로 설명하자면,

사용자로부터의 요청이 들어와서 작업을 시작하게 되면 사용자 요청에 응답하기 위해 필요한 여러 작업들이 있는데 

기존 처럼 모든 업무가 다 끝나고 나서야 페이지를 표시하는 방식 (동기방식) 이 아니라 각각의 업무가 처리되어서 완료된 

내용을 즉각적으로 페이지에 표시하는 형식으로 요청을 처리합니다.

l 요청의 백그라운드 처리?

그렇다면 기존의 업무를 처리하면서 어떻게 다른 업무에 대한 처리를 하고 그 내용이 사용자에게 페이지의 

이동이 없이 즉각적인 반응을 하는 것처럼 보이게 할 수 있을까요?

그것은 요청을 백그라운드에서 처리하기 때문입니다.

기존의 웹페이지는 클라이언트가 서버에 요청을 보내면, 서버가 클라이언트에게 응답하여 어떠한 페이지를 보내주는 

것이었는데, 지금은 HTML내에서 선언한 Ajax에 의해서 요청을 하더라도 페이지의 이동 등이 일어나는 것이 아니라 동시에 

다른 작업들을 실행해서 그 작업이 종료되면 그 작업응답에 대한 내용을 보여줄 수 있게 되었다.

위의 그림에서 비동기 방식에서 그려진, 중간의 파란색으로 보여지는 업무의 흐름이 페이지를 보고 있는 사용자들에게는 

아무런 변화가 없는 것 같지만 그 속에서 진행해야 하는 여러가지 업무가 진행되고 있는 것입니다. 보이지 않을 뿐~

대표적인 예로는 오리가 물에서 떠 있는 것은 물 속에서 진행되고 있는 발장구때문입니다. 하지만 겉에서 보기에는 

아무 변화가 없지영. 오리는 떠 있다는 업무를 진행하기 위해서 백그라운드인 물 속에서 업무를 처리하고 있는 겁니다.

 

l  jQuery에서 지원하는 Ajax의 사용예제

 

$.ajax({

type : " POST 또는 GET ",

url : " Ajax를 통해 내용을 전달하고자 하는 페이지 경로 "

data : 전달하고자 하는 내용 (POST 방식일 경우),

dataType : " json, text 등 내용의 전달방식 ",

beforeSend : function(xmlHttpRequest) {

},

success : function(msg) {

if(msg.result == "success"){

    

    alert("처리를 성공하였습니다."); 

    

}else if(msg.result != "success"){

    

    alert("처리를 실패하였습니다.");

}

location.href=" 작업 처리 성공 시 이동하길 원하는 페이지 (쓰지 않아도 관계없음) ";

},

error : function(xmlHttpRequest, textStatus, errorThrown) {

alert(" 처리 중 에러발생 [" + textStatus + "]");

}

});

 

Insert, Update, Delete에 대해서 이런식으로 Ajax를 만들어보았는데, 약간의 변형으로도

 

사용이 가능하므로 이렇게 저렇게 바꿔서 이용해 보시길!

 

당연히 jQuery에서 지원하는 Ajax를 사용했으므로 jQuery를 import하셔야 한다는 것은 아시겠지영?

 

이 포스팅을 통해 다른 포스팅을 어떤 것을 해야겠구나 하는 아이디어가 여러가지 나왔네요.