Ajax 사용할 때 알아 두면 편리(?)한 4가지 이야기

별도의 프레임 웍을 사용하지 않고, 기본적인 Ajax 를 다룰때 유념해야 할 몇가지 사항이 있다.

첫째, Ajax 로 불려지는 웹페이지와 Ajax 로 불러오는 웹페이지의 프로토콜이 같아야 한다.
둘째, 스타일시트와 자바스크립트의 정의는 Ajax 에서 하지 않는다.
셋째, Get 방식과 Post 방식을 사용할때 둘 간에는 약간의 차이가 존재한다.
넷째, Ajax 는 파라미터를 주고 받을때 UTF-8 을 사용한다.

자, 이제 이야기를 시작해 보자. 우선 첫번째 프로토콜.
여기서 말하는 프로토콜은 웹에서 사용하는 HTTP 와 HTTPS 를 말하는 것이다.
A.jsp 가 Ajax 기술(?)을 사용하여 B.jsp 를 불러올때,
A.jsp 가 HTTP 이면 B.jsp 도 HTTP 로 불러오고..
A.jsp 가 HTTPS 를 사용하고 있으면 B.jsp 도 HTTPS 로 불러오도록 한다.
A.jsp 와 B.jsp 가 동일 머신 안에 존재하건 다른 서버에 존재하건 상관은 없지만,
이러한 관계를 지키지 않는 경우에는 웹브라우저에 경고창이 뜨게 된다.
경고창에서 어떤 버튼을 클릭하느냐에 따라 세션이 유지되는 동안 B.jsp 가 보이지 않을 수도 있다는 야그.
프로토콜에 대한 정의 없이 사용하고 있다면 고민할 필요는 없겠지만,
http 나 https 를 기술할때 서로 어긋나게 되었다면 경고창은 여지없이 뜨게 된다.
여담이지만, iframe 을 사용한다면 HTTP 와 HTTPS 를 고민할 필요가 없다.
다만.. 물리적으로 다른 서버의 웹페이지를 iframe 에 담아 올때, iframe 을 resize 하는 것이 쉽지 않다.
된다고 하는 분도 있는데, IE 7.x 이후 버전에서는 어림도 없는 소리다.
(IE 7.x 나 IE 8.x 에서도 통용되는 resize 방법을 알고 있는 분이 계시면 이곳에 댓글을 바랍니다.)

두번째, 스타일시트와 자바스크립트.
위에서 예로 든, B.jsp 에 스타일시트와 자바스크립트를 정의해 놓고 사용하는 것은 NonSense, 아니 미친(?) 짓이다.
물론, B.jsp 하나만 웹브라우저에 띄우면 정상적으로 보인다.
그런데, A.jsp 에서 B.jsp 를 호출하면 어떻게 될까..? 물론 안 된다.
A.jsp 가 B.jsp 의 내용을 가져다 사용할때 responseText 를 사용하기 때문에 발생하는 문제.
그렇다면 responseHtml 은 없는가..? 아직은 없는 것같다. responseXML 은 있지만서도..
그러나, A.jsp 에 스타일시트와 자바스크립트를 정의해 두었다면, B.jsp 에서 이를 가져다 사용할 수는 있다.

세번째, Get 방식과 Post 방식.
두 방식의 차이점이 뭐 그리 대단할까 싶지만, 암튼 구현하는 방식에서는 차이가 난다.
아래 첫번째 박스가 POST 방식이고 다음 박스가 GET 방식으로 구현한 것이다. 결과는 동일하다.

function doChange(){   var f = document.forms['aform'];   var url = '/.../B.jsp';   var params = 'param=' +f.param.value;   var xmlhttp = getXmlHttpRequest();   xmlhttp.open("POST", url, true);   xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=euc-kr');   xmlhttp.onreadystatechange = function() {    if(xmlhttp.readyState==4){     if(xmlhttp.status==200){      document.getElementById('idTd).innerHTML = xmlhttp.responseText;     }    }   }   xmlhttp.send(params); }

function doChange(){   var f = document.forms['aform'];   var url = '/.../B.jsp?param=' +f.param.value;   var xmlhttp = getXmlHttpRequest();   xmlhttp.open("GET", url, true);   xmlhttp.onreadystatechange = function() {    if(xmlhttp.readyState==4){     if(xmlhttp.status==200){      document.getElementById('idTd).innerHTML = xmlhttp.responseText;     }    }   }   xmlhttp.send(null); }

세번째, UTF-8.
아, 우리는 언제쯤이면 N-byte 국민(?)의 한계를 이겨낼 수 있을까..?
가급적이면 파라미터를 사용할때 N-byte 인 한글은 사용하지 말고
Ascii 로 해독이 가능한 코드를 사용하게 되기를 바랄뿐이다.
아니면 A.jsp 와 B.jsp 모두 UTF-8 로 설정되고 저장되면 문제 없음.
다만A.jsp 와 B.jsp 모두 EUC-KR 이라면 B.jsp 를 호출할때 한글을 넘기지만 않으면.. 무난히 한글 구현이 가능하다.
이것도 서버 설정에 따라 달라지기는 한다.

마지막으로 상기 코드에 사용된 getXmlHttpRequest() 함수는 아래와 같다.

function getXmlHttpRequest(){  var xmlhttp = false;  try{   xmlhttp = new XMLHttpRequest(); // for FireFox, Opera 8+, Safari, IE 7+  }catch(e){   try{    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); // for IE 6+   }catch(e){    try{     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // for IE 5.5+    }catch(e){    }   }  }  return xmlhttp; }

Fine.