생활코딩 javascript 정리 - 네트워크 통신 - Ajax

42. 네트워크 통신  - Ajax

1) Ajax

웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다. 이것은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각 되었다. 

그러다 Ajax 개념이 도입되면서 모든 것이 바뀌었다. Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. 

Ajax는 Asynchronous JavaScript and XML의 약자다. 한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있는데 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다. 이 때 사용하는 API가 XMLHttpRequest이다. 그렇다고 꼭 XML을 사용해서 통신해야 하는 것은 아니다. 사실 XML 보다는 JSON을 더 많이 사용한다.

IE5,6 에서는 XMLHttpRequest 객체 대신 ActiveXObject("Msxml2.XMLHTTP.6.0")을 사용해야 한다. 여기서는 다루지 않는다.

1) XMLHttpRequest

이 때 사용하는 API가 XMLHttpRequest이다. 다음 예제를 보자.

본 예제를 실행하기 위해서는 서버 환경이 구축 되어 있어야 한다. 서버 구축에 대한 설명은 우리 수업의 범위를 넘어서기 때문에 여기서는 언급하지 않는다. 하지만 학습하는데는 큰 문제가 없다. 중요한 주제이기 때문에 꼭 학습하기 바란다.

time.php

아래 코드는 현재 시간을 출력한다.

<?php

$d1 = new DateTime;

$d1->setTimezone(new DateTimezone("asia/seoul"));

echo $d1->format('H:i:s');

?>

demo1.html

아래 코드는 time.php에 접속해서 현재 시간은 페이지에 표시한다.

<p>time : <span id="time"></span></p>

<input type="button" id="execute" value="execute" />

<script>

document.querySelector('input').addEventListener('click', function(event){

    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>

코드를 분석해보자.

1	var xhr = new XMLHttpRequest();

XMLHttpRequest 객체를 생성한다.

1	xhr.open('GET', './time.php');

접속하려는 대상을 지정한다. 첫번째 인자는 form 태그의 method에 대응하는 것으로 GET/POST 방식을 주로 사용한다. 두번째 인자는 접속하고자 하는 서버쪽 리소스의 주소로 form 태그의 action에 해당한다.

1 2 3 4 5

xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200){ document.querySelector('#time').innerHTML = xhr.responseText; } }

onreadystatechange 이벤트는 서버와의 통신이 끝났을 때 호출되는 이벤트이다. readyState는 통신의 현재 상태를 알려준다. 4는 통신이 완료되었음을 의미한다. status는 HTTP 통신의 결과를 의미하는데 200은 통신이 성공했음을 의미한다. responseText 프로퍼티는 서버에서 전송한 데이터를 담고 있다. 이것을 id가 time 엘리먼트의 하위로 삽입한다. 이를 통해서 현재 서버에서 가져온 현재시간을 페이지 리로딩 없이 가져올 수 있다.

2) POST 방식

post 방식으로 데이터를 전송하는 방법을 알아보자.

GET과 POST 방식에 대한 자세한 내용은 생활코딩 HTML 수업을 참고하자.

demo2.html

아래 예제는 시간대와 시간의 출력 형식을 지정하는 예제다. 

<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" id="execute" value="execute" />

<script>

document.querySelector('input').addEventListener('click', function(event){

    var xhr = new XMLHttpRequest();

    xhr.open('POST', './time2.php');

    xhr.onreadystatechange = function(){

        document.querySelector('#time').innerHTML = xhr.responseText;

    }

    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    var data = '';

    data += 'timezone='+document.getElementById('timezone').value;

    data += '&format='+document.getElementById('format').value;

    xhr.send(data);

});

</script>

중요한 부분을 살펴보자. 데이터 전송방법을 GET에서 POST로 변경했다. 

1	xhr.open('POST', './time2.php');

서버로 전송할 데이터 타입의 형식(MIME)을 지정한다. 

1	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

서버로 전송할 데이터를 형식에 맞게 만든다. 이름=값&이름=값... 의 형식을 지켜야 한다. 

1 2 3

var data = ''; data += 'timezone='+document.getElementById('timezone').value; data += '&format='+document.getElementById('format').value;

send 메소드의 인자로 전송할 데이터를 전달한다.

1	xhr.send(data);

time2.php

아래는 Ajax를 이용해서 전송한 데이터를 받아서 현재 시간을 출력해주는 서버쪽 구현이다. 

<?php

$d1 = new DateTime;

$d1->setTimezone(new DateTimezone($_POST['timezone']));

echo $d1->format($_POST['format']);

?>

출처 : https://opentutorials.org/course/1375/6843