ajax와 javascript를 이용하여 메뉴 구성

javascript에 대한 정리가 잘 되어 있는 Quirksmlode.org를 돌아다니다 보면 좌, 우에 show site menu라는 글이 보인다. 놀랍게도 이것을 클릭하면 메뉴가 나타난다. 더욱 놀라운 것은 메뉴 로딩중에는 로딩중이라는 메시지가 나온다!!!!
EAF2.js 분석을 하며 javascipt와 DOM구조에 대한 지식이 어느 정도 되었으므로 이번에는 이 메뉴부분에 대한 분석과 실제 내 사이트에 구성을 해보기로 한다.
quirksmode.js에 많은 기능 중 좌 상단의 메뉴만 보여주는 부분을 살펴보자(메뉴를 계층구조로 나타낼 수도 있으나 여기선 그냥 단층으로만 보자^^;)

전체적 호출구조를 보면 화면이 로딩되는 순간에 nav.txt에서 div tag들을 가져와 본문의 header부분에 적용시킨다. 그런 후 nav.txt에 있는 show site navigation을 클릭하면 지정된 html에서 메뉴구조를 가져와 좌측에 뿌려지게 된다. 여기서 nav.txt 및 메뉴 html 호출은 비동기식호출(ajax)기반으로 처리된다.

