Ajax정리 2. XMLHttpRequest의 메서드와 프로퍼티

메서드

abort()	실행을 강제로 중단시킴
getAllResponseHeders()	Header정보를 문자열로 반환
getResponseHeader(param)	파라메터로 지정한 Header정보를 반환
open()	open('method', 'url', async) method : "GET", "POST" url : "어플리케이션또는 파일의 주소" async : 동기인지 비동기인지 기본값은 true
send()	send(datas) 서버로 데이터를 전송함 datas : 서버로 전송될 데이터들
setRequestHeader("label", "value")	Header의 label과 value를 정의

프로퍼티

onreadystatechange	서버의 처리상태의 변화에 따른 이벤트 발생 처리 상태 값을 readyState 프로퍼티로 제공
readyState	처리상태 0 : open()메서드 수행전 1 : 로딩중 2 : 로딩완료 3 : 서버처리중 4 : 서버처리끝
responseText	텍스트형태로 데이터 리턴
responseXML	XML형태로 데이터 리턴
status	서버의 처리결과 200 : 성공 403 : 접근거부 404 : 파일/페이지 없음
statusText	status에대한 내용을 문자열로 리턴

//메서드와 프로퍼티를 사용한 데이터 송수신 함수

function openSendStatus(){
  var xmlHttp = newXMLHttpRequest();
  xmlHttp.open("GET", "test.txt", true);
  xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4) {
     if(xmlHttp.status == 200){
       mainControl(xmlHttp);  //콜백함수
     }
   }
  }
  xmlHttp.send("param1="+ param + "&param2="+param2);
}

function mainControl(xmlHttp){

  alert(xmlHttp.responseText);
}

test.txt내용
테스트입니다~~~~~~

위의 함수를 보면 콜백함수라는게 있는데
그것은 xmlHttp.readyState == 4 즉 서버의 처리가 끝나고
xmlHttp.status == 200 즉 서버의 처리가 성공적일 때 실행되는게 콜백함수이다.

위의 상자에서는 mainControl이라는 이름으로 정의되어있고
xmlHttp객체가 파라메터로 들어있다.
그러므로 xmlHttp의 프로퍼티를 사용할 수 가 있다.
test.txt의 내용이 '테스트입니다~~~~~~~'이므로

위의 함수를 호출하면 경고창으로 '테스트입니다~~~~~'가 표시될 것이다.
한글이므로 인코딩이 UTF-8이 아니라면

decodeURIComponent(xmlHttp.responseText);

를 사용하여 디코딩을 해주어야 될 것이다.


- 위의 정리는 가메출판사 / Ajax활용 / 이란 책을 보고 요약한것입니다. -