이 글은 안타깝게도(?) 구글에서 PHP AJAX라고 검색하면 제일 상단에 나온다. 많은 사람들에게 잘못된 정보를 제공하는 것은 아닐까 심히 걱정된다. 여하지간 최대한 내가 아는 정보와 활용할 수 있는 방안을 나열하여 적어도 이 글을 방문한 사람들이 AJAX라는 개념에 대해서 알아가길 기원한다. 이 글의 대상은 AJAX에 대한 개념을 알고자하는 사람들이다.
AJAX
필자는 어떤 플랫폼이나 언어를 공부할 땐 토이 프로젝트로 메모장을 제작한다. PHP에서도 마찬가지로 메모 기능이 가능한 토이 프로젝트를 진행하고 있었는데 웹 개발이 처음인지라 메모를 작성할 때 페이지가 새로고침되어 작성된 메모가 덧붙혀지는 전통적인 구조로 제작되었다.
처음에는 웹사이트의 속도가 빨랐기에 새로고침돼도 자연스러운 듯 보였으나 CloudFlare 등을 적용한 후 매우 느리게 페이지가 로딩되었다. 이걸 어떻게 개선할 수 있을까 고민하다가 AJAX라는 존재를 알게 되었다.
AJAX가 적용된 메모 기능
AJAX는 Asynchronous Javascript and XML의 줄임말이다. XML, JSON을 비롯해 문자열등을 비동기로 주고받을 수 있다. 필자가 생각하기에 AJAX를 원활하게 사용하려면 백엔드 언어에 대한 지식보다는 JavaScript에 대한 지식이 필요하다. 백엔드는 데이터를 제공할 뿐 데이터를 요청하고 표현하는 것은 결국 프론트에서 일어나기 때문이다. 이 글에선 AJAX 통신을 비롯한 필수적이고 최소한의 JS만을 다룬다. 또한 AJAX 통신은 jQuery 라이브러리를 활용하였다.
그런데 잠깐 비동기? 비동기가 뭔지 잘 모르겠다면 이곳에서 "비동기란 무엇인가!" 부분을 참고해보자
AJAX를 사용할 때 기억해야 할 점은 백엔드에선 '필요한 부분'만 제공해주면 되고 자바스크립트에서 그 '필요한 부분'만을 가져와 '필요한 부분'에 붙혀주면 된다. 전통적으로 PHP는 HTML 내부에 삽입하여 프로그래밍하는데 AJAX를 활용하면 완전히 분리한 상태로 개발할 수 있다.
대략 그림으로 표현하면 위와같다.
- HTTP 통신엔 GET, POST, DELETE, PUT 등을 비롯한 HTTP Method가 존재한다.
- 이 메서드를 이용하여 특정 URI에 요청을 보낸다.
- 특정 URI에서 결과를 반환한다.
- 원하는 위치에 결과를 렌더링한다.
Hello, AJAX!
위 과정을 코드로 한번 표현해보자. HELLO WORLD 쯤으로 생각하고 보면된다. 코드의 디렉터리 구조는 아래와 같다.
- index.html
- myname.php
아래와 같은 결과를 출력할 것이다.
안녕하세요 제 이름은 Jino Bae입니다!
만일 전통적인 방법으로 구현한다면 아래와 같은 모습일 것이다.
index.php
<?php
$my_name = "Jino Bae";
?>
<p>안녕하세요 제 이름은 <?=$my_name?>입니다!</p>
그리고 아래는 AJAX를 활용하여 구현한 모습이다.
myname.php
<?php
echo('Jino Bae');
?>
index.html
<p>안녕하세요 제 이름은 <span id="name"></span>입니다!</p>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.ajax({
url: "myname.php",
type: "get",
}).done(function(data) {
$('#name').text(data);
});
</script>
전통적인 방법이면 1줄로 표현할 수 있을 걸 AJAX를 사용하니 뭔가 좀 복잡해 보이는 듯 하지만 곧 익숙해 질 것이며 편해질 것이다. PHP코드를 살펴보자. Jino Bae라는 문장을 출력하고 있다. HTML에선 JS를 통해 이 문자열을 가져왔음을 파악할 수 있다. 이번엔 좀 더 응용해보자.
Hello, Calculator!
이번엔 2개의 숫자를 입력한 뒤 서버에 전달하여 PHP에서 계산된 값을 HTML에 찍어볼 것이다.
calc.php
<?php
$a = $_GET['a'];
$b = $_GET['b'];
echo($a + $b);
?>
index.html
<input type="number" id="a">
<input type="number" id="b">
<button onclick="add()">더해줘!</button>
<p id="result"></p>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function add() {
$.ajax({
url: "calc.php",
type: "get",
data: {
a: $('#a').val(),
b: $('#b').val(),
}
}).done(function(data) {
$('#result').text(data);
});
}
</script>
값을 입력하여 버튼을 누름과 동시에 data에 작성된 값이 GET 방식을 이용하여 비동기로 데이터를 전달되었고 전달받은 값을 data로 받아와 원하는 위치에 그려줬다. 이게 AJAX의 전부다. 나머지는 다 응용 😎 다만 위 경우 아이디를 남발하고 있으므로 관리하기가 힘들어 질 수 있다. form과 name을 이용하여 값을 전달해 주는게 좋다.
<form>
<input type="number" name="a">
<input type="number" name="b">
</form>
<button onclick="add()">더해줘!</button>
<p id="result"></p>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
function add() {
$.ajax({
url: "calc.php",
type: "get",
data: $('form').serialize()
}).done(function(data) {
$('#result').text(data);
});
}
</script>
위와같이 form을 가져와 serialize라는 메서드를 이용하면 각각의 값을 보내준 것과 동일하게 동작시킬 수 있다. 그럼 전송도 관리도 좀 더 수월하게 진행할 수 있겠다. 만일 폼이 다수라면 폼에 아이디를 걸어주면 되겠다.
Hello, JSON!
AJAX의 경우 문자열을 주고받으며 사용할 수도 있지만 많은 경우 JSON을 사용한 멋진 통신(?)이 이뤄지고 있다. JSON을 이용하여 아래와 같은 결과를 생성해보자.
rel.php
<?php
$index = $_GET['index'];
$desc = ['Best Friend', 'Favorite Language', 'Best Musician'];
$name = ['Aram Kim', 'Python', 'IU'];
$json = json_encode(array('desc' => $desc[$index], 'name' => $name[$index]));
echo($json);
?>
PHP에서 다음과 같은 데이터를 순차적으로 전송해 주어 사용자가 서버의 다양한 데이터를 새로고침없이 열람할 수 있도록 할 수 있다.
index.html
<div class="board">
<p id="result">안녕하세요! 배진오입니다.</p>
<button onclick="next()" class="block-button">다음</button>
</div>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
var index = 0;
function next() {
$.ajax({
url: "rel.php",
type: "get",
data: {index: index++}
}).done(function(data) {
data = JSON.parse(data);
$('#result').text('저의' + data.desc + '은 ' + data.name + '입니다!');
if(index > 2) index = 0;
});
}
</script>
AJAX 참 쉽죠?
Ghost