주요 부분의 js 소스를 살펴보면 window.onload = function () { sendRequest('nav.txt',setNavigation); } /* IMPORT TOC AND MAIN NAVIGATION */ function setNavigation(req) { var importHeader = document.getElementById('header'); if (!importHeader) return; importHeader.innerHTML = req.responseText; document.getElementById('menuLink').onclick = getMainNav; } /* MAIN NAVIGATION */ function getMainNav() { document.getElementById('waitMessageNav').style.display = 'block'; sendRequest('t_header.html',setMainNav); this.innerHTML = 'hide site navigation'; this.className = 'opened'; this.onclick = removeMainNav; return false; } function setMainNav(req) { var container = document.createElement('div'); container.innerHTML = req.responseText; //alert(req.responseText); var x = container.getElementsByTagName('div'); var siteMap; for (var i=0;i<x.length;i++) { if (x[i].id == 'menu') { siteMap = x[i]; break; } } if (!siteMap) return; document.getElementById('siteNav').appendChild(siteMap); container.innerHTML = ''; document.getElementById('waitMessageNav').style.display = 'none'; } function removeMainNav() { var navElement = document.getElementById('siteNav'); var nav = document.getElementById('menu'); if (nav) { navStorage = nav.parentNode.removeChild(nav); this.onclick = restoreMainNav; } else this.onclick = getMainNav; this.innerHTML = 'show site navigation'; this.className = ''; return false; } function restoreMainNav() { document.getElementById('siteNav').appendChild(navStorage); this.innerHTML = 'hide site navigation'; this.className = 'opened'; this.onclick = removeMainNav; return false; } /***************************************/ /* */ /* UTILITIES */ /* */ /***************************************/ /* GETELEMENTSBYTAGNAMES */ function getElementsByTagNames(list,obj) { if (!obj) var obj = document; var tagNames = list.split(','); var resultArray = new Array(); for (var i=0;i<tagNames.length;i++) { var tags = obj.getElementsByTagName(tagNames[i]); for (var j=0;j<tags.length;j++) { resultArray.push(tags[j]); } } var testNode = resultArray[0]; if (!testNode) return []; if (testNode.sourceIndex) { resultArray.sort(function (a,b) { return a.sourceIndex - b.sourceIndex; }); } else if (testNode.compareDocumentPosition) { resultArray.sort(function (a,b) { return 3 - (a.compareDocumentPosition(b) & 6); }); } //alert(); return resultArray; } /* XMLHTTP */ function sendRequest(url,callback,postData) { var req = createXMLHTTPObject(); if (!req){ return;} var method = (postData) ? "POST" : "GET"; req.open(method,url,true); req.setRequestHeader('User-Agent','XMLHTTP/1.0'); if (postData) req.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //req.setRequestHeader("content-type","application/x-www-form-urlencoded; charset=UTF-8;"); // req.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=euc-kr'); req.onreadystatechange = function () { if (req.readyState != 4) return; if (req.status != 200 && req.status != 304) { // alert('HTTP error ' + req.status ); return; } callback(req); } if (req.readyState == 4) return; req.send(postData); } function XMLHttpFactories() { return [ function () {return new XMLHttpRequest()}, function () {return new ActiveXObject("Msxml2.XMLHTTP")}, function () {return new ActiveXObject("Msxml3.XMLHTTP")}, function () {return new ActiveXObject("Microsoft.XMLHTTP")} ]; } function createXMLHTTPObject() { var xmlhttp = false; var factories = XMLHttpFactories(); for (var i=0;i<factories.length;i++) { try { xmlhttp = factories[i](); } catch (e) { continue; } break; } return xmlhttp; }
window onload시에 sendRequest를 호출한다. 이 메소드는 첫번째 파라메터를 ajax로 호출하여 처리되는 request를 두번째 파라메터인 메소드로 넘긴다.
sendRequest는 ajax 호출 부분을 처리 하는데 request의 onreadystatechange값이 4(완료)인 경우 지정 메소드 호출을 하는 전형적인 모습을 보여준다.(결국 위랑 같은 이야기-_-)
setNavigation은 body의 header를 찾아 responseText 값을 넣어준다.
nav.txt값을 살펴보면
<div id="TOC"></div> <div id="siteNav"> <span id="menuLink">show site navigation</span> <p id="waitMessageNav">Loading site navigation; please wait...</p> </div> -----------------css------ span#menuLink { display: block; width: 218px; padding-left: 10px; margin: 0; font-family: helvetica,arial,sans-serif; cursor: pointer; font-size: 90%; }
여기서 TOC는 우측 메뉴 관련 부분이니 생략.
siteNav가 좌측 메뉴다. munuLink의 css를 보면 초기에는 display가 block으로 처리되어 있다.(보이게 된다). 반면 waitMessageNav는 display가 none으로 되어 있으므로 처음에는 보이지 않는다. 이 상태에서 menuLink에 클릭 이벤트로 getMainNav 메소드 호출이 실행된다..

getMainNav를 살펴보면
function getMainNav() { document.getElementById('waitMessageNav').style.display = 'block'; sendRequest('t_header.html',setMainNav); this.innerHTML = 'hide site navigation'; this.className = 'opened'; this.onclick = removeMainNav; return false; } function setMainNav(req) { var container = document.createElement('div'); container.innerHTML = req.responseText; //alert(req.responseText); var x = container.getElementsByTagName('div'); var siteMap; for (var i=0;i<x.length;i++) { if (x[i].id == 'menu') { siteMap = x[i]; break; } } if (!siteMap) return; document.getElementById('siteNav').appendChild(siteMap); container.innerHTML = ''; document.getElementById('waitMessageNav').style.display = 'none'; } function removeMainNav() { var navElement = document.getElementById('siteNav'); var nav = document.getElementById('menu'); if (nav) { navStorage = nav.parentNode.removeChild(nav); this.onclick = restoreMainNav; } else this.onclick = getMainNav; this.innerHTML = 'show site navigation'; this.className = ''; return false; } function restoreMainNav() { document.getElementById('siteNav').appendChild(navStorage); this.innerHTML = 'hide site navigation'; this.className = 'opened'; this.onclick = removeMainNav; return false; } function getElementsByTagNames(list,obj) { if (!obj) var obj = document; var tagNames = list.split(','); var resultArray = new Array(); for (var i=0;i<tagNames.length;i++) { var tags = obj.getElementsByTagName(tagNames[i]); for (var j=0;j<tags.length;j++) { resultArray.push(tags[j]); } } var testNode = resultArray[0]; if (!testNode) return []; if (testNode.sourceIndex) { resultArray.sort(function (a,b) { return a.sourceIndex - b.sourceIndex; }); } else if (testNode.compareDocumentPosition) { resultArray.sort(function (a,b) { return 3 - (a.compareDocumentPosition(b) & 6); }); } //alert(); return resultArray; }
waitMessageNav 메시지가 block 처리되어 화면에 나타나고(로딩되는 동안 기다리라는 메시지역할)
t_header.html을 비동기식 호출하여 그 request값을 setMainNav의 파라메터로 보내게 된다.
t_header.html에는 <div id="menu"> <a href="http://www.google.com">구글</a> ... </div>의 구조로 정의되어 있다.
setMainNav는 div Element를 하나 생성하고 request받은 결과를 그 안에 넣는다.  그런 다음 getElementByTagName이라는 메소드를 이용하여 div를 잘라내고 이 중 menu라는 id를 가진 div를 찾아 siteMap으로 정의하고 화면의 siteNav에 연결시켜주고 있다.
그런 후 waitMessageNav는 다시 안 보이도록 display='none'으로 처리한다.

다시 getMainNav로 돌아가면 sendRequest호출 후에 화면에는 "hide site navigation"으로 제목을 바꿔주고 onclick이벤트로 removeMainNav를 적용한다.
removeMainNave는 메뉴를 닫기를 할때 실행되며 다시 화면에 제목을 바꾸면서 restoreMainNav를 적용시킨다.(열고 닫으면서 이 두 작업이 반복된다.)

처리중 한글메뉴가 깨지는 현상이 있었다.
페이지를 UTF-8로 적용하는 경우는 문제가 없는데 페이지를 EUC-KR로 적용하는 경우 한글이 깨진다.
메인페이지와 메뉴페이지의 인코딩을 맞춰줘야 하는데 둘다 EUC-KR로 하는 경우에도 ajax내부호출시 utf-8로 전송하기때문에 한글이 깨진다.
utf-8로 맞춰서 일단 정상확인은 했으나.. html->html 호출간 EUC-KR로 처리하는 방법이 애매하다..(차라리 ajax로 호출하는 부분이 서버단이면 각 language별로 converting해주는 방법이 있다만..)

-------------------
ajax 처리시 한글깨짐현상..
   한글을 처리하기 위해서는 송신부에서 인코딩을 지정해 줄수 없는 경우(xml에서는 됩니다.)
   ajax에서는 기본적으로 utf-8 송수신을 해야 합니다. 아니면 responseText시에 한글이 깨집니다.
   euc-kr을 사용하고 싶은경우 iconv(php?)로 다 치환해주셔야 합니다.
   뷁똠샾흄 같은 문자를 처리하려면 EUC_KR 대신 CP949 를 사용하시기 바랍니다.
   encodeURIComponent( string ) --> iconv( "UTF-8", "CP949", rawurldecode($string ) )
-------------------