AJAX

sliver gun·2024년 11월 2일
ajax
2

공부

목록 보기
1/3

🔰목차

  1. 서론
  2. AJAX란?
  3. 그럼 비동기는 뭐지?
    1. 비동기의 장점
  4. AJAX의 동작원리
  5. AJAX 예시
    1. jQuery 없이 구성한 Ajax
    2. jQuery를 이용한 Ajax
  6. XMLHttpRequest란?
    1. XMLHttpRequest의 속성
    2. XMLHttpRequest의 메서드
  8. 결론
  9. 레퍼런스

서론

RestController를 통한 데이터 전송 방식에 대해 찾아보면서 AJAX 방식을 쓰게 되었는데 이 개념에 대해 자세히 공부해보기 위해 이 글을 작성하게 되었다.

AJAX란?

Ajax란 Asynchronous JavaScript and XML의 약자이다.

비동기로 서버와 브라우저가 데이터를 교환할 수 있도록 하는 기법이다.

따라서 Ajax를 사용하면 페이지를 전체 다 새로고침하지 않아도, 일부만 갱신이 가능하다.

그럼 비동기(Asynchronous)는 뭐지?

비동기 즉, 동시에 처리하지 않는다는 뜻이다.

동기 방식은 요청이 들어오면 즉시 그 요청에 대한 일을 처리하여 응답하기 때문에 요청 기준 동시에 처리하는 것이지만 비동기 방식은 일단 요청을 받고 나서도 응답을 기다리지 않고 다음 요청을 처리할 수 있다.

비동기의 장점

페이지를 리로드 할 때 모든 리소스를 리로드하지 않고 일부만 리로드해서 불필요한 리소스 낭비를 방지할 수 있다.

AJAX의 동작 원리

기존 웹 프로그램의 동작원리는 다음과 같다.

  • 이벤트가 발생하면 HttpRequest를 생성, 요청
  • 서버에서 HttpRequest를 처리하고 응답을 생성
  • 생성된 응답을 HTML 및 CSS 데이터로 전송
  • 받은 데이터를 기반으로 웹 페이지 전체 리로딩

AJAX를 이용한 웹 프로그램의 동작 원리는 다음과 같다.

  • 이벤트가 발생하면 자바스크립트 호출해 XMLHttpRequest 객체 생성 및 요청
  • AJAX 요청 처리 후 응답 생성
  • 생성된 응답을 HTML, XML, JSON 데이터로 전송 (필요한 데이터만 전송)
  • 받은 데이터를 기반으로 웹 페이지의 일부분을 리로딩

AJAX 예시

jQuery 없이 구성한 Ajax

function loadData() {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/data", true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById("result").innerText = xhr.responseText;
        }
    };
    xhr.send();
}
  • XMLHttpRequest 객체를 사용하여 AJAX 요청을 수행한다.
  • xhr.onreadystatechange는 요청 상태 변화를 감지하여, xhr.readyState와 xhr.status가 모두 완료 상태(4)와 성공 코드(200)일 때 데이터를 업데이트한다.

jQuery를 이용한 Ajax

Ajax 프레임워크는 Ajax 개발을 용이하게 하기 위해 다양한 기능을 미리 포함한 개발 환경을 말한다. 대표적인 Ajax 프레임워크로는 Prototype, script.aculo.us, dojo, jQuery 등이 있다.

이 중 jQuery를 사용한 예시 코드를 살펴보겠다.

$(document).ready(function() {
    $("#getDataBtn").click(function() {
        $.ajax({
            url: "/data",
            type: "GET",
            success: function(response) {
                $("#result").text(response);
            },
            error: function(xhr, status, error) {
                $("#result").text("Error: " + error);
            }
        });
    });
});
  • $("#getDataBtn").click()은 버튼 클릭 시 실행되는 jQuery 이벤트 리스너이다.
  • $.ajax 메서드를 사용하여 서버에 GET 요청을 보낸다.
  • 요청 성공 시 success 콜백이 실행되어 데이터를 업데이트하며, 실패 시 error 콜백이 실행된다.

XMLHttpRequest란?

XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용된다.

var xhr = new XMLHttpRequest();

XMLHttpRequest의 속성

  • readyState: 요청 상태를 나타내며, 0부터 4까지의 숫자로 표현한다.
    • 0 (UNSENT): XMLHttpRequest 객체가 생성됨.
    • 1 (OPENED): open() 메서드가 호출됨.
    • 2 (HEADERS_RECEIVED): 서버가 요청을 수신하고 응답 준비가 됨.
    • 3 (LOADING): 요청을 처리하는 중 (데이터를 수신하는 중).
    • 4 (DONE): 요청 완료, 응답 데이터 준비됨.
  • status: HTTP 상태 코드를 반환한다. (예: 200은 성공, 404는 페이지를 찾을 수 없음)
  • responseText: 서버에서 받은 응답 텍스트를 반환한다.
  • responseXML: XML 형식의 응답일 경우, XML 객체로 반환한다.

XMLHttpRequest의 메서드

  • open(method, url, async): HTTP 요청을 초기화합니다.
    • method: 요청 메서드 (예: GET, POST 등)
    • url: 요청을 보낼 URL
    • async: 비동기 여부 (true 또는 false)
  • send(body): 서버로 요청을 전송합니다.
  • setRequestHeader(header, value): 요청 헤더를 설정합니다.

jQuery와 Ajax

Ajax로 위와 같이 효율적으로 처리할 수 있지만 코드가 길어질 수 있기에 보통 jQuery로 이 문제를 해결하게 된다.

$.ajax()

$.ajax() 메소드는 모든 제이쿼리 Ajax 메소드의 핵심이다.

$.ajax(URL[,option])

위 코드에서 URL은 Client가 HTTP 요청을 보낼 서버 주소이다.

option은 HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합이다.

$.ajax()의 옵션을 설명하는 예제 코드는 다음과 같다.

$.ajax({
    url: "/examples/media/request_ajax.php", // 클라이언트가 요청을 보낼 서버의 URL 주소
    data: { name: "홍길동" },                // HTTP 요청과 함께 서버로 보낼 데이터
    type: "GET",                             // HTTP 요청 방식(GET, POST)
    dataType: "json"                         // 서버에서 보내줄 데이터의 타입
})

// HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.

.done(function(json) {
    $("<h1>").text(json.title).appendTo("body");
    $("<div class=\"content\">").html(json.html).appendTo("body");
})

// HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.

.fail(function(xhr, status, errorThrown) {
    $("#text").html("오류가 발생했습니다.<br>")

    .append("오류명: " + errorThrown + "<br>")
    .append("상태: " + status);
})

// HTTP 요청이 성공하거나 실패하는 것에 상관없이 언제나 always() 메소드가 실행됨.

.always(function(xhr, status) {
    $("#text").html("요청이 완료되었습니다!");
});

$.get()

$.get()은 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 메소드이다.

$.get(URL[,callback]);

URL는 Client가 HTTP 요청을 보낼 서버의 주소다.

Callback 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의한다.

$(function() {
    $("#requestBtn").on("click", function() {
        // GET 방식으로 서버에 HTTP 요청을 보냄.
        $.get("/examples/media/jquery_ajax_data.txt",
        function(data, status) {
            $("#text").html(data + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.
        });
    });
});

$.post()

$.post()는 Ajax를 이용하여 POST 방식의 HTTP 요청을 구현한 메소드이다.

$.post(URL[,data][,callback]);

URL는 Client가 HTTP 요청을 보낼 서버의 주소다.

Data는 HTTP 요청과 함께 서버로 보낼 데이터를 전달한다.

Callback 함수는 HTTP 요청이 성공했을 때 실행할 함수를 정의한다.

$(function() {
    $("#requestBtn").on("click", function() {
        // POST 방식으로 서버에 HTTP 요청을 보냄.
        $.post("/examples/media/request_ajax.php",
            { name: "이순신", grade: "A+" },             // 서버가 필요한 정보를 같이 보냄.
            function(data, status) {
                $("#text").html(data + "<br>" + status); // 전송받은 데이터와 전송 성공 여부를 보여줌.
            }
        );
    });
});

결론

AJAX의 기본적인 원리나 개념같은 것들은 어느정도 정립이 되었는데 jQuery를 통해 Ajax를 본격적으로 사용하는 것은 직접 코드를 짜보면서 연습하는 것이 필요할 것 같다.

레퍼런스

https://tcpschool.com/ajax/ajax_intro_basic

https://velog.io/@surim014/AJAX란-무엇인가

https://daegwonkim.tistory.com/m/445

profile
sliver gun
다음 포스트

jQuery

0개의 댓글