본문 바로가기
Programming/JavaScript

$.ajax 옵션

by 한 땀; 한 땀; 2023. 11. 8. 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="loadData">데이터 불러오기</button>
  <div id="result"></div>

  <script>
    $(document).ready(function() {
      // "데이터 불러오기" 버튼 클릭 시
      $("#loadData").click(function() {
        // $.ajax를 사용하여 서버에서 데이터를 가져오는 요청을 보냅니다.
        $.ajax({
          url: "https://jsonplaceholder.typicode.com/posts/1", // 요청할 URL
          method: "GET", // HTTP GET 요청
          data: { param1: "value1", param2: "value2" }, // 요청 데이터 (쿼리 문자열 또는 객체)
          contentType: "application/json", // 요청 데이터의 형식 (JSON)
          dataType: "json", // 응답 데이터의 형식 (JSON)
          success: function(data) {
            // 요청이 성공하면 이 함수가 호출됩니다.
            $("#result").html(`게시물 제목: ${data.title}`);
          },
          error: function() {
            // 요청이 실패하면 이 함수가 호출됩니다.
            $("#result").html("데이터를 불러오는 중 오류가 발생했습니다.");
          },
          beforeSend: function(xhr) {
            // 요청을 보내기 전에 호출됩니다.
            console.log("요청을 보내기 전입니다.");
          },
          complete: function(xhr, status) {
            // 요청이 완료되면 호출됩니다.
            console.log("요청이 완료되었습니다. 상태: " + status);
          },
          timeout: 5000, // 요청이 5초 동안 대기
          headers: {
            "Custom-Header": "Custom-Value" // 커스텀 헤더 추가
          },
          async: true, // 비동기 요청 (기본값)
          cache: true, // GET 요청의 응답을 캐시 (기본값)
          crossDomain: false, // 다른 도메인으로의 요청 허용 (기본값)
          xhrFields: {
            withCredentials: false // XMLHttpRequest 객체 설정
          },
          dataFilter: function(data, dataType) {
            // 응답 데이터를 처리하기 위한 사용자 정의 함수
            return data;
          }
        });
      });
    });
  </script>
</body>
</html>

 

url (URL 주소)

  • 요청을 보낼 URL 주소를 지정합니다. 서버에 요청할 웹 리소스의 경로를 지정합니다.

method (HTTP 요청 메서드)

  • HTTP 요청 메서드를 지정합니다. 주로 "GET", "POST", "PUT", "DELETE" 등이 사용됩니다.

data (요청 데이터)

  • 서버로 보낼 데이터를 지정합니다. 이는 쿼리 문자열 또는 객체 형태가 될 수 있으며, 주로 POST 요청에 사용됩니다.

contentType (요청 데이터 형식)

  • 요청 데이터의 형식을 지정합니다. 예를 들어, JSON 데이터를 보내는 경우 "application/json"을 사용할 수 있습니다.

dataType (응답 데이터 형식)

  • 서버에서 반환되는 응답 데이터의 예상 형식을 지정합니다. 주로 "json", "xml", "html" 등이 사용됩니다.

success (성공 콜백 함수)

  • 요청이 성공했을 때 호출할 콜백 함수를 정의합니다. 서버 응답 데이터를 처리하는 데 사용됩니다.

error (오류 콜백 함수)

  • 요청이 실패했을 때 호출할 콜백 함수를 정의합니다. 오류 처리와 관련된 로직을 구현하는 데 사용됩니다.

beforeSend (요청 전 콜백 함수)

  • 요청을 보내기 전에 호출할 콜백 함수를 정의합니다. 요청을 보내기 전에 추가 작업을 수행할 수 있습니다.

complete (완료 콜백 함수)

  • 요청이 완료되면 호출할 콜백 함수를 정의합니다. 요청이 완료되었을 때 추가 작업을 수행할 수 있습니다.

timeout (요청 시간 제한)

  • 요청이 얼마 동안 대기할지를 밀리초 단위로 설정합니다. 시간 내에 응답이 없을 경우 요청이 실패합니다.

headers (요청 헤더)

  • 요청에 추가할 사용자 정의 HTTP 헤더를 지정하는 객체입니다. 헤더 필드와 값을 설정할 수 있습니다.

async (비동기 여부)

  • 요청을 비동기적으로 보낼지 여부를 나타냅니다. 기본값은 true이며, 비동기로 요청을 보내려면 true로 설정합니다.

cache (캐시 사용 여부)

  • GET 요청의 응답을 캐시할지 여부를 나타냅니다. 기본값은 true이며, 응답을 캐시하려면 true로 설정합니다.

crossDomain (다른 도메인 허용)

  • 요청이 다른 도메인으로 갈 경우 설정합니다. 기본값은 false이며, 다른 도메인으로의 요청을 허용하려면 true로 설정합니다.

xhrFields (XMLHttpRequest 객체 설정)

  • XMLHttpRequest 객체에 대한 추가 설정을 제공하는 객체입니다. XMLHttpRequest에 관련된 고급 설정을 정의할 수 있습니다.

dataFilter (데이터 필터 함수)

  • 응답 데이터를 처리하기 위한 사용자 정의 함수를 설정할 수 있습니다. 응답 데이터를 변환 또는 필터링할 때 사용됩니다.

'Programming > JavaScript' 카테고리의 다른 글

$.each와 forEach  (0) 2023.11.08
클로저(Closeure)  (0) 2023.11.08
Open API 가져오기  (0) 2021.08.08

관련글

댓글

티스토리툴바