[jQuery] $(document).ready() 함수, AJAX 요청을 함수로 정의하고 document.ready 내에서 호출

 

 

Q . $(document).ready() :
- jQuery에서 제공하는 함수로, * DOM(Document Object Model)이 완전히 로드되고 파싱된 상태일 때 실행됩니다.
- 페이지가 로딩되자마자 호출하는 함수 
따라서 DB에 저장되어 있는 데이터를 페이지가 로딩됨과 동시에 불러올 때 용이하다.

 

* DOM : 

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스. 
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 
이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현된다. 

 

- DOM이 준비되면 HTML 문서의 모든 요소(태그)는 JavaScript 코드에 의해 조작될 수 있습니다.
- 이 함수는 페이지의 모든 리소스(이미지, iframe 등)가 로드된 것과는 관계없이 실행됩니다.
- 주로 초기화 코드나 DOM 조작 코드를 이 함수 내에 포함하여 사용합니다.

 

출처 : https://www.tcpschool.com/javascript/js_dom_concept

 

 

 

Q.  AJAX 요청을 어떻게 구성(위치) 할 지가 궁금해졌다. 

1. AJAX 요청이 단순할 경우 : 
-  ajax 요청이 한 번만 사용되고, 특정 이벤트에서만 호출하는 경우는 
이벤트 핸들러 내에 함수를 정의하는 것이 코드의 가독성을 높이고 간편하다. 

페이지가 로드될 때 초기 데이터를 가져와야 하는 경우에는 
$(document).ready() 함수 내부에 AJAX GET 요청을 넣는 것이 좋다.
이 방법은 페이지의 DOM이 준비된 후에 안전하게 데이터를 가져오고, 사용자 경험을 개선하는 데 도움을 준다.

$(document).ready(function() {
    // 페이지가 로드되고 DOM이 준비된 후 실행될 코드

    // AJAX GET 요청을 포함
    $.ajax({
        type: 'GET',
        url: '/api/data',
        success: function(response) {
            // 성공적으로 데이터를 가져왔을 때 실행될 코드
            console.log('데이터를 성공적으로 가져왔습니다:', response);
            // 데이터를 화면에 표시하거나 처리하는 작업 수행
        },
        error: function() {
            // AJAX 요청에서 오류가 발생했을 때 실행될 코드
            console.error('데이터를 가져오는 중 오류가 발생했습니다.');
        }
    });

    // 여기에 초기화 코드나 추가적인 DOM 조작 코드를 포함할 수 있습니다.
    // 예를 들어, 페이지 로딩 후 특정 UI 요소를 초기화하는 등의 작업을 수행할 수 있습니다.
});

2. 재사용성이 필요한 경우, 함수를  $(document).ready() 밖에서 정의하고 이벤트 핸들러 내에서 호출
-  AJAX 요청이 여러 곳에서 사용되거나, 다른 이벤트에서도 사용될 수 있는 경우에는
함수를 밖에서 정의하고 이벤트 핸들러 내에서 호출하는 것이 좋다. 

// AJAX 요청을 담은 함수 정의
function postData() {
    $.ajax({
        type: 'POST',
        url: '/api/data',
        data: { key: 'value' },
        success: function(response) {
            console.log('데이터 전송 완료:', response);
            // 데이터 전송 후 처리 작업 수행
        },
        error: function() {
            console.error('데이터 전송 중 오류가 발생했습니다.');
        }
    });
}

$(document).ready(function() {
    // 클릭 이벤트 핸들러 내에서 함수 호출
    $('#submitBtn').click(function() {
        postData(); // 클릭 시 postData 함수 호출
    });
});

* 함수의 정의와 호출의 관계  : 함수의 정의와 호출은 코드의 실행 순서와는 독립적으로 작동한다

- 함수 정의(function postData() { ... }) :  함수가 정의되면 그 자체로는 실행되지 않고, 호출될 때까지 기다립니다.

- 함수 호출(postData()) :  postData() 함수를 호출하면 함수 내의 코드가 실행됩니다. 
이때 함수 호출 순서는 코드의 작성 순서와 관계 없이, 호출이 발생하는 시점에 따라 결정됩니다.

- 함수 정의와 호출의 독립성 :  함수는 정의된 시점에 코드 내에서 사용할 수 있습니다. 
함수가 어디에 정의되어 있는지는 함수를 호출하는 코드에 영향을 주지 않습니다.