AJAX GET vs POST: 차이점과 활용법 완벽 정리 (+실전 코드 예제)

AJAX POST, GET 등 옵션에 대한 설명

AJAX(Asynchronous JavaScript and XML)는 웹 페이지가 새로고침 없이 서버와 데이터를 주고받을 수 있도록 도와주는 기술입니다. 이를 통해 더 빠르고 동적인 웹 애플리케이션을 만들 수 있습니다. AJAX를 사용할 때, 데이터를 서버로 보내거나 받을 때 GET, POST 등 다양한 요청 방법을 사용할 수 있습니다. 이 글에서는 AJAX의 POST, GET 요청에 대해 알아보겠습니다.

 

 

1. AJAX GET 요청

GET 요청은 서버에서 데이터를 가져오는 데 사용됩니다. 보통 서버에 저장된 정보를 읽기만 할 때 사용되며, URL에 쿼리 문자열로 데이터를 전송합니다.

특징 :

• 데이터 전달 방식: URL에 파라미터를 추가하여 전송합니다.
• 보안: URL에 데이터가 노출되므로 민감한 데이터 전송에 적합하지 않습니다.
• 캐싱 가능: 서버에서 동일한 요청을 반복하는 경우 캐시된 데이터를 사용할 수 있습니다.

예시 코드 :

$.ajax({
  url: "example.php",
  type: "GET",
  data: { userId: 1 },
  success: function(response) {
    console.log(response);
  }
});

GET 요청은 URL을 통해 데이터를 전송하고, 서버는 요청된 데이터를 반환합니다.

 

 

2. AJAX POST 요청

POST 요청은 서버에 데이터를 보낼 때 사용됩니다. 클라이언트에서 서버로 데이터를 안전하게 전송할 수 있는 방법으로, 주로 회원가입, 로그인, 데이터 저장 등의 작업에 사용됩니다.

특징 :

• 데이터 전달 방식: 데이터는 요청 본문에 담겨 전송됩니다. URL에 데이터가 노출되지 않아 보안이 중요한 데이터 전송에 적합합니다.
• 보안: GET 요청보다 상대적으로 안전하지만, 여전히 HTTPS를 사용하는 것이 좋습니다.
• 캐싱 불가: POST 요청은 캐시되지 않습니다.

예시 코드 :

$.ajax({
  url: "submit.php",
  type: "POST",
  data: { name: "John", age: 30 },
  success: function(response) {
    console.log(response);
  }
});

POST 요청은 데이터가 HTTP 요청 본문에 포함되어 전송되므로, 데이터의 양과 보안이 중요한 작업에 적합합니다.

 

 

3. AJAX 옵션

옵션명	설명	예시
url	요청을 보낼 URL을 설정	url: "/submit.php"
type (또는 method)	요청 방식을 설정 (GET, POST, PUT, DELETE 등)	type: "POST"
data	서버로 전송할 데이터를 설정	data: { name: "John", age: 30 }
dataType	서버 응답 데이터 형식 설정 (json, xml, text 등)	dataType: "json"
success	요청 성공 시 호출되는 콜백 함수	success: function(response) { console.log(response); }
error	요청 실패 시 호출되는 콜백 함수	error: function(xhr, status, error) { console.log(error); }
complete	요청 완료 후 호출되는 콜백 함수	complete: function() { console.log("Request complete"); }
timeout	요청의 시간 제한 설정 (밀리초 단위)	timeout: 5000 (5초)
beforeSend	요청을 보내기 전에 실행되는 콜백 함수	beforeSend: function(xhr, settings) { console.log("Preparing to send request"); }
headers	요청에 추가할 HTTP 헤더 설정	headers: { "Authorization": "Bearer token" }
contentType	서버로 보내는 데이터의 Content-Type 설정	contentType: "application/json"
processData	데이터 직렬화 여부 설정 (파일 전송 시 false로 설정)	processData: false
crossDomain	크로스 도메인 요청 여부 설정	crossDomain: true
cache	요청 결과 캐시 여부 설정	cache: false
async	비동기적으로 요청할지 동기적으로 요청할지 설정	async: true (기본값)
xhr	XMLHttpRequest 객체를 커스터마이징할 수 있는 옵션	xhr: function() { var xhr = new XMLHttpRequest(); return xhr; }

 

 

4. GET과 POST의 차이점

항목	GET 요청	POST 요청
목적	서버에서 데이터를 가져옴	서버에 데이터를 전송
데이터 전달 방식	URL 쿼리 문자열로 전달	요청 본문에 데이터 포함
보안	URL에 데이터가 노출되어 보안 위험	데이터가 숨겨져 있어 보안에 적합
캐싱	가능	불가능
길이 제한	URL 길이에 제한 있음	제한 없음

 

AJAX는 웹 페이지에서 서버와 비동기적으로 데이터를 주고받을 수 있게 해주며, GET과 POST는 가장 흔히 사용되는 요청 방법입니다. 각 요청 방법은 그 목적에 맞게 사용해야 하며, 보안, 캐싱, 데이터 전달 방식 등의 측면에서 차이가 있습니다. 웹 개발 시 적절한 요청 방식을 선택하는 것이 중요합니다.