[WebBase] jQuery.ajax

jQuery를 이용한 Ajax

 

jQuery라이브러리에서 지원하는 Ajax 함수는 다음과 같은 구조로 구성되어있다.

 

$.ajax({
  type	: "GET", //요청 메소드 타입
  url		: "url", //요청 경로
  async : true, //비동기 여부
  data  : {key : value}, //요청 시 포함되어질 데이터 JSON.stringify(data) 의 제이슨 형식으로도 많이 쓰인다.
  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 구문과 동일합니다.
  }
});

요청 메소드 타입의 GET 과 POST의 차이는 '데이터가 어디에 위치하는가' 로 구분된다.

POST요청시에 URL에 파라미터가 보이지 않는 이유는 데이터가 요청 바디에 포함되어 있기 때문이다.

그렇기 떄문에 GET과 POST에 따라 데이터를 URL에 추가할지, 요청 바디에 추가해야할지 알고 있어야 한다.

 

 

 

출처 : https://kdevkr.github.io/understanding-asynchronos-javascript-and-xml-with-spring/