jQuery Ajax 설명 및 사용법

이번 포스팅에서는 jQuery Ajax 사용법을 다뤄보겠습니다.

먼저 Ajax의 사전적 설명입니다.

출처 : 네이버사전

사전적인 설명은 언제봐도 어렵습니다.

딱! 요점만 말씀드리자면 Ajax는 비동기식 통신입니다.

혹시 웹에서 네이버메일 사용해보셨나요?

삭제할 메일을 체크하고, 삭제버튼을 누르면 메일이 삭제됩니다.

그때 주소를 보시면 변화가 없습니다.

우리가 웹을 이용하며 여기저기 서핑을하면, 주소가 항상 변화합니다.

페이지별로 이동하기 때문인거죠.

여기서 네이버 메일의 방식을 보면 서버와 Ajax로 비동기식 통신을하여,

삭제가 되었을때에는 메일리스트 부분만 새로고침합니다.

또한 메일 리스트 하단의 페이징(1 2 3 4 숫자들) 기법도 똑같은 방식입니다.

예를들어, 저 부분을 Ajax로 사용하지 않고 페이지에 직접 요청하여 링크를 변경시킨다면..

매우 복잡한 로직과 매번 화면의 새로고침을 보게됩니다.

로직을 아주 간단하게 짤 수도 있지만, 새로고침은 피할 수 없게됩니다.

즉, 메일을 삭제해도 화면이 깜빡이고, 페이지를 다른곳으로 넘겨도 깜빡이게 됩니다.

따라서, Ajax는 단순하게 화면을 새로고침하지 않는 용도로 사용하느냐?

답은 그렇기도 하지만 그렇지도 않습니다 가 되겠네요.

먼저 그렇기도 하지만의 대한 제 의견은 이렇습니다.

한가지 예를 들어서 지금 메일을 보내고있는데, 주소록을 봐야한다고 가정하겠습니다.

팝업으로 새창을 띄워도 되지만 단순히 다른 페이지에서 보도록 기능을 구현했다면,

메일을 다쓰고나서 주소록을 누르면 다른페이지로 이동하게되어 작성한 글들은 모두 제거됩니다.

(새창이 아니라는 예시를 이해해 주세요.)

따라서 글을 모두 작성하였다가 주소록을 누르면 멘붕이 오겠네요..

그다음 그렇지도 않습니다 의 대한 의견은 상위의 예시와 연관이 됩니다.

주소록 기능을 이제는 레이어 팝업으로 변경하겠습니다.

멘붕이 없도록 현재 화면에서 바로 볼 수있도록이요.

이때 서버와 통신을 하여 주소록 정보를 읽어온 뒤,

주소록을 화면에 보여주면 됩니다.

간단하게 jQuery Ajax를 사용하여 서버에 요청하고,

그 결과물을 내가 원한대로 꾸며서 현재화면에 추가만 하면 됩니다.

설명은 이쯤하고, 사용법을 보겠습니다.

(처음에는 자바스크립트 XHR(XMLHttpRequest)객채를 구현해보는걸 추천합니다.)

(직접 객채를 구현하여 사용해봐야 감이 쉽게 옵니다.)

jQuery에서는 ajax() 함수를 사용하면 매우 편하게 서버와 통신할 수 있습니다.

<button id="start_ajax">서버와 통신시작</button>

 기본적인 버튼 마크업이구요.

$("#start_ajax").click(function(){
	$.ajax({
		type:"POST",
		url:"./book.jsp",
		data : {name : "홍길동"},
		dataType : "xml",
		success: function(xml){
			console.log(xml);
		},
		error: function(xhr, status, error) {
			alert(error);
		}	
	});
});

 jQuery Ajax 옵션을 적어주었습니다.

셀렉터는 start_ajax라는 id를 가진 버튼을 가르키고 있구요.

결국 start_ajax 버튼을 누르면 POST방식으로 서버와 통신을 하게 됩니다. :)

라인별로 옵션을 설명하자면,

3. type : 통신타입을 설정합니다. POST 또는 GET을 선택할 수 있습니다.

4. url : 요청할 URL을 기입합니다.

5. data : 서버에 요청시 보낼 파라미터를 기입합니다.

6. dataType : 응답받을 데이터의 타입을 선택합니다. (XML, TEXT, HTML, JSON 등)

7. success : 요청 및 응답에 성공하였을 때에 행위를 기입합니다.

10. error : 요청 또는 응답에 실패하였을 때에 행위를 기입합니다.

6번의 데이터타입은 필수사항이 아닙니다. 기입하지않아도 알아서 정해줍니다! :)

GET방식 또한 상위 기술한것과 동일하되, type만 GET으로 변경하여 사용하면 됩니다.

결국 요약하자면,

현재위치에서 book.jsp 페이지에게 name(값은 탁탁)이라는 파라미터를 POST방식으로 요청합니다.

그럼 book 페이지에서는 요청한 탁탁이라는 파라미터를 받고,

XML을 쫙 만들어서 다시 클라이언트(ajax 요청자)에게 보내주겠죠.

그럼 그걸이제 원하는대로 사용하면 되는 겁니다.

상위에서는 콘솔로 출력했습니다.

알고보면 매우 쉬운 사용법이지만 강력한 기능이라서 참 중요한 포스팅이라 생각듭니다. :)