Ajax 를 유사하게 여러번 호출하는 경우 소스 단순하게 만들기

JQuery 나 기타 등등의 라이브러리를 사용하는 방식이 아니라 간단하게 Ajax 를 구현하는 경우,
각각의 기능을 자바스크립트 함수로 만들때 마다 반복되게 하지 않고 한번만 정의하는 방법을 소개한다.

doAjax 라는 함수를 두어서 Ajax 로 호출될 URL 과 파라미터, Ajax 성공시 호출될 함수명을 기술.
파라미터가 더 필요한 경우 arguments 를 이용하여 전달. arguments[0] 는 첫번째 파라미터..
goWhere 함수는 페이지 전환을 대신할 Ajax 호출.
goWhere 함수가 doAjax 호출하면, Ajax 성공시 파라미터로 넘어온 함수명 doAfterAjax 를 호출.

01 function doAjax(u,p,f){
02  var args = doAjax.arguments;
03  var xmlHttp = getXmlHttpRequest();
04  xmlHttp.open("POST", u, false); // POST 방식, GET 방식 선택
05  xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=euc-kr'); // EUC-KR
06  xmlHttp.setRequestHeader('Cache-Control','no-cache,must-revalidate'); // 캐시 없앰
07  xmlHttp.setRequestHeader('Pragma','no-cache'); // 캐시 없앰
08  xmlHttp.onreadystatechange = function() {
09   if(xmlHttp.readyState==4){
10    if(xmlHttp.status==200){
11     window[f](args[3], xmlHttp); // args[3] 은 4번째 파라미터를 의미, xmlHttp 는 Ajax 결과물
12    }
13   }
14  }
15  xmlHttp.send(p); // get 방식이면 p 대신 null
16 }
17
18
19 function goWhere(where){
20  var url, params;
21  if(where=='AA') url = '...';
22  else if(where=='BB'){
23   url = '...';
24   params = '';
25  }else if(where=='CC') url = '...';
26  else if(where=='DD') url = '...';
27
28  doAjax(url,params,'doAfterAjax',where);
29 }
30
31
32 function doAfterAjax(where,xmlHttp){
33  if(where=='AA'){
34   document.getElementById('idContent1').innerHTML = xmlHttp.responseText;
35  }
36 }