jquery Ajax() 기본 사용법

빠르게 복사해서 사용하기 위해서 jQuery ajax() 메소드의 기본적인 사용 방법과 코드를 정리합니다.

$.ajax({
  type: 'post',
  global: true,
  async: true,
  url: 'ajax_request.php',
  dataType: 'html',
  timeout: 30000,
  cache: true,
  data: { id: '1', mode: 'write' },
  contentType: 'application/x-www-form-urlencoded; charset=utf-8',
  error: function (jqXHR, textStatus, errorThrown) {
    // 통신에 에러가 있을경우 처리할 내용(생략가능)
  },
  success: function (data, textStatus, jqXHR) {
    // 통신이 정상적으로 완료되면 처리할 내용
  },
  beforeSend: function (jqXHR, settings) {
    // 통신이 시작하기전 처리할 내용(생략가능)
  },
  complete: function (jqXHR, settings) {
    // 통신이 완료된 후 처리할 내용 (생략가능)
  },
});

• type

  • post 또는 get 사용 데이터를 전달할 method 방식을 선택

• global

  • .ajaxSend(), .ajaxError() 의 전역 이벤트 핸들러를 제어 함, 기본값은 true

• async

  • 동기, 비동기 방식 설정 기본값은 true, true면 모든 요청은 비동기 방식으로 동작
  • 크로스 도메인과 dataType이 jsonp인 경우는 동기방식을 지원하지 않음
  • 동기방식은 요청이 처리될 때까지 브라우저가 일시적으로 잠김

• url

  • 요청할 파일 주소

• dataType

  • 요청을 받은 데이터의 타입
  • xml, html, json, jsonp, script, text이 존재 (주로 text, html, json을 많이 씀)

• timeout

  • 요청 응답 대기 시간 기본적으로 .ajaxSetup()에서 설정한 값을 이용함
  • 지정한 시간 동안 응답이 없으면 error 발생 (대부분 설정하지 않음)

• cache

  • 기본값 true, 브라우저의 캐시 유무를 설정 false 설정하면 강제적으로 캐싱하지 않음
  • dataType이 jsonp, script일 경우에는 false 설정

• data

  • 요청 시 보낼 데이터
  • .serializeArray() 또는 .serialize()로 전송 가능

참고 사이트

• https://api.jquery.com/jQuery.ajax/