Soon Gud Story

[Jquery / Javascript / Json / AJAX] 자바스크립트를 이용하여 현재일자를 특정일자과 비교하여 페이지 이동하는 방법

자바스크립트로 Date개체를 사용하는 경우가 많습니다. 

Date 개체는 현재 보고 있는 컴퓨터 시간을 참조합니다.

즉 서버 시간이 아닌 사용하는 컴퓨터 시간을 확인 하는 겁니다.

이것은 자바스크립트가 서버언어가 아닌 클라이언트(사용자PC)에서 로드 되는 특성때문입니다.

그렇기 때문에 상대적으로 시간이 틀릴 수가 있습니다. 

수동으로 개인 PC시간을 변경하면 그값을 그대로 가져오는 것을 확인 할 수 있습니다. 

자바스크립트 자체로만으로는 서버시간을 표시하는 것은 할 수 없다는 이야기가 됩니다. 

java를 사용하면 서버에서 기동을 하는 언어이기 때문에 바로 가져 올수 있지만 java를 사용할 수 없는 경우에는

여기에 필요한것은 서버의 시간을 가져올 중간 매개체가 필요합니다.

그 매개체는 XMLHttpRequest 개체를 사용합니다. 

XMLHttpRequest 개체는 클라이언트와 서버 중간에서 요청과 결과를 전달하는 역활을 합니다. 

다만 XMLHttpRequst 개체는 웹 표준은 아닙니다. 

하지만 현재는 거의 모든 웹브라우저에서 지원하고 있습니다. 

JSON /chk/systemcheck.js 파일 데이터 내용

--------------------------------------------------------------------------------------

{

 "openyn":"Y"

,"startdaytime":"2018.09.28 18:00"

,"enddaytime":"2018.10.01 11:00"

,"syschkUri":"/systemCheck.html"

,"noticetxt":"스타필드 앱의 안정적인 사용을 위해

              \n시스템 점검을 진행하고 있습니다.

              \n이용에 불편함을 드린점 양해 부탁드립니다."

}

--------------------------------------------------------------------------------------

자바스크립트

--------------------------------------------------------------------------------------

$(document).ready(function() {   

        var st = srvTime();

        var today = new Date(st); // 현재시간

        console.log("http",today);

        $.getJSON("/chk/systemcheck.js", function(data){

            var openyn = data["openyn"];

            var startdaytime = new Date(data["startdaytime"]);

            var enddaytime = new Date(data["enddaytime"]);

            var noticetxt = data["noticetxt"];

            if(openyn == 'Y'){

                if(startdaytime<today && today<enddaytime){

                    location.href = data["syschkUri"]; 

                }

            }

        });

    });

    // 서버 시간 get

    var xmlHttp;

    function srvTime(){

        if(window.XMLHttpRequest){//분기 하지 않으면 IE에서만 작종

            xmlHttp = new XMLHttpRequest(); // IE 7.0 이상, 크롬, 파이어폭스 등 작동

            xmlHttp.open('HEAD',window.location.href.toString(),false);

            xmlHttp.setRequestHeader("Content-Type", "text/html");

            xmlHttp.send('');

            return xmlHttp.getResponseHeader("Date");

        }else if (window.ActiveXObject) { // 윈도우 IE 버전이 4,5,6 이라면 

            xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');

            xmlHttp.open('HEAD',window.location.href.toString(),false);

            xmlHttp.setRequestHeader("Content-Type", "text/html");

            xmlHttp.send('');

            return xmlHttp.getResponseHeader("Date");

        }

    }

--------------------------------------------------------------------------------------

자바스크립트로 srvTime() 함수를 생성합니다. 

srvTime() 함수는 XMLHttpRequest를 이용해서 HEAD에서 서버시간을 추출하는 함수 입니다. 

$(document).ready(function() {..}  는 페이지 호출을 하면 자동으로 실행되는 자바스크립트 함수 입니다. 

이 함수 안에서  서버시간을 추출해서 var today = new Date(st); 비교할 현재 시간 객체를 생성합니다. 

$.getJSON("/chk/systemcheck.js", function(data){..} 는 /chk/systemcheck.js 위치에 있는 JSON 파일을 읽어 객체 화 할수 있도록 합니다.

var openyn = data["openyn"]; 는 json 파일 데이터 중에 openyn키 값을 openyn 객체에 넣습니다. 

var startdaytime = new Date(data["startdaytime"]); 위와 마찬가지고 비교할 startdaytime 객체에 startdaytime 키값을 date 형식으로 넣습니다. 

if(startdaytime<today && today<enddaytime){..} 생성된 날짜 객체들을 비교합니다. 

비교값이 참일 경우 location.href = data["syschkUri"]; 실행이 되며 syschkUri키값인 /systemCheck.html 페이지로 이동을 합니다. 

감사합니다. 고맙습니다. 운이 좋습니다.