22. Ajax

Ajax 란?

 

자바스크립트를 이용해 서버와 브라우저가 비동기 통신을 할 수 있는 기능이다.

 

전체적인 페이지 로딩이 아닌 일부분만 갱신하기 때문에 서버입장에서는 데이터를 적게사용하여 부담이 적고 빠르게 정보를 불러올 수 있다.

 

일반적인 Ajax의 과정은 다음과 같다.

 

브라우저의 요청 => 이벤트 핸들러에 의해 자바스크립트 호출 => XHR 객체를 이용하여 서버에 요청 => 서버는 전달받은 XHR을 가지고 Ajax 요청 처리 => 처리한 결과를 웹브라우저에 XML이나 Json 형태로 전달 => 서버로부터 전달받은 데이터를 가지고 웹페이지 일부분을 갱신하는 자바스크립트 호출

 

어쨌든 웹페이지의 일부분만을 갱신하는 기능이다.

코드로 확인해본다.

 

<p>time : <span id="time"></span></p>
<input type="button" value="execute" />

<script>
    document.querySelector('input').addEventListener('click', function(e){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', './time.php');
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                document.querySelector('#time').innerHTML = xhr.responseText;
            }
        }
        xhr.send();
    })
</script>

queryselector를 이용해 input 태그에 대한 엘리먼트를 지정하고 addEventListener로 이벤트를 설치한다.

function(e)는 click 이벤트 발생 시에 대한 콜백함수이다.

 

이 함수 내에 있는 XMLHttpRequest에 대한 간단한 내용만 먼저 정리해보면,

 

XMLHttpRequest는 서버와 상호작용하기 위해 사용되며 전체 페이지 새로고침 없이 URL로 부터 데이터를 받아온다.

 

open() 이라고 하는 메소드는 주소 및 동기화 여부를 지정하는 메소드이다.

여기선 GET 방식으로 tim.php를 요청하는 의미가 된다.

onreadystatechange란 XHR(XMLHttpRequest)객체가 readyState 속성값에 변화가 있을 시 호출할 함수를 정의한다.

readyState 라는 속성은 XHR 객체의 상태정보를 갖는다.

 

readyState 0 : 객체가 생성됨
readyState 1 : opened open 메소드 호출
readyState 2 : 모든 요청에 대한 응답이 도착함
readyState 3 : 요청한 데이터 처리중
readyState 4 : 요청한 데이터의 처리가 완료되어 응답할 준비 완료

 

이 상태정보를 통해 응답에 대한 확인이 가능하다.

 

다시 코드로 돌아가서,

XMLHttpRequest로 객체를 만들고 open 메소드를 이용해 GET 방식으로 time.php 에 요청하고,

readyState가 4 즉, 완료되었고 status 속성값이 200 즉, 서버에 문서가 존재한다면 

xhr.responseText 를 이용해 서버로 부터 응답받은 데이터를 문자열로 전달받고, time 이라는 id를 가진 엘리먼트 영역에 innerHTML로 HTML 코드를 삽입한다는 의미가 된다.

 

<?php

$d1 = new DateTime;
$d1->setTimezone(new DateTimezone('asia/seoul'));
echo $d1->format('H:i:s');

?>

time.php 에 대한 코드이다.

 

DateTime 객체를 생성하고 setTimezone으로 객체의 타임존을 설정한 후 "시:분:초" 형태로 echo를 이용해 출력한다.

 

첫 화면이다.

 

여기서 execute 버튼을 클릭하면 addEventListener로 설치한 함수가 호출되면서

 

time.php 의 내용을 불러와 span 태그영역 내에 HTML 코드로 가져온 것을 확인할 수 있다.

 

 

이번엔 POST 방식으로 데이터를 받아오는 코드를 확인해본다.

 

<p>time : <span id="time"></span></p>
<select id="timezone">
    <option value="Asia/Seoul">Asia/Seoul</option>
    <option value="America/New_York">America/New_York</option>
</select>
<select id="format">
    <option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
    <option value="Y-m-d">Y-m-d</option>
</select>
<input type="button" value="execute" />

<script>
document.querySelector('input').addEventListener('click', function(e){
    var xhr = new XMLHttpRequest();
    xhr.open('POST', './time.php');
    xhr.onreadystatechange = function(){
        document.querySelector('#time').innerHTML = xhr.responseText;
    }
    var data = '';
    data += 'timezone='+document.getElementById('timezone').value;
    data += '&format='+document.getElementById('format').value;
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);
})
</script>

select 태그를 만들어 value값을 선택한 후 data 라는 변수에 넣어 time.php 에 POST방식으로 보내는 것이다.

 

<?php

$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));
echo $d1->format($_POST['format']);

?>

 

POST로 전달된 data의 timezone을 DateTimezone에 설정하고,

format을 설정해서 echo로 출력하는 것이다.

 

기본 화면이며, select 에서 원하는 값을 지정한 후 execute를 클릭해보면,

 

위와 같이 데이터를 잘 가져오는 것을 확인할 수 있다.