[유용한 AJAX 호출 관련 1] Ajax 호출 javascript code [연재 1/2]

[유용한 AJAX 호출 관련 1] Ajax 호출 xxjavascript code [연재 1/2] ajax의 가장큰 장점은 synchronous page call(동기적 page 호출) 입니다. xxjavascript를 실행하면서 서버에서 데이터를 가지고 와서 이 데이터를 가지고 특정 작업을 하고자 하는 경우 Ajax가 가장 적합한 방식입니다. ajax를 사용하지 않으면 xxjavascript에서 form을 iframe으로 page를 submit하고 xxjavascript는 return합니다. iframe page가 load되면 onIframePageLoad가 호출되도록 iframe page의 body tag에 <body [안내]태그제한으로등록되지않습니다-xxonload="xxjavascript:parent.onIframePageLoad(data)" ...> 이와 같이 설정하였다고 하겠습니다. 즉 submitAjaxRequest -> iframe page call -> onIframePageLoad -> onAjaxResponse 즉 복잡합니다. <script> function submitAjaxRequest() {  ...  form.target = "iframePage";  form.submit(); } function onIframePageLoad(data) // iframe page가 load되면 자동 호출하도록 설정 {  onAjaxResponse(data); } function onAjaxResponse(data) {  ... } </script> 위와 같이 복잡한 과정을 아래와 같이 간단히 해결할 수 있습니다. ajax 호출 -> onAjaxResponse 즉 프로그램이 간단해 집니다. 즉 server에 ajax request를 보내고, 그 결과를 기다리는 방식 즉 synchronous 방식입니다. 이와 같은 방식은 프로그램 개발 속도를 향상시키고 프로그램을 쉽게 개발할 수 있도록 합니다. <script> function submitAjaxRequest() {  var data = WCAjax_submitParam(window,"test.jsp","name=hello&id=381");  onAjaxResponse(data); } function onAjaxResponse(data) {  ... } </script> 이와 같이 호출하면 서버에 synchronous하게 호출합니다. 첨부한 소스파일 참조하세요. 여기서 function WCAjax_submitParam(wSrcWnd,sAction,sParam) 함수의  objXML.setRequestHeader("ajax", "true"); 이 코드가 매우 중요합니다. ajax 호출인지를 서버에 알려 줘야 합니다. ajax로 서버에 submit할때 data가 한글이면 한글 코드를 변환해줘야 합니다. 그런데 jsp에서 한글 code 변환방식과 ajax로 jsp를 호출할때 한글 코드 변환 방식이 서로 다릅니다. 즉 ajax 호출이라는 것을 알려주기 위해서 request header에 ajax를 true로 설정하여 submit합니다. 아래의 소스코드는 WDL(web development library의 WCPage class에서 ajax 처리 부분만을 발취하여 재구성한 소스코드입니다. (모든 소스코드를 다운로드 받으려면 <A href="http://www.webdevlib.net">www.webdevlib.net</A>에서 다운받으세요 아래의 소스는 <A href="http://www.webdevlib.net">www.webdevlib.net</A>에 있는 소스중에서 중요한 부분만 발취하여 알기 쉽게 재구성한 소스입니다.) 개발자가 유용하게 사용하실 수 있을것입니다. 다음번 글에서는 JSP에서 ajax request를 처리하는 부분을 글로 올리겠습니다. <script> function WCAjax_submitParam(wSrcWnd,sAction,sParam) {  try  {   var objXML = WCAjax_getXMLHttpRequest();   objXML.open("POST",sAction,false);   objXML.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   objXML.setRequestHeader("ajax", "true");   objXML.send(sParam);   var sData = objXML.responseText;   var nLen = sData.length;   {    var sStartExp = "<ajax_response>";    var sEndExp = "</ajax_response>";    var nStart = sData.indexOf(sStartExp);    if (nStart < 0)     return null;    var nEnd = sData.indexOf(sEndExp);    if (nEnd < 0)     return null;    var nStartExpLen = sStartExp.length;    var sXml = sData.substring(nStart+nStartExpLen,nEnd);    return sXml;   }  }  catch (ex)  {  } } function WCAjax_submitForm(wSrcWnd,fParam) {  try  {   var sParam = WCAjax_getFormQueryString(fParam);   var sAction = fParam.action;   var rReturn = WCAjax_submitParam(wSrcWnd,sAction,sParam);   return rReturn;  }  catch (ex)  {  } } function WCAjax_getFormQueryString(docForm) {  if (docForm == null)   return null;  var submitContent = '';  var formElem;  var lastElemName = '';  for (i = 0; i < docForm.elements.length; i++)  {   formElem = docForm.elements[i];   switch (formElem.type)   {   case 'text':   case 'hidden':   case 'password':   case 'textarea':   case 'select-one':    submitContent += formElem.name + '=' + WCPage_encodeURIComponent(g_oPage,formElem.value) + '&'    break;   case 'radio': // Radio buttons    if (formElem.checked)    {     submitContent += formElem.name + '=' + WCPage_encodeURIComponent(g_oPage,formElem.value) + '&'    }    break;   case 'checkbox': // Checkboxes    if (formElem.checked)    {     {      submitContent += formElem.name + '=' + WCPage_encodeURIComponent(g_oPage,formElem.value);     }     submitContent += '&';     lastElemName = formElem.name;    }    break;   }  }  submitContent = submitContent.substr(0, submitContent.length - 1);  return submitContent; } function WCAjax_getXMLHttpRequest() {  try  {   if (window.XMLHttpRequest)   {    var xmlHttp = new XMLHttpRequest();    return xmlHttp;   }   else if (window.ActiveXObject)   {    var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    return xmlHttp;   }  }  catch (ex)  {  } } </script> 출처 : 고급 웹 UI 개발 라이브러리 Web Development Library 소스공개 : <A href="http://www.webdevlib.net">http://www.webdevlib.net</A>