XMLHttpRequest

XMLHttpRequest

선언 :

var xmlHttp          = Ajax.getTransport();

     var Try = {
       these: function() {
          var returnValue;

          for (var i = 0; i < arguments.length; i++) {
               var lambda = arguments[i];
               try {
                 returnValue = lambda();
                 break;
               } catch (e) {}
          }

          return returnValue;
       }
     }
     var Ajax = {
       getTransport: function() {
          return Try.these(
               function() {return new ActiveXObject('Msxml2.XMLHTTP.4.0')},
               function() {return new ActiveXObject('Msxml2.XMLHTTP.3.0')},
               function() {return new ActiveXObject('Msxml2.XMLHTTP')},
               function() {return new ActiveXObject('Microsoft.XMLHTTP')},
               function() {return new XMLHttpRequest()}
          ) || false;
       }
     }

보낼곳

     POST방식으로, 특정URL, 비동기(false)

          xmlHttp.open("POST", "특정URL", false);
          xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

          xmlHttp.send();

          xmlHttp.open("GET", "특정URL", false);
          xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

          xmlHttp.send(보낼 값들);

처리

     xmlHttp.open("GET", url, true);
     xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xmlHttp.onreadystatechange = xmlCallback;
     xmlHttp.send(serialize);

          function xmlCallback() {
               if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                         //alert(xmlHttp.responseText);

                        xmlHttp.responseText(받는 데이터값)

                         완료되었을때 처리할 로직
                    } else if (xmlHttp.status == 204) {
                         alert("전달된 데이터가 없습니다.");
                    } else if (xmlHttp.status == 404) {
                         alert("URL을 확인하세요.");
                    } else if (xmlHttp.status == 500) {
                         alert("내부 에러!.");
                    }
               }
          }

if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {

readyState

0:open() 수행전

1:send() 수행전 - 로딩중

2:서버가데이터를 받았음 - 로딩만완료

3:받는중

4:완료

status

200:OK

204:내용없음

400:bad Request

403:접근거부

404:존재하지않음

500:서버오류

503:service unavailable

full 소스

function changeArea(AreaCode)
{
     if (AreaCode == "")
     {
          alert("영역을 선택해주세요.");
          document.getElementById("divSubjectCode").innerHTML = "";
          return;
     }

     var xmlHttp = Ajax.getTransport();
     var serialize = getSerialize(document.searchForm);
     var url = "xhrGetSubjectCode.asp?searchArea="+AreaCode+"&searchSubjet=<%=searchSubjet%>&selectName=searchSubjet";

     xmlHttp.open("GET", url, true);
     xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xmlHttp.onreadystatechange = xmlCallback;
     xmlHttp.send(null);

          function xmlCallback() {
               if (xmlHttp.readyState == 4) {
                    if (xmlHttp.status == 200) {
                         //alert(xmlHttp.responseText);
                         document.getElementById("divSubjectCode").innerHTML = xmlHttp.responseText;
                    } else if (xmlHttp.status == 204) {
                         alert("전달된 데이터가 없습니다.");
                    } else if (xmlHttp.status == 404) {
                         alert("URL을 확인하세요.");
                    } else if (xmlHttp.status == 500) {
                         alert("내부 에러!.");
                    }
               }
          }
}

아래처럼.~