jQuery에서 Ajax 처리하기

🗓2020년 03월 06일 ∙ 🖊TutorialPost ∙ ⏳2분

jQuery는 서버로부터의 Ajax 데이터를 처리하기 위해 jqXHR 이라는 객체를 제공합니다.

/* jqXHR */
responseText	// 서버로부터 리턴된 텍스트 데이터
responseXML		// 서버로부터 리턴된 XML 데이터
status			// 상태코드
statusText		// 상태 설명 문자열 (오류의 상세한 내용)
.done()			// 요청이 성공했을 때 실행될 코드를 지정
.fail()			// 요청이 실패했을 때 실행될 코드를 지정
.always()		// 요청의 성공/실패 여부에 관계없이 항상 실행될 코드를 지정
.abort()		// 서버와의 커뮤니케이션을 취소

jQuery로 데이터 로드하기

.load() 메서드를 사용해 요소에 HTML 코드를 로드합니다.

$("#content").load("data.json");

Ajax 요청 상세 제어하기

$.ajax() 메서드를 사용하면 모든 Ajax 요청을 제어할 수 있습니다.

  • type - 요청을 보낼 방식. GET 또는 POST
  • url - 요청을 보낼 페이지의 경로
  • data - 요청과 함께 서버로 전달될 데이터
  • timeout - 실패한 것으로 처리하기까지 기다릴 시간 설정
  • beforeSend - 요청을 전달하기 전 호출될 함수 (로딩 중 아이콘 표시 등)
  • done - 성공했을 때 호출될 함수
  • fail - 실패했을 때 호출될 함수
  • always - 성공/실패 이벤트 처리한 다음에 실행될 함수 (로딩 중 아이콘 제거 등)
var request = $.ajax({
  type: "POST",
  url: url,
  data: { id : id },
  timeout: 2000,
  beforeSend: function() {
    $content.append("<div id='loading'>로딩...</div>");
  },
});

request.done(function( msg ) {
  $content.html($(data).find("#container")).hide().fadeIn(400);
});

request.fail(function( jqXHR, textStatus ) {
  $("#panel").html("<div class='fail'>로딩 실패</div>");
});

request.always(function() {
  // code...
});

jQuery Ajax 약식 메서드들

아래의 약식 메서드는 모두 내부적으로 $.ajax() 메서드를 사용합니다.

/* get - HTTP GET 리퀘스트를 사용해서 서버로부터 데이터를 로드 */
$.get(url [, data][, success][, type])
// url : 데이터를 가져올 경로
// data : 서버로 전송될 추가 정보
// callback(success) : 데이터를 받았을 때 호출될 콜백함수를 지정
// type : 원하는 응답 형식을 지정
// 리턴 : jqXHR

$.get("votes.php", queryString, function(data) {
  $("#selector").html(data);
});

/* post - HTTP POST를 이용해서 서버의 데이터를 수정. 주로 폼 데이터를 서버로 전송하는 용도 */
$.post(url [, data][, callback][, type])
// url : 데이터를 처리할 서버상의 파일 경로
// data : 전송할 폼 데이터

/* serialize - 폼 데이터의 정보를 선택하여 처리 */
.serialize()

/* getJSON - GET 요청을 이용해서 JSON 데이터를 로드 */
$.getJSON(url [, data][, callback])


/* getScript - GET 요청을 이용해서 스크립트를 로드 (JSONP) */
$.getScript(url [, callback])
SHARE