유정잉

Ajax란 ? 본문

개발자 공부/🌷 리액트 공부

Ajax란 ?

유정♡ 2024. 6. 10. 19:12

AJAX란 무엇인가?

AJAX는 "Asynchronous JavaScript and XML"의 약자입니다. AJAX는 웹 페이지를 다시 로드하지 않고 서버와 데이터를 주고받기 위해 사용하는 기술입니다. 즉, 페이지의 특정 부분만을 업데이트할 수 있게 해줍니다. 이를 통해 웹 애플리케이션은 더욱 빠르고 사용자 친화적으로 동작할 수 있습니다.

 

AJAX의 주요 특징

  1. 비동기 처리 (Asynchronous): 서버 요청을 비동기적으로 처리하여 웹 페이지의 다른 작업이 중단되지 않도록 합니다. 즉, 서버로부터 데이터를 받는 동안에도 사용자는 페이지와 상호작용할 수 있습니다.
  2. XMLHttpRequest 객체: AJAX의 핵심 도구로, 자바스크립트 코드에서 서버와 데이터를 주고받을 수 있게 해줍니다. XML뿐만 아니라 JSON, HTML, 평문 텍스트 등 다양한 형태의 데이터를 처리할 수 있습니다.
  3. 부분 업데이트: 전체 웹 페이지를 다시 로드하지 않고도 페이지의 일부분만 업데이트할 수 있습니다.

AJAX를 왜 사용할까요?

  1. 빠른 응답 시간: 페이지 전체를 새로 고치지 않기 때문에 빠르게 데이터를 갱신할 수 있습니다.
  2. 사용자 경험 향상: 비동기 데이터 로딩으로 사용자 경험을 개선할 수 있습니다. 예를 들어, 사용자 입력을 기반으로 실시간 검색 결과를 보여줄 수 있습니다.
  3. 서버 부하 감소: 필요한 데이터만 서버에 요청하므로 서버의 부하를 줄일 수 있습니다.

 

AJAX 예시

간단한 예시로, 사용자가 버튼을 클릭했을 때 서버에서 데이터를 받아와 페이지의 일부분을 업데이트하는 경우를 생각해보겠습니다.

1. HTML 코드

<!DOCTYPE html>
<html>
<head>
    <title>AJAX Example</title>
</head>
<body>
    <button onclick="loadData()">데이터 로드</button>
    <div id="result">여기에 서버 데이터가 표시됩니다.</div>

    <script src="ajax_example.js"></script>
</body>
</html>

 

2. JacaScript

function loadData() {
    // XMLHttpRequest 객체 생성
    var xhr = new XMLHttpRequest();
    
    // GET 요청 설정
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

    // 요청이 완료되면 실행될 함수 정의
    xhr.onload = function() {
        if (xhr.status === 200) {
            // 서버로부터 받은 데이터를 HTML 요소에 표시
            document.getElementById('result').innerText = xhr.responseText;
        } else {
            console.error('Error: ' + xhr.status);
        }
    };

    // 요청 보내기
    xhr.send();
}

 

설명

  1. HTML 부분: 버튼을 클릭하면 loadData() 함수가 호출됩니다. 결과는 <div id="result">에 표시됩니다.
  2. JavaScript 부분: loadData() 함수는 XMLHttpRequest 객체를 생성하고, 서버에 GET 요청을 보냅니다. 요청이 완료되면 서버로부터 받은 데이터를 <div id="result">에 표시합니다.

이렇게 AJAX를 사용하면, 전체 페이지를 새로 고치지 않고도 필요한 데이터만 서버로부터 받아와 부분적으로 업데이트할 수 있습니다. 이로 인해 웹 애플리케이션은 더욱 효율적이고 사용자 친화적으로 동작하게 됩니다.

728x90

'개발자 공부 > 🌷 리액트 공부' 카테고리의 다른 글

리액트 [ 파일생성, Tailwind Css 사용, 인텔리제이 연동 ]  (0) 2024.07.01
🌷 리액트 [ 컴포넌트, JSX, Prop ]  (0) 2024.06.13
🌷 자바스크립트 복습 [ import&export, 객체, ... ]  (1) 2024.06.10
'개발자 공부/🌷 리액트 공부' Related Articles more