[jQuery] .ajax() - 비동기적으로 데이터 처리 메서드

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

jQuery의 .ajax() 사용법

jQuery의 .ajax()는 가장 많이 사용되는 함수 중 하나로,
서버로 HTTP 요청을 보내고, 비동기적으로 데이터를 처리하는 함수입니다. 
ajax() 함수를 사용하면 서버로 데이터를 보내거나 
서버로부터 데이터를 받아오는 일을 쉽게 구현할 수 있습니다.

 

아래 코드는 .ajax() 함수의 기본 형태입니다.

// javascript code
$.ajax({
  async: true,
  url: "https://jsonplaceholder.typicode.com/posts",
  method: "POST",
  data: { "title": "foo", "body": "bar", "userId": 1 },
  dataType: "json",
  traditional: false,
  cache: false,
  contentType: "application/json",
  timeout: 5000,
  processData: true,
  headers: {
    "Authorization": "Bearer xxxxxxxx",
    "Custom-Header": "custom-value"
  },
  beforeSend: function(xhr) {
    console.log("Before send...");
  },
  success: function(data, status, xhr) {
    console.log("Success:", data);
  },
  error: function(xhr, status, error) {
    console.log("Error:", error);
  },
  complete: function(xhr, status) {
    console.log("Complete:", status);
  }
});

 

ajax() 함수의 주요 속성은 다음과 같습니다.

속성	설명
async	비동기 요청 여부를 지정합니다.  기본값은 true입니다.
url	요청을 보낼 URL을 지정합니다.
method	HTTP 요청 메소드를 지정합니다.  기본값은 "GET"입니다. 다른 값으로는 "POST", "PUT", "DELETE" 등이 있습니다.
data	서버로 보낼 데이터를 지정합니다.  이 속성의 값으로는 객체, 문자열, 배열 등이 가능합니다.  객체로 지정할 경우, jQuery는 이를 적절한 데이터 형식(JSON, XML 등)으로 변환하여 서버로 전송합니다.
dataType	서버로부터 받을 데이터의 형식을 지정합니다.  가능한 값으로는 "xml", "json", "script", "text", "html" 등이 있습니다.
traditional	파라미터를 전달할 때 배열을 사용할지 여부를 지정합니다.  기본값은 false입니다.
timeout	요청에 대한 타임아웃 시간을 지정합니다.
headers	HTTP 헤더를 추가합니다.
password	요청에 대한 비밀번호를 지정합니다.
cache	GET 요청에 대해 캐시를 사용할지 여부를 지정합니다.  기본값은 true입니다.
contentType	서버로 보낼 데이터의 MIME 타입을 지정합니다.
beforeSend	요청이 전송되기 전 실행할 함수를 지정합니다.
success	요청이 성공하면 실행할 함수를 지정합니다.
error	요청이 실패하면 실행할 함수를 지정합니다.
complete	요청이 완료되면 실행할 함수를 지정합니다.
done	요청이 완료되면 실행할 함수를 지정합니다.
fail	요청이 실패하면 실행할 함수를 지정합니다.
always	요청이 완료되었을 때 항상 실행할 함수를 지정합니다.
statusCode	HTTP 상태 코드에 따라 실행할 함수를 지정합니다.
processData	서버로 보낼 데이터를 처리할지 여부를 지정합니다.  기본값은 true입니다.
contents	응답 내용의 MIME 타입과 데이터 형식에 대한 규칙을 지정합니다.
context	콜백 함수 내에서 this 키워드가 참조할 객체를 지정합니다.
crossDomain	요청이 다른 도메인에 대한 것인지 여부를 지정합니다.
dataFilter	응답 데이터를 처리하기 전에 실행할 함수를 지정합니다.
global	ajaxComplete와 ajaxError 이벤트를 발생시킬지 여부를 지정합니다.  기본값은 true입니다.
ifModified	응답이 수정되었는지 여부를 지정합니다.
isLocal	요청이 로컬 파일인지 여부를 지정합니다.
jsonp	JSONP 요청을 사용할지 여부를 지정합니다.
jsonpCallback	JSONP 요청에서 콜백 함수의 이름을 지정합니다.
scriptCharset	동적으로 로드되는 스크립트의 캐릭터셋을 지정합니다.
xhr	XMLHttpRequest 객체에 대한 직접적인 액세스를 제공합니다.

 

콜백 속성의 동작 순서

성공 시 : success > complete > done > always

실패 시 : error > complete > fail > always