[Ajax] jQuery로 Ajax 구현 시 사용되는 설정값 모음

구현하는 '방법'에 대한 설명은 정말 많아서 입맞게 맞게 찾아서 볼 수 있다.

내가 이 글을 포스팅하는 이유는, Ajax 통신에 사용되는 설정값을 머릿속에 일목요연하게 정리하고 싶었기 때문이다.

정확히 알아야 "이렇게 하면 될 것 같은데.." 하는, '감'에 의존해서 구현하는 버릇을 없앨 수 있다고 생각한다. 

 

JQuery를 활용한 Ajax 통신

 

jQuery는 Ajax 통신을 위한 다양한 구현 방법을 제공한다. 그 중에서 Low-Level Interface 중의 하나인 jQuery.ajax() 형태로 구현하는 방법에 대해서 알아본다.

 

일반적으로 다음의 구조를 가진다.

설정에 사용되는 속성 이름 및 값은 XMLHttpRequest 객체를 통한 Ajax 통신에서 사용되는 속성 이름 및 값과 겹치는 부분이 많다.

 

$.ajax({
	
    [설정]
    
});

 

주요 설정값에 대해 알아보자.

 

accepts
- 기본값은 dataType 설정을 따른다.
- 요청 헤더의 Accept 속성을 정의한다. 표기 방식은 MIME type을 따른다.
- 요청 헤더의 Accept 속성을 참고해서 서버는 어떤 데이터 형식으로 응답해야 할지 결정한다.

contentType
- 기본값은 'application/x-www-form-urlencoded; charset=UTF-8'
- 서버에 전달할 데이터 형식을 정의한다.("이런 데이터를 보내겠습니다!")

crossDomain
- 기본값은 false
- 동일 출처 정책(Same-Origin Policy)을 위반한 크로스 도메인 형태의 요청을 가능하도록 하려면 true로 세팅한다.

* 크로스 도메인?
- 동일 서버 환경에서 요청-응답이 이루어지는 것이 일반적임. 
- 따라서 외부 서버에서 요청이 들어오면 보안상의 이유로 에러가 발생.

data
- 서버로 전달할 데이터 작성
- GET 메소드 사용 시 파라미터가 쿼리 스트링 형태로 URL에 포함되어 전달되므로 data를 URL에 붙여서 구현한다.

dataType
- 서버로부터 응답 받을 데이터 형식을 정의한다.
- 이 부분을 작성하지 않으면 jQuery에서 서버의 응답 형태를 보고 MIME type 표기 형식으로 정의한다.

error
- 요청 실패에 대한 함수를 정의한다.
- 함수에는 세 개의 인자가 정의될 수 있다.(jqXHR jqXHR, String textStatus, String errorThrown)
- jqXHR : JQuery XMLHttpRequest 객체. 따라서 XMLHttpRequest 속성을 호출할 수 있다.
- textStats :  요청 상태를 나타내는 문자열
[textStatus List]
"timeout"
"error"
"notmodified"
"success"
"parsererror"
- errorThrown : HTTP 에러가 발생했을 경우 해당 인자 사용 가능. 
"Not Found", "Internal Server Error"와 같은 HTTP 에러를 문자 형태로 반환.
- 사용자는 필요한 인자만 정의해서 사용할 수 있다.

success
- 요청 성공에 대한 함수를 정의한다.
- 함수에는 세 개의 인자가 정의될 수 있다.(Anything data, String textStatus, jqXHR jqXHR)
- data : 서버로부터 응답 받은 데이터 형식에 따라 값 처리를 유연하게 할 수 있다. 
  dataType이 정의되었다면, 정의된 데이터 형식의 값이 넘어올 것이다.
- textStatus : 요청 상태를 나타내는 문자열
[textStatus List]
"timeout"
"error"
"notmodified"
"success"
"parsererror"
- jqXHR : JQuery XMLHttpRequest 객체. 따라서 XMLHttpRequest 속성을 호출할 수 있다.
- 사용자는 필요한 인자만 정의해서 사용할 수 있다.

type
- 기본값은 GET
- 메소드를 지정한다.

url
- 호출 URL을 작성한다.
- 문자열 형태로 작성한다.

 

 

이미 위쪽에 작성되어 있지만, success 그리고 error 속성을 한 눈에 이해하기 쉽도록 크게 작성해야겠다.

success: function(data, textStatus, xhr) { ... }

• data : 서버로부터 응답 받은 데이터 형식에 따라 값 처리를 유연하게 할 수 있다.
           dataType이 정의되었다면, 정의된 데이터 형식의 값이 넘어올 것이다.
• textStatus : 요청 상태를 나타내는 문자열.
• jqXHR : JQuery XMLHttpRequest 객체. 따라서 XMLHttpRequest 속성을 호출할 수 있다.

[textStatus List]

• "timeout"
• "error"
• "notmodified"
• "success"
• "parsererror"

 

error: function(xhr, textStatus, errorThrown) { ... }

• jqXHR : JQuery XMLHttpRequest 객체. 따라서 XMLHttpRequest 속성을 호출할 수 있다.
• textStatus : 요청 상태를 나타내는 문자열.
• errorThrown : 이 인자는 HTTP 에러가 발생했을 경우 사용 가능. "Not Found", "Internal Server Error"와 같은 HTTP 에러를 문자 형태로 반환.

[textStatus List]

• "timeout"
• "error"
• "notmodified"
• "success"
• "parsererror"

 

참고

https://api.jquery.com/jQuery.ajax/#jqXHR

jQuery.ajax() | jQuery API Documentation

https://stackoverflow.com/questions/40072267/what-would-an-ajax-errorthrown-response-be

what would an ajax errorthrown response be