▶ JavaScript AJAX

JavaScript AJAX Database

JavaScript AJAX with Database: 데이터베이스와 비동기 통신하기

*AJAX (Asynchronous JavaScript and XML)**를 사용하여 JavaScript와 데이터베이스를 연결하여 비동기적으로 데이터를 주고받는 방법을 설명하겠습니다. 이 가이드는 AJAX를 통해 서버 측의 데이터베이스에 접근하고 데이터를 읽거나 수정하는 방법을 설명합니다.

1. AJAX와 데이터베이스의 개요

AJAX를 사용하여 클라이언트 측에서 서버에 요청을 보내고, 서버는 데이터베이스와 상호작용하여 결과를 클라이언트에 반환합니다. 일반적으로 PHP, Node.js, Python 등의 서버 측 언어와 함께 사용되며, 데이터베이스는 MySQL, PostgreSQL, MongoDB와 같은 시스템을 사용할 수 있습니다.

1.1. 주요 특징

비동기 처리: 페이지를 새로 고치지 않고도 서버와 데이터를 주고받을 수 있습니다.
서버 측 처리: 서버에서 데이터베이스 쿼리를 실행하고 결과를 클라이언트로 전송할 수 있습니다.
다양한 데이터 형식: JSON 형식으로 데이터를 주고받아 쉽게 처리할 수 있습니다.

2. AJAX 요청을 통한 데이터베이스 접근

이 예제에서는 PHP와 MySQL을 사용하여 데이터베이스에 접근하는 방법을 보여드리겠습니다.

2.1. 데이터베이스 설정

우선, MySQL 데이터베이스에 간단한 테이블을 생성합니다. 이 예제에서는 users 테이블을 사용하여 사용자 정보를 저장합니다.

SQL 쿼리

CREATE DATABASE mydatabase;

USE mydatabase;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    age INT
);

users 테이블은 사용자 이름과 나이를 저장합니다.

2.2. PHP 스크립트 생성

다음으로, 데이터베이스에서 사용자 데이터를 가져오는 PHP 스크립트를 생성합니다. getUsers.php라는 파일을 생성하여 다음과 같은 내용을 작성합니다.

getUsers.php

<?php
header('Content-Type: application/json'); // JSON 응답 헤더 설정

// 데이터베이스 연결
$servername = "localhost";
$username = "root"; // 데이터베이스 사용자 이름
$password = ""; // 데이터베이스 비밀번호
$dbname = "mydatabase"; // 데이터베이스 이름

$conn = new mysqli($servername, $username, $password, $dbname);

// 연결 확인
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// 사용자 데이터 가져오기
$sql = "SELECT * FROM users";
$result = $conn->query($sql);

$users = array();
if ($result->num_rows > 0) {
    // 각 사용자 데이터를 배열에 추가
    while ($row = $result->fetch_assoc()) {
        $users[] = $row;
    }
}

// JSON 형식으로 응답
echo json_encode($users);

$conn->close(); // 데이터베이스 연결 종료
?>

이 PHP 스크립트는 데이터베이스에 연결하여 users 테이블의 모든 사용자 데이터를 JSON 형식으로 반환합니다.

2.3. AJAX 요청을 보내는 JavaScript 코드

다음으로, AJAX 요청을 보내는 JavaScript 코드를 작성합니다. 이 코드는 사용자가 버튼을 클릭하면 getUsers.php 스크립트에 요청을 보냅니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Database Example</title>
</head>
<body>
    <h1>User Data</h1>
    <button id="loadData">Load Users</button>
    <pre id="result"></pre>

    <script>
        document.getElementById('loadData').addEventListener('click', () => {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'getUsers.php', true);  // PHP 스크립트 요청

            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    const users = JSON.parse(xhr.responseText);  // JSON 응답 파싱
                    document.getElementById('result').textContent = JSON.stringify(users, null, 2);  // 결과 출력
                } else {
                    console.error('Error:', xhr.statusText);  // 오류 처리
                }
            };

            xhr.onerror = function() {
                console.error('Request failed');  // 요청 실패 처리
            };

            xhr.send();  // 요청 전송
        });
    </script>
</body>
</html>

이 코드는 사용자가 "Load Users" 버튼을 클릭할 때 getUsers.php 스크립트에 AJAX 요청을 보내고, 서버로부터 받은 사용자 데이터를 화면에 출력합니다.

3. CORS 고려사항

AJAX 요청을 통해 다른 출처의 PHP 파일에 접근할 경우, CORS (Cross-Origin Resource Sharing) 정책에 따라 서버에서 CORS 헤더를 설정해야 합니다. 그렇지 않으면 요청이 차단됩니다.

3.1. CORS 설정 예시

PHP 파일 상단에 다음과 같이 CORS 헤더를 추가하여 설정할 수 있습니다:

header('Access-Control-Allow-Origin: *'); // 모든 도메인 허용

4. 오류 처리

AJAX 요청 시 발생할 수 있는 다양한 오류를 처리하는 것이 중요합니다. onload 핸들러 내에서 상태 코드를 확인하여 오류를 처리할 수 있습니다. 또한 onerror 이벤트 핸들러를 사용하여 네트워크 오류를 처리합니다.

4.1. 오류 처리 예시

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 성공적 응답 처리
    } else {
        console.error('Error:', xhr.status, xhr.statusText);  // 상태 코드에 따른 오류 처리
    }
};

xhr.onerror = function() {
    console.error('Network error occurred');  // 네트워크 오류 처리
};

5. AJAX 요청의 활용 사례

AJAX 요청은 다양한 웹 애플리케이션에서 활용될 수 있습니다:

5.1. 사용자 입력 처리

사용자 입력 데이터를 서버로 전송하여 처리하고, 그에 따른 결과를 동적으로 표시하는 데 사용할 수 있습니다.

5.2. 데이터베이스와의 상호작용

서버에서 데이터베이스와 상호작용하여 데이터를 가져오거나 저장하는 기능을 구현할 수 있습니다.

5.3. 실시간 업데이트

사용자에게 실시간으로 정보를 업데이트하여 동적인 사용자 경험을 제공할 수 있습니다.

요약

JavaScript AJAX와 데이터베이스를 사용하면 비동기적으로 서버와 통신하고, 사용자 경험을 개선할 수 있는 강력한 방법입니다. 이를 통해 웹 애플리케이션의 성능과 응답성을 향상시킬 수 있습니다.

AJAX 요청: XMLHttpRequest를 사용하여 서버에 데이터 요청.
서버 측 처리: PHP를 사용하여 요청된 데이터를 처리하고 결과 반환.
데이터베이스와의 상호작용: 데이터베이스에서 데이터를 가져오거나 저장하는 기능 구현.
오류 처리: AJAX 요청에서 발생할 수 있는 오류를 적절히 처리.

JavaScript의 AJAX와 데이터베이스를 활용하여 동적인 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript