jQuery ajax에서 http code 200 이외의 다른 코드도 처리하기

jQuery에서 ajax로 데이터를 주고 받을 대 주로 json이나 xml을(이하 json만 다룸) 이용한다. 에러가 있을 경우에도 서버 접속 에러가 아니면 에러 내용은 json에 다 포함시켜서 처리한다.

하지만 좀 규모가 큰 프로젝트 같은 경우 200, 201, 400, 404 등을 모두 다르게 고려해야 될 때가 있다. 이 모든 응답 코드에 대해 json이 돌아오는 것이다. 예를 들어 200은 정상적으로 값을 불러왔다는 것이고, 201는 정상적으로 값을 삽입했다는 것이다. 200일 경우엔 불러온 값들, 201에는 삽입한 값에 대한 결과 값이 json으로 온다.

하지만 jQuery Ajax에선 HTTP CODE가 200이 아니면 무조건 error로 처리되어 버린다. 이는 PHP등 많은 프로그램에서도 마찬가지다. HTTP CODE 가 200이 아니면 일단 경고 메세지만 띄워버리고 정작 필요한 json값은 불러오지 않는다. 그렇게 되면 404 같은 경우에도 어떤 파일을 요청했는데 해당 파일이 일시적으로 접근 불가인지 경로가 바뀐 것인지 서버에서 처리해서 json으로 뿌려 줄 수도 있는데 이런 세부적인 에러 핸들링이 어렵다.

이럴 경우 대처 할 수 있는 방법을 보면

function login_submit() {
	var jqxhr = $.ajax({
		url: "",
		type: "POST",
		data: loginData
	}).done(function(data) {
		alert('성공');
	}).fail(function( jqXHR, textStatus ) {
		alert('실패');
		console.log(jqXHR.status);
		return false;
	});
	return false;
}

이런 기본적인 ajax 코드에서 statusCode 옵션을 추가 해 준다.

function login_submit() {
	var jqxhr = $.ajax({
		url: "",
		type: "POST",
		data: loginData,
		statusCode: {
			401:function(data) {
				console.log(data);
			}
		}
	}).done(function(data) {
		alert('성공');
	}).fail(function( jqXHR, textStatus ) {
		alert('실패');
		console.log(jqXHR.status);
		return false;
	});
	return false;
}

이렇게 하면 200이 아닌 상황에서도 서버에서 보내 온 데이터를 받아 올 수 있다. 401 말고도 다른 code에 관한 처리를 콤마( , )를 이용해 추가적으로 적어주면 된다. 하지만 이것 만으로 부족 할 수가 있다. 400, 401, 403, 404, 405 등등에 대한 JSON을 모두 받아와야 한다면, 이럴바엔 그냥 HTTP 상태코드를 이용해서 구분 하는것 보다는 JSON의 오류 내용을 보고 구문하는게 더 편할 경우 HTTP CODE와 관계없이 무조건 data를 받아 오게 하려면 아래와 같이 하면 된다.

function login_submit() {
	var jqxhr = $.ajax({
		url: "",
		type: "POST",
		data: loginData
	}).complete(function(data) {
		console.log(data.status);
		console.log(data.responseJSON);
	});
	return false;
}

이렇게 해 주면 모든 status를 한번에 관리 할 수도 있고, 구분해서 관리 할 수도 있다. 그리고 2xx이든 4xx이든 다 받아 오므로 done이나 fail을 따로 구분해서 구현 할 필요도 없다. 물론 그만큼 복잡한 후 처리가 필요할때 유용한 방법이다.