Ajax Option 정리 및 Ajax 415 Unsupported Error 원인/해결

이슈관리 시스템을 개발하면서 계속 오류가 발생하여 관련 내용을 포스팅하려고 한다. 오류는 클라이언트에서 서버로 Ajax 를 이용해서 비동기 요청를 했을 때 계속 발생했다. 오류는 '415 Unsupported Media Type' 였다. 415 오류는 지원되지 않는 형식으로 클라이언트가 요청을 해서 서버가 요청에 대한 승인을

거부한 오류를 의미한다. 이럴 경우에는 ContentType, Content Encoding 데이터를 확인할 필요가 있다.

결국 나는 AJax 요청을 했을 때, ContentType을 명시하지 않았기 때문에 오류가 발생했던 것이다. 오늘은 Ajax Option에 대해 알아보겠다!

(1) async (boolan, default : true)

 - 해당 함수를 비동기 처리를 할지, 동기 처리를 할지 결정하는 옵션이다. 동기처리를 하게되면 서버로 부터 응답이 올때까지 브라우저가 LOCK이 걸려 다른 

   기능을 수행하지 못한다. 반면 비동기 처리를 하면 서버로 부터 응답 유무와 상관없이 브라우저는 다른 기능을 동작시킬 수 있다.

   Ajax는 비동기 처리를 위한 기능이기 때문에 기본적으로 async를 지원한다.

(2) beforeSend (function) / complete (function)

 - beforeSend는 이름 그대로 요청을 보내기 전에 수행되는 메소드이다. 이 메소드에서 return false 를 하게 되면 Ajax 처리를 취소할 수 있다.

   complete는 ajax 완료 후 실행되는 메소드로서, 성공 실패 유무와 상관없이 항상 실행되는 메소드이다. 마치, try catch finally의 finally와 같다고 할까?!

(3) success (function) / error (function)

 - success는 Ajax가 정상적으로 수행됬을 때 실행되는 메소드이고, error는 Ajax 처리 중에 오류가 발생했을 때 실행되는 메소드이다.

   complete가 try cath finally의 finally 였다면, success는 try, error는 catch 에 해당된다고 할 수 있다.

(4) timeout (number, 단위 : ms)

 - 제한 시간동안 Ajax 처리가 완료되지 못하면 Invalid Access Error 오류가 발생하고, timeout의 기본값은 브라우저마다 다르다.

(5) ContentType (String, default : application/x-www-form-urlencoded)

 - ContentType은 클라이언트가 전송하는 데이터의 형식이다. 나는 ConetentType을 지정하지 않았기 때문에 default로 application/x-www-form-urlencoded 

   타입으로 서버에 요청을 보냈고, 서버는 JSON 형식으로 데이터를 읽으려고 하다보니 415 오류가 발생했던 것이다. Ajax의 기본값에 대해 정확히 알았다면,

   혹은 서버의 응답 메세지를 정확히 보고 파악했다면 좀더 쉽게 오류를 해결할 수 있지 않았을까 라는 생각이 들었다.

(6) DataType

 - DataType 과 ContentType 이 조금 헷갈렸다. DataType은 서버에서 반환하는 데이터 형식을 의미한다. ContentType은 서버로 전송하는 데이터 형식이다.

   대체로 JSON을 많이 사용한다.

(7) Data

 - Data를 보낼 때, 대부분의 사람들이 착각하는 것이 하나 있다. form의 input type의 데이터를 전송할 수 있는 형태로 직렬화하는 메소드를 모두 알고 있을

   있을 것이다. 바로 serialize() 메소드이다. 이 메소드는 JSON 데이터로 생성하는 것이 아닌, 단지 키=값&키=값 String 형태로 변환해주는 것을 의미한다.

   그렇기 때문에 서버에 전달할 때, JSON 으로 변환해서 보낼 필요가 있다. 그래야만 스프링에서 @RequestBody가 (JSON --> Object)로 변형 시킬 수 있다.

   물론 @RequestBody를 하지 않으면, serialize()로 보내도 문제가 되지 않는다. 하지만 ATDD 방식으로 개발을 하다보면 테스트 코드에서 JSON 형태로

   데이터를 전달하여 테스트를 많이 진행하게 된다. 그럴경우를 대비해서 테스트와 개발코드에서 데이터를 받는 형식을 JSON으로 통일시키는 것이 좋다!

(8) 그외 옵션

 - type : 통신의 종류를 의미하며, post, get, put, delete 가능

 - url : 요청을 보낼 대상

 

아래는 Ajax의 간단한 기본 형태 예제 코드이다.

        
$.ajax({
        type: "POST" ,
        async: true ,
        url: "/api/issues",
        dataType : "json",
        timeout: 3000,
        data: JSON.stringify(jsonObject),
        contentType: "application/json",
        error: function (request, status, error) {            

        }, success: function (response, status, request) {
     
        }, beforeSend: function () {

        }, complete: function () {
   
        }
});