PHP - AJAX 소개

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 PHP와 함께 AJAX의 흥미로운 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 저는 여러분이 코드를 한 줄도 적지 않았더라도 이 여정을 안내해 드리겠습니다. 그럼 커피(또는 차, 당신이 좋아하는 것이라면)를 한 잔 마시고, 시작해 보겠습니다!

PHP - AJAX Introduction

AJAX는 무엇인가요?

AJAX는 비동기 JavaScript와 XML을 의미합니다. 이 이름이 복잡하게 들리지 않도록 주의하세요! 실제로는 웹 페이지를 더욱 상호작용적이고 사용자 친화적으로 만드는 매우 쉬운 기술입니다.

상상해 보세요, 당신이 식당에 있을 때. AJAX가 없다면, 메뉴를 볼 때마다 테이블을 떠나서 대리점으로 가서 메뉴를 요청하고 그后再 돌아오는 과정을 반복해야 합니다. AJAX가 있다면, 웨이터가 당신이 필요한 정보만 가져다주는 것처럼, 전체 식사 경험을 방해하지 않고 정보를 얻을 수 있습니다.

웹의 용어로, AJAX는 웹 페이지가 전체 페이지를 새로 고침하지 않고 서버로부터 데이터를 요청하고 받을 수 있게 합니다. 마법 같지만, 그 작동原理을 이해할 수 있다는 점에서 더욱 훌륭합니다!

AJAX의 작동 방식

웹 페이지에서 이벤트가 발생합니다 (예: 버튼을 클릭하는 것)
JavaScript는 XMLHttpRequest 객체를 생성합니다
XMLHttpRequest 객체는 웹 서버로 요청을 보냅니다
서버는 요청을 처리합니다
서버는 웹 페이지로 응답을 보냅니다
JavaScript는 응답을 읽습니다
JavaScript는 응답에 따라 적절한 작업을 수행합니다

AJAX를 실행하려면 무엇이 필요한가요?

AJAX를 실행하려면 다음 세 가지 주요 요소가 필요합니다:

JavaScript와 XMLHttpRequest 객체를 지원하는 웹 브라우저
AJAX 요청을 처리할 수 있는 웹 서버 (예: Apache)
서버 측 프로그래밍 언어 (우리의 경우 PHP)

좋은 소식! 대부분의 현대 웹 브라우저는 AJAX를 지원하기 때문에, 우리는 이미 세 분의 일을 했어요!

환경 설정

코드 작성을 시작하기 전에, 모든 것이 제대로 설정되어 있는지 확인해 보겠습니다:

XAMPP를 설치합니다 (Apache 웹 서버와 PHP가 포함됨)
XAMPP 설치 디렉토리의 htdocs 폴더에 새 폴더를 만듭니다
좋아하는 텍스트 편집기를 엽니다 (저는 Visual Studio Code를 좋아합니다)

이제 모든 준비가 완료되었으니, 코드를 작성해 보겠습니다!

첫 번째 AJAX 요청

간단한 예제로 시작해 보겠습니다. 클릭할 때마다 서버로부터 인사말을 가져와서 페이지를 새로 고침 없이 표시하는 버튼을 만들겠습니다.

먼저 index.html 파일을 생성합니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First AJAX Request</title>
</head>
<body>
<h1>Welcome to AJAX!</h1>
<button onclick="getGreeting()">Get Greeting</button>
<p id="greetingText"></p>

<script>
function getGreeting() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("GET", "greeting.php", true);
xhttp.send();
}
</script>
</body>
</html>

이를 다음과 같이 설명할 수 있습니다:

버튼에 onclick 이벤트를 설정하여 getGreeting() 함수를 호출합니다.
getGreeting() 함수에서 XMLHttpRequest 객체를 생성합니다.
서버 응답을 처리할 함수를 설정합니다.
greeting.php에 대한 연결을 여시고 요청을 보냅니다.

다음으로 greeting.php 파일을 생성합니다:

<?php
$greetings = array("Hello!", "Bonjour!", "Hola!", "Ciao!", "Konnichiwa!");
echo $greetings[array_rand($greetings)];
?>

이 PHP 스크립트는 단순히 랜덤한 인사말을 반환합니다.

버튼을 클릭하면, JavaScript는 greeting.php에 요청을 보내고, 이에 응답하여 랜덤한 인사말을 반환합니다. 그런 다음 JavaScript는 페이지를 새로 고침 없이 이 인사말을 표시합니다!

서버로 데이터 전송

이제 데이터를 가져오는 방법을 배웠으니, 서버로 데이터를 보내는 방법을 시도해 보겠습니다. 이름을 서버로 보내고 개인 맞춤형 인사말을 받는 간단한 폼을 만들겠습니다.

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 Form Example</title>
</head>
<body>
<h1>Personalized Greeting</h1>
<input type="text" id="nameInput" placeholder="Enter your name">
<button onclick="getPersonalizedGreeting()">Get Greeting</button>
<p id="greetingText"></p>

<script>
function getPersonalizedGreeting() {
var name = document.getElementById("nameInput").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("greetingText").innerHTML = this.responseText;
}
};
xhttp.open("POST", "personalized_greeting.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("name=" + name);
}
</script>
</body>
</html>

그리고 새로운 personalized_greeting.php 파일을 생성합니다:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$greetings = array("Hello", "Bonjour", "Hola", "Ciao", "Konnichiwa");
$greeting = $greetings[array_rand($greetings)];
echo "$greeting, $name!";
}
?>

이 예제에서 우리는 POST 요청을 사용하여 이름을 서버로 보냅니다. PHP 스크립트는 이 이름을 사용하여 개인 맞춤형 인사말을 생성합니다.

일반 AJAX 메서드

다음은 자주 사용하는 AJAX 메서드 표입니다:

메서드	설명
open()	요청의 유형과 URL을 지정합니다
send()	서버로 요청을 보냅니다
setRequestHeader()	헤더에 레이블/값 쌍을 추가합니다

결론

축하합니다! 여러분은 PHP와 함께 AJAX의 세상으로 첫 걸음을 뗐습니다. 우리는 비동기 데이터 전송과 수신의 기본을 다루었고, 많은 현대 웹 애플리케이션의 기초가 되는 내용을 배웠습니다.

코드를 배우는 것은 새로운 언어를 배우는 것과 같습니다. 시간과 연습이 필요하지만, 작성한 코드마다 더 나아갑니다. 실험하고, 실수하고, 그것을 배워 나가지 마세요.

저의 교육 경험에서 많은 학생들이 초보자에서 숙련된 개발자로 변모했습니다. 중요한 것은 인내와 호기심입니다. 그러므로 계속 코딩하고, 배우고, 언젠가 놀라운 상호작용형 웹 애플리케이션을 만들 수 있을 때까지 노력하세요!

다음 시간에는 더 고급 AJAX 기술과 다양한 데이터 처리 방법에 대해 탐구해 보겠습니다. 그때까지 즐겁게 코딩하세요!

Credits: Image by storyset