메시에 페이지 Ajax 도입

메뉴에서 [astro] 에 가서 [메시에]를 클릭하면 그냥 [메시에]가 있고, [메시에(Ajax)]라는게 지금 일시적으로 보인다.

비록 두 메뉴를 아무리 클릭해봤자 똑같이 보일 뿐이지만, 메뉴 이름 그대로 ajax를 도입한 쪽이 좀더 빠르게 느껴지고 반응이 신속하게 보일거다.

원래 https://hanury.net/wp/astro/messier?xsl=# 와 같이 xsl 번호를 GET으로 php를 넘겨주면 messier.php 페이지는 xml을 가져와서 xslt를 적용해서 html로 변환하고 클라이언트에게 넘긴다. 이 동안 클라이언트는 먹통이 된다. 그리고 새로 가져온 페이지는 전체 리로드 하게 되어 화면이 한번 꿈뻑하게 된다.

하지만 [메시에(Ajax)] 페이지는 전체 리로딩 없이 아래 표시한 데이터 영역만 치환될뿐 페이지는 리로드 되지 않는다. 페이지 내에서 생성한 XMLHttpRequest가 계속 서버랑 통신 할 뿐이다.

다음과 같이 요즌 뜬다는 ajax 스타일로 변경하였다.

1. 그래서 messier.php에서 xml을 가져와서 xslt를 적용해서 html로 변환하는 부분을 다른 php로 뽑아내고
2. 컨텐트 부분에 &t;div id=”messier”>를 삽입하고
3. 링크를 누르면 getMessier를 부르고 그 안에서 sendRequest를 다시 부르는데

   function getMessier(n){
       sendRequest(on_loaded, '&xsl='+n, 'GET', 
                   '/scripts/messier.php', true,true );
   }
   
           XMLHttpRequest 내장객체를 생성해서 1에서 따로 뽑아주었다는 php로 렌더링할 xslt정보와 함께 GET으로 호출
           이후 서버의 응답을 기다리는게 아니라

if(obj.readyState == 4 ){ on_loaded(obj); } Ajax의 A가 Asyncrous 이듯, onload 상태가 되었을때 수행할 callback 함수만 지정하고 다음 일을 계속 할수 있다. 물론 막간을 이용해서 anymated gif로 진행중임을 표시해주는 센스가 있으면 좋겠지만 난 그냥 귀찮아서 아무것도 안해줌. 그래도 마우스 휠 조자 안 먹는 상태보다는 낳지 뭐.

function on_loaded(ob){
    var res = decodeURIComponent(ob.responseText);
    document.getElementById('messier').innerHTML = res;
}

4. 서버에서 처리가 다 되면 호출 했던 XMLHttpRequest가 서버로 부터 응답을 받고
5. callback함수로 지정한 on_loaded함수가 호출 되고
6. 이 함수는
   의 innerHTML에 서버로 부터 받은 결과를 써 넣어준다.