해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: Ajax 란 무엇인가?
웹브라우저는 대단히 정적인 시스템이었습니다.
내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했고,
이러한 점은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각 되었습니다.
그러다 Ajax 개념이 도입되면서 모든 것이 바뀌었습니다.
Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 할 수 있게 해줍니다.
그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써
웹페이지의 로딩 없이 서비스를 사용할 수 있게 합니다.
Ajax는 Asynchronous JavaScript and XML의 약자입니다.
한국어로는 비동기적 자바스크립트와 XML 정도로 직역할 수 있는데,
자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미합니다.
이 때 사용하는 API가 XMLHttpRequest입니다.
그렇다고 꼭 XML을 사용해서 통신해야 하는 것은 아니고, 사실 XML 보다는 JSON을 더 많이 사용합니다.
(JSON 에 대해서는 다음 포스팅에서 다룰 예정입니당)
IE5,6 에서는 XMLHttpRequest 객체 대신 ActiveXObject("Msxml2.XMLHTTP.6.0")을 사용해야 합니다.
자바스크립트 기본 문법 :: XMLHttpRequest (GET 방식)
ajax 실습을 하기 위해서는 통신할 서버가 필요하기 때문에,
예제에서 부득이 하게 php 코드를 사용합니다.
아래 코드는 현재 시간을 출력하는 php 코드입니다.
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone("asia/seoul"));
echo $d1->format('H:i:s');
?>
아래 코드는 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>
코드를 분석해보도록 하겠습니다.
|
var xhr = new XMLHttpRequest(); |
위 코드로 인해 XMLHttpRequest 객체가 생성됩니다.
|
xhr.open('GET', './time.php'); |
open 을 이용해 접속하려는 대상을 지정합니다.
첫번째 인자는 form 태그의 method 에 대응하는 것으로 GET/POST 방식을 주로 사용합니다.
두번째 인자는 접속하고자 하는 서버쪽 리소스의 주소로 form 태그의 action 에 해당합니다.
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 엘리먼트의 하위로 삽입합니다.
이를 통해서 현재 서버에서 가져온 현재시간을 페이지 리로딩 없이 가져올 수 있습니다.
자바스크립트 기본 문법 :: XMLHttpRequest (POST 방식)
POST 방식으로 데이터를 전송하는 방법을 알아보도록 하겠습니다.
아래는 Ajax 를 이용해서 전송한 데이터를 받아 현재 시간을 출력해주는 서버쪽 구현입니다.
<?php
$d1 = new DateTime;
$d1->setTimezone(new DateTimezone($_POST['timezone']));
echo $d1->format($_POST['format']);
?>
이제 중요한 부분을 살펴보도록 하겠습니다.
<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>
xhr.open('POST', './time2.php');
데이터 전송방법을 GET에서 POST 로 변경했습니다.
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
서버로 전송할 데이터 타입의 형식(MIME) 을 지정해줍니다.
var data = '';
data += 'timezone='+document.getElementById('timezone').value;
data += '&format='+document.getElementById('format').value;
서버로 전송할 데이터를 형식에 맞추어 만듭니다.
유의할 점은, 이름=값&이름=값 ... 의 형태를 꼭 지켜야한다는 것입니다.
xhr.send(data);
send 메소드의 인자로 전송할 데이터를 전달합니다.