PHP에서 AJAX 사용하는 방법

배진오

@baealex

소비적인 일보단 생산적인 일을 좋아합니다.

이 글은 안타깝게도(?) 구글에서 PHP AJAX라고 검색하면 제일 상단에 나온다. 많은 사람들에게 잘못된 정보를 제공하는 것은 아닐까 심히 걱정된다. 여하지간 최대한 내가 아는 정보와 활용할 수 있는 방안을 나열하여 적어도 이 글을 방문한 사람들이 AJAX라는 개념에 대해서 알아가길 기원한다. 이 글의 대상은 AJAX에 대한 개념을 알고자하는 사람들이다.


AJAX

필자는 어떤 플랫폼이나 언어를 공부할 땐 토이 프로젝트로 메모장을 제작한다. PHP에서도 마찬가지로 메모 기능이 가능한 토이 프로젝트를 진행하고 있었는데 웹 개발이 처음인지라 메모를 작성할 때 페이지가 새로고침되어 작성된 메모가 덧붙혀지는 전통적인 구조로 제작되었다.

처음에는 웹사이트의 속도가 빨랐기에 새로고침돼도 자연스러운 듯 보였으나 CloudFlare 등을 적용한 후 매우 느리게 페이지가 로딩되었다. 이걸 어떻게 개선할 수 있을까 고민하다가 AJAX라는 존재를 알게 되었다.


AJAX가 적용된 메모 기능


AJAX는 Asynchronous Javascript and XML의 줄임말이다. XML, JSON을 비롯해 문자열등을 비동기로 주고받을 수 있다. 필자가 생각하기에 AJAX를 원활하게 사용하려면 백엔드 언어에 대한 지식보다는 JavaScript에 대한 지식이 필요하다. 백엔드는 데이터를 제공할 뿐 데이터를 요청하고 표현하는 것은 결국 프론트에서 일어나기 때문이다. 이 글에선 AJAX 통신을 비롯한 필수적이고 최소한의 JS만을 다룬다. 또한 AJAX 통신은 jQuery 라이브러리를 활용하였다.

그런데 잠깐 비동기? 비동기에 대해서 생소한 사람도 있을거라 생각하는데 비동기란 요청을 후 응답을 기다리지 않는다. 응답이 오면 그때 응답에 대한 결과를 처리한다. 파이썬이나 PHP로만 제작된 웹페이지는 근본적으로 동기다. 사용자가 페이지를 로딩하면 DB를 읽어오고 페이지를 렌더링한 후 모든 요청에 대한 응답이 생성되면 로딩이 끝난다. 반면 비동기로 구현한 경우 사용자가 페이지를 로딩하면 일단 페이지를 보여주고 각각의 항목은 비동기로 요청을 주고 받아 응답이 오는 순서대로 페이지를 랜더링하여 실직적으로 사용자가 더욱 빠르게 로딩되었다고 느낄 수 있다.

AJAX를 사용할 때 기억해야 할 점은 백엔드에선 '필요한 부분'만 제공해주면 되고 자바스크립트에서 그 '필요한 부분'만을 가져와 '필요한 부분'에 붙혀주면 된다. 전통적으로 PHPHTML 내부에 삽입하여 프로그래밍하는데 AJAX를 활용하면 완전히 분리한 상태로 개발할 수 있다.

대략 그림으로 표현하면 위와같다.

  1. HTTP 통신엔 GET, POST, DELETE, PUT 등을 비롯한 HTTP Method가 존재한다.
  2. 이 메서드를 이용하여 특정 URI에 요청을 보낸다.
  3. 특정 URI에서 결과를 반환한다.
  4. 원하는 위치에 결과를 렌더링한다.


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('Bae Jino');
?>
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의 전부다. 나머지는 다 응용 😎 다만 위 경우 아이디를 남발하고 있으므로 관리하기가 힘들어 질 수 있다. formname을 이용하여 값을 전달해 주는게 좋다.

<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 참 쉽죠?


😥 작성된 댓글이 없습니다!
댓글을 작성하기 위해 로그인이 필요합니다.