웹브라우저는 대단히 정적인 시스템이었다. 내용이 바뀌면 페이지 새로고침을 해서 내용을 새롭게 변경해야 했다. 이것은 웹이 전자 문서를 염두에 두고 고안된 시스템이기 때문에 당연하게 생각되었다.
Ajax는 웹 브라우저와 웹 서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹 페이지에 프로그래밍적으로 반영함으로써 웹 페이지의 로딩 없이 서비스를 사용할 수 있게 한다.
Ajax는 Ansynchronous Javascript and XML의 약자다. 한국어로는 비동기적 자바스크립트와 XML로 직역이 된다. 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고받는 방식을 의미한다. 이때 사용하는 API가 XMLHTTPRequest이다. 그렇다고 꼭 XML을 사용해서 통신해야 하는 것은 아니다. XML보다는 Json을 더 많이 사용한다.
<?php
$d1 = new DateTime;
$d1->setTimeZone(new DateTimezone('asia/seoul'));
echo $d1 -> format('H:i:s');
?>
GET 방식
<body>
<p> time: <span id="time"></span></p>
<input type="button" id="execute" value="execute"/>
<script>
document.querySelector('input').addEventListener('click', (event)=>{
let xhr = new XMLHttpRequest();
xhr.open('GET','./time.php'); // POST도 가능
xhr.onreadystatechange = ()=>{
if(xhr.readyState === 4 && xhr.status === 200){ // 4 = 모든 통신이 끝남 , 200 = 성공 (404 not found 요청한 리소스 존재하지 않음 )
document.querySelector('#time').innerHTML = xhr.responseText;
}
}
xhr.send();
})
</script>
POST 방식
<body>
<p> time: <span id="time"></span></p>
<input type="button" id="execute" value="execute"/>
<script>
document.querySelector('input').addEventListener('click', (event)=>{
let xhr = new XMLHttpRequest();
xhr.open('POST','./time.php');
xhr.onreadystatechange = () => {
document.querySelector('#time').innerHTML = xhr.responseText;
}
xhr.setRequestHeader('Content-Type', 'application/x-www-form-unlencoded');// POST 방식에 맞는 형태로 변환해줌
}
</script>
</body>
'개발' 카테고리의 다른 글
| [Javascript] document.Selection 과 Range 정리 (0) | 2021.08.16 |
|---|---|
| [Javascript] this에 대해서 (0) | 2021.08.16 |
| [Javascript] 이벤트 - 2 (0) | 2020.12.31 |
| [Javascript] 이벤트 (0) | 2020.12.30 |
| [Javascript] 문서의 기하학적 특성 (0) | 2020.12.23 |