수강 신청을 할 때 타임시커등 다양한 프로그램을 이용하여 서버 시간을 가져옵니다. 수강 신청 때 시간 편차에 예민하기 때문에 서버 시간을 알아 오는 것이 중요합니다. 자바스크립트를 이용하여 간단하게 서버 시간을 가져올 수 있습니다.
XMLHttpRequest
XMLHttpRequest 객체는 서버로부터 XML 데이터를 가져오는 데 사용합니다. 해당 객체를 이용하여 웹 페이지 로딩이 완료된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다.
여기서 XML은 extensible markup language의 약자로 HTML과 같은 마크업 언어입니다. HTML과 다른 점은 XML은 데이터를 저장하고 전송하는 목적으로 만들어져 있고, 사용자가 직접 정의할 수 있는 특징을 가지고 있습니다.
시간을 가져오는 방법
1. XMLHttpRequest 객체를 선언합니다.
var xmlHttp;
xmlHttp = new XMLHttpRequest();
사용에 앞서 XML 포맷으로 데이터를 가져올 예정으로 객체를 선언합니다.
2. 설정 후 서버 시간을 가져옵니다.
//XML 전송 INIT
xmlHttp.open('HEAD', window.location.href.toString(), false);
xmlHttp.setRequestHeader("ContentType", "text/html");
xmlHttp.send('');
//XML형식으로 서버의 시간을 가져옵니다
var serverDate = xmlHttp.getResponseHeader("Date");
var date = new Date(serverDate);
첫 줄부터 말하자면 open함수를 통하여 헤드 정보를 가져옵니다. 그 후 Request에 사용할 헤더 타입을 구성합니다. send 함수를 통하여 HTTP 형식으로 데이터를 요청합니다. 여기서 서버의 Date 정보를 가져와 이를 시간으로 사용합니다.
window.location.href.toString() 함수는 현 웹사이트의 링크를 가져옵니다. 다른 웹사이트 링크를 넣으면 다른 웹사이트의 정보를 가져올 수 있습니다. 아래에 통합 소스 코드는 다른 웹사이트의 정보를 가져옵니다.
3. 한국시간으로 변경합니다.
// UTC 시간 계산
var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000);
// UTC to KST (UTC + 9시간)
var KR_TIME = 9 * 60 * 60 * 1000;
var now = new Date(utc + (KR_TIME));
기존의 시간은 UTC 시간입니다. 대한민국의 시간을 변경하기 위해서는 (UTC+9)로 변경하여야 합니다.
예시 소스코드
var xmlHttp;
xmlHttp = new XMLHttpRequest();
//XML 전송 INIT
xmlHttp.open('HEAD', window.location.href.toString(), false);
xmlHttp.setRequestHeader("ContentType", "text/html");
xmlHttp.send('');
//XML형식으로 서버의 시간을 가져옵니다
var serverDate = xmlHttp.getResponseHeader("Date");
var date = new Date(serverDate);
// UTC 시간 계산
var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000);
// UTC to KST (UTC + 9시간)
var KR_TIME = 9 * 60 * 60 * 1000;
var now = new Date(utc + (KR_TIME));
다른 웹사이트의 시간을 가져오는 소스코드
function getTime() {
var xmlHttp;
var ServerTime = document.getElementById("link").innerText; //자유롭게 변경 가능
// 대부분의 웹브라우저 모두 지원합니다. (IE는 이전버전은 지원하지 않는다.)
xmlHttp = new XMLHttpRequest();
//XML 전송 INIT
xmlHttp.open('HEAD', ServerTime, false);
xmlHttp.setRequestHeader("ContentType", "text/html");
xmlHttp.send('');
//XML형식으로 서버의 시간을 가져옵니다
var serverDate = xmlHttp.getResponseHeader("Date");
var date = new Date(serverDate);
// UTC 시간 계산
var utc = date.getTime() + (date.getTimezoneOffset() * 60 * 1000);
// UTC to KST (UTC + 9시간)
var KR_TIME = 9 * 60 * 60 * 1000;
var now = new Date(utc + (KR_TIME));
alert(now); //자유롭게 변경 가능
}
해당 자바스크립트 함수는 다른 웹사이트의 시간을 가져오는 함수입니다. 위에 함수를 이용하여 서버의 시간을 가져오는 웹사이트를 만들었습니다.
See the Pen Untitled by kmsbio (@kmsbio) on CodePen.
'컴퓨터 > JavaScript' 카테고리의 다른 글
JavaScript (4) - FileReader를 이용하여 이미지 미리보기 구현 (0) | 2022.12.18 |
---|---|
JavaScript (3) - 텍스트를 인식하는 중복없는 뽑기제작 (0) | 2022.01.02 |
JavaScript (2) - 상단 이동 스크롤 버튼 구현 (0) | 2021.01.29 |
JavaScript (1) - 자바스크립트를 이용하여 시계 구현하기 (0) | 2020.12.14 |