본문 바로가기

개발관련/Ajax

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활용 / 이란 책을 보고 요약한것입니다. -

'개발관련 > Ajax' 카테고리의 다른 글

Ajax정리 1. XMLHttpRequest 객체 생성 함수  (0) 2008.09.16