jQuery ajax 사용법 정리

안녕하세요. 터미네입니다.

 

이번 포스팅은 jquery ajax 사용법을 소개합니다.

 

회사에서 ajax를 자주 애용하지만,

소스코드에 잘 코딩되어 있어서

 

유지보수하는 시스템 혹은 프로젝트 중에

소스를 복사 붙여넣기 한 후

서버 endpoint 및 데이터 주고받는 형식을 정하기만 하는

기계적인 코딩을 하고만 있어서

 

이번 포스팅을 통해 실속있는

ajax 개념을 정리하려 합니다.

 

ajax의 기본은 아래와 같습니다.

$.ajax({
	type : "POST",//서버에 요청하는 타입, GET방식도 있음.
	contentType : "application/json; charset=utf-8", //서버에 전송하는 데이터형식과 인코딩타입
	url : "/tra/selectHotPlace.json", //요청할 서버 url
	data: JSON.stringify({ //서버에 전달하는 데이터
		"keyword":keyword,
		"page": $('#page').val(),
		"pageBlock": $("#pageBlock").val()
	}),
	cache : false,
	dataType : "JSON",//서버로 부터 응답받는 데이터 형식 text, xml 등도 사용
	success : function(data) {//서버와 정상적으로 통신했을 경우
    		try{
			console.log(JSON.stringify(data));
        	}catch(e){
			console.log(e)
		}
	},
	error : function(data, msg) {//서버와의 통신에 에러가 발생했을 경우
		if ( window.console )// console을 사용하는 브라우저인지 확인
			console.log(data);
	}
});

 

위에 소스에 주석을 달아서 설명을 간략하게 썼습니다.

 

ajax에 대해 설명을 해보겠습니다.

ajax는 비동기 방식의 통신입니다.

어떨때 쓰냐면, XMLHttpRequest를 사용하여

페이지를 새로고침 하지 않고 일부만 로드하는 방식입니다.

 

일부만 로드한다는 것은 전체페이지를 리로드 하지 않고

페이지의 특정 부분만 값을 갱신한다는 의미로 생각하시면 될거에요.

 

제가 예시로 든 소스는 제가 주로 사용하는 것이며,

저거로도 충분히 개발이 가능합니다.

 

여기서 집고 넘어갈 부분은

data, dataType, contentType입니다.

 

data는 서버에 요청할 때 보내는 정보입니다.

타입은 string, json, xml등등이 있습니다.

 

dataType은 서버에서 응답할 때 보내는

데이터 형식을 지정하는 것입니다.

 

dataType을 개발자가 명시하지 않으면,

default로는 xml입니다.

그 밖의 타입은 json, script, text, html 등이 있습니다.

 

contentType은 클라이언트에서 서버로 요청할때

data의 타입이 무엇인지, 인코딩은 어떤지 알려주기 위해

사용합니다.

 

여기까지 jQuery ajax에 대해 살펴보았습니다.

 

긴글 읽어주셔서 대단히 감사드립니다.

다음 포스팅 기대해주세요!