ajax 사용법 간단정리 간단정리

ajax는 jQuery를 import하면 쓸수있는 일종의 api 모듈로 간단하고 짜잘한 통신을 할때 꽤나 유용하다. (가령 단순히 스크립트를 다시 받아올뿐이라던지, 간단한 파라미터를 보낸다던지..) 물론 이걸로 복잡한 로직을 수행 할 수 없는건 아니지만, 요즘은 ajax말고도 통신 할 수 있는 방법이 많이 나와서 상황과 취향에 따라 취사 선택하면 된다.

기본사용법

 $.ajax({
    type : "GET", //요청 메소드 타입
    url	: "url", //요청 경로
    async : true, //비동기 여부
    data  : {key : value}, //요청 시 포함되어질 데이터
    processData : true, //데이터를 컨텐트 타입에 맞게 변환 여부
    cache : true, //캐시 여부
    contentType : "application/json", //요청 컨텐트 타입 "application/x-www-form-urlencoded; charset=UTF-8"
    dataType	: "json", //응답 데이터 형식 명시하지 않을 경우 자동으로 추측
    beforeSend  : function(){
      // XHR Header를 포함해서 HTTP Request를 하기전에 호출됩니다.
    },
    success	: function(data, status, xhr){
      // 정상적으로 응답 받았을 경우에는 success 콜백이 호출되게 됩니다.
      // 이 콜백 함수의 파라미터에서는 응답 바디, 응답 코드 그리고 XHR 헤더를 확인할 수 있습니다.
    },
    error	: function(xhr, status, error){
      // 응답을 받지 못하였다거나 정상적인 응답이지만 데이터 형식을 확인할 수 없기 때문에 error 콜백이 호출될 수 있습니다.
      // 예를 들어, dataType을 지정해서 응답 받을 데이터 형식을 지정하였지만, 서버에서는 다른 데이터형식으로 응답하면  error 콜백이 호출되게 됩니다.
    },
    complete : function(xhr, status){
      // success와 error 콜백이 호출된 후에 반드시 호출됩니다.
      // try - catch - finally의 finally 구문과 동일합니다.
    }
    });

위에 속성에서 type의 경우는 method: 로 해도 비슷하게 동작하던데 차이를 잘모르겠다.. 구글링한 예시들은 모두 type이니 type으로 써도돼고.. 안써도돼고.. 저 속성들중 가장 자주쓰이는건 url,data,type,success,error 이거 다섯개뿐이고 나머지는 생략해도 상관없다.
(dataType은 특별한 경우가 아니면 명시하지 않는게 좋은것이, 응답받은 data로 특별히 뭔가를 하는게 아니라면 쓸데없는 오류를 자주 유발하는 부분이다.
예를들면, 단순히 응답으로 String타입의 Yes/No 둘중 하나를 뱉어내는 url이 있다고 쳤을때 dataParameter와 헷갈려서 dataType을 json으로 명시한다던가 하는 경우가 있는데, 이런경우 type Parse Error가 떨어지므로 주의하자. )