Ajax를 통해 시간을 나타내는 코드를 구현한다.
Ajax = Asynchronous JavaScript and XML의 약자로 비동기적으로 자바스크립트를 이용해서 서버와 통신하는 방식
어떤 페이지에 접속할 때, Ajax는 데이터를 가져오지 않고 사용자의 클릭과 같은 이벤트가 발생할 때, 데이터를 가져옴
아래 코드를 실행하면 실행버튼을 클릭할 때 php 데이터를 가져오는 것을 확인할 수 있다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>TIME : <span id=time></span></p>
<select id="timezone">
<option value="Asia/Seoul">Asia/Seoul</option>
<option value="America/New_York">America/NewYork</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="실행">
<script>
document.getElementById('execute').addEventListener('click',function(event){
var xhr=new XMLHttpRequest(); // XHR 객체 생성
xhr.open('POST', '../PHP/time.php'); // open 메소드로 전송방식, URL 초기화
xhr.onreadystatechange=function(){ // 요청이 완료되면
document.getElementById('time').innerHTML=xhr.responseText;
// 응답받은 값을 time 엘리먼트 안에 html 형식으로 저장
}
var data='';
data+='timezone='+document.getElementById('timezone').value;
data+='&format='+document.getElementById('format').value;
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 요청헤더의 Conente-type은 application/x-www-form-urlencoded 와 같은 형식으로 전달
xhr.send(data);
// data를 php 형식에 맞춰 키=값&키=값 형식으로 전달
// data=timezone=Asia/Seoul&format=Y-m-d 와 같이 전달하면 php에서 timezone, format 에 있는 값을 받을 수 있음
});
</script>
</body>
</html>
<?php
$d1=new DateTime; //시간객체 생성
$d1->setTimezone(new DateTimezone($_POST['timezone']));
// timezone을 set 할때 html에서 전송한 data 안의 timezone 의 값을 가져옴
echo $d1->format($_POST['format']);
// format 형식을 지정 후 xhr.responseText로 반환
?>
'Programming > JavaScript' 카테고리의 다른 글
| Open API 가져오기 (0) | 2021.08.08 |
|---|---|
| Node.js 웹서버 구축 (0) | 2021.08.08 |
| JSON이란? (0) | 2021.08.04 |
댓글