JavaScript에서 AJAX를 사용하고 페이지가 새로 고쳐지지 않도록 하는 방법

웹사이트가 점점 더 복잡해지고 더 높은 사용자 경험이 요구됨에 따라 AJAX(Asynchronous JavaScript and XML) 기술은 웹사이트 프런트엔드 개발에 필수적인 기술 중 하나가 되었습니다. 전체 페이지를 다시 로드하지 않고도 JavaScript를 통해 서버에 요청을 보낼 수 있습니다. 이를 통해 웹사이트가 더 빠르고 원활해지며 사용자는 어떤 방해도 느끼지 않습니다. 이 기사에서는 JavaScript에서 AJAX를 사용하고 페이지가 새로 고쳐지는 것을 방지하는 방법을 설명합니다.

1. AJAX 및 XMLHttpRequest

Javascript에서 AJAX를 사용하려면 비동기 요청 수행의 핵심이기 때문에 XMLHttpRequest 개체를 사용해야 합니다. XMLHttpRequest 개체는 내장된 JavaScript 개체로, 줄여서 XHR이라고도 합니다. HTTP 프로토콜을 통해 비동기 요청을 위한 API를 제공하므로 전체 페이지를 새로 고치지 않고도 서버 응답을 얻고, 요청을 처리하고, 웹 페이지를 업데이트할 수 있습니다.

다음은 XHR을 사용하여 요청하는 간단한 예입니다.

let request = new XMLHttpRequest();
request.open('GET', '/api/data', true);
request.onreadystatechange = function() {
   if(request.readyState === 4 && request.status === 200) {
      let response = JSON.parse(request.responseText);
      // 处理响应并更新页面
   }
};
request.send();

위 코드에서는 XMLHttpRequest 객체 인스턴스를 생성하고 open() 메서드를 사용하여 GET 요청을 엽니다. GET 요청을 연 후 XHR 객체의 ReadyState 속성이 변경될 때 호출되는 onreadystatechange 이벤트에 대한 핸들러 함수를 설정하고 서버 응답의 상태 코드가 200인지 확인합니다. 모든 것이 순조롭게 진행되면 응답 텍스트(일반적으로 JSON 형식)를 구문 분석하고 페이지에서 관련 데이터를 업데이트합니다.

2. AJAX in jQuery

jQuery를 사용하는 경우 AJAX를 사용하기 위해 내부적으로 보다 단순화된 API를 추상화합니다. 다음은 전체 jQuery AJAX 예제입니다.

$.ajax({
   url: '/api/data',
   type: 'GET',
   dataType: 'json',
   success: function(data) {
      // 成功后更新页面
   }
});

위 코드에서는 jQuery의 $.ajax() 메서드를 사용하여 GET 요청을 보내고 성공 시 핸들러 함수를 실행합니다. XMLHttpRequest 객체를 사용하는 것과 유사하게 성공 함수에서 페이지 콘텐츠를 업데이트할 수 있습니다.

3. AJAX를 사용하여 페이지 콘텐츠 업데이트

AJAX 요청이 성공적으로 응답을 반환하면 JavaScript를 사용하여 새 데이터를 반영하도록 페이지의 콘텐츠를 업데이트할 수 있습니다. 다음은 간단한 예입니다.

function updatePage(response) {
   let div = document.getElementById('data-display');
   let html = '';
   response.forEach(function(item) {
      html += '<div>' + item.name + '</div>';
   });
   div.innerHTML = html;
}

위 코드에서는 페이지 콘텐츠를 업데이트하는 updatePage() 함수를 정의합니다. 먼저 ID가 "data-display"인 div 요소를 찾고 내부적으로 HTML 문자열을 작성한 다음 해당 문자열을 해당 요소의 innerHTML로 설정합니다.

4. 중복 요청 방지

AJAX는 비동기식으로 실행되므로 사용자는 동일하거나 다른 여러 요청을 계속해서 시작할 수 있으며, 이로 인해 이러한 요청이 과도하게 인터리브되어 동시성 문제와 과도한 서버 로드가 발생하게 됩니다. 따라서 AJAX 요청을 보낼 때 중복 요청이 발생하지 않도록 주의해야 합니다.

중복 요청을 피하는 한 가지 방법은 태그(또는 플래그) 변수를 사용하여 이전 요청이 완료되었는지 확인하는 것입니다. 예:

let requesting = false;
function makeRequest() {
   if(requesting) {
      return;
   }
   requesting = true;
   $.ajax({
      url: '/api/data',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
         updatePage(data);
      },
      complete: function() {
         requesting = false;
      }
   });
}

위 코드에서는 "requesting" 변수를 사용하여 요청이 발행되었는지 식별합니다. 여러 요청을 피하기 위해 요청 보내기를 시작하기 전에 먼저 이 변수의 상태를 확인합니다. 변수가 true이면 반환되고 새 요청이 전송되지 않습니다. 요청이 성공하거나 실패하면 전체 콜백 함수에서 변수를 false로 재설정하여 새 요청을 허용합니다.

5. AJAX를 사용하여 동적 양식 구현

AJAX의 가장 일반적인 시나리오 중 하나는 동적 양식을 통해 데이터를 제출하고 전체 페이지를 새로 고치지 않고 서버 응답을 얻는 것입니다. 다음은 jQuery를 사용하여 동적 양식을 구현하는 예입니다.

<form id="my-form">
   <input type="text" id="name" name="name" placeholder="Your name">
   <button type="submit">Submit</button>
</form>
<div id="result"></div>

<script type="text/javascript">
   $("#my-form").submit(function(e) {
      e.preventDefault();
      let $form = $(this);
      let url = $form.attr('action');
      let formData = $form.serialize();
      $.ajax({
         type: "POST",
         url: url,
         data: formData,
         dataType: 'json',
         success: function(response) {
            $('#result').html("Thank you, " + response.name + "!");
         }
      });
   });
</script>

위 코드에서는 양식을 정의하고 이에 제출 이벤트를 바인딩합니다. 사용자가 양식을 제출하면 serialize() 메서드를 사용하여 양식 데이터를 수집하고 이를 AJAX 요청에 대한 데이터로 서버에 보냅니다. 서버가 JSON 응답을 성공적으로 처리하고 반환하면 페이지에서 ID가 "result"인 div 요소를 응답의 데이터로 업데이트합니다.

결론

보시다시피 AJAX를 사용하면 서버에 데이터를 더 쉽고 편안하게 보내고 받을 수 있습니다. 이 문서에서는 Javascript에서 AJAX를 사용하여 전체 페이지를 새로 고치지 않고 비동기 요청을 보내고 콘텐츠를 업데이트하는 방법을 설명합니다. 마지막으로 중복 요청을 방지하고 동적 양식 제출을 구현하는 방법에 대해 논의했습니다. AJAX는 웹 사이트를 더 빠르고 원활하게 만들고 사용자 경험을 크게 향상시킬 수 있는 매우 유용한 기술입니다.

위 내용은 JavaScript에서 AJAX를 사용하고 페이지가 새로 고쳐지지 않도록 하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!