개발 공부 - javascript에서 XMLHttpRequest 객체 사용 (간단 정리)

목차

1) 객체 구해오기
2) 웹 서버로 요청 전송
3) 웹 서버에서 응답 받은 뒤 화면 반영
4) 추가 사항


1) http request 만들기 (객체 구해오기)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

var httpRequest = null; if ( window.XMLHttpRequest ) {   httpRequest = new XMLHttpRequest(); //신규 버전 (IE 제외) } else if ( window.ActiveXObject ){ //IE일 경우에는 XMLHttpRequest 객체 구하는 방식이 다름   try {     httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); // 신버전 IE   } catch(e) {     httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //구버전 IE (IE 6 이하)     } } Colored by Color Scripter

cs

2) 웹 서버로 요청 전송

(1) open( 1 , 2 , 3 );
1 - 전달 방식 선택
  'GET', 'POST', 'HEAD' 중 하나 선택
2 - 접속 URL
  접속 URL은 현재 페이지와 같은 도메인 내 위치한 것
3 - 동기/비동기 방식
  동기(false), 비동기(true)

(2) send()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

1 - GET httpRequest = getXMLHttpRequest(); httpRequest.open("GET", "/test.jsp?id=aaa&pw=aaa", true); httpRequest.send(null); // 파라미터 부재시에는 그냥 null 전달 가능 2 - POST httpRequest = getXMLHttpRequest(); httpRequest.open("POST", "/test.jsp", true); httpRequest.send("id=aaa&pw=aaa"); Colored by Color Scripter

cs

3) 서버 응답 처리
* onreadystatechange : 서버로부터 응답이 도착하면 호출될 함수를 지정하는 프로퍼티
* callbackFunction : onreadystatechange 프로퍼티를 통해 지정한 콜백 함수 (응답 도착시 외에도 open, send 메소드 호출시에도 실행된다.)

1 2 3 4 5 6 7 8 9 10 11 12 13

function processEvent(){   httpRequest = getXMLHttpRequest();   httpRequest.onreadystatechange = callbackFunction;   httpRequest.open("GET", "/test.jsp", true);   httpRequest.send(null); } Colored by Color Scripter

cs

4) 추가 사항
(1) XMLHttpRequest 객체 상태
* readyState : 4 (데이터 전부 받은 상태)

(2) 서버 응답 상태
* status : 200 (요청 성공)
* statusText : OK (요청 성공)

(3) 응답 데이터 사용
* responseText : 서버가 전송해준 데이터 (단순 응답 텍스트일 경우 그냥 출력 가능)

1 2 3 4 5 6 7 8 9 10 11 12 13

if ( httpRequest.readyState == 4 ) {   if ( httpRequest.status == 200 ) {     alert( httpRequest.responseText );   } else {     alert( "실패: " + httpRequest.status );   } } Colored by Color Scripter

cs

(4) 코드 실행 순서

1 2 3 4 5 6 7 8 9 10 11 12 13

1 - 사용자 이벤트 발생시 이벤트 처리 함수 호출 2 - 이벤트 처리 함수 내에서는 XMLHttpRequest 객체의 send() 메소드를 호출 3 - XMLHttpRequest 객체의 send() 메소드가 호출되면 웹 서버에  요청이 전송 4 - 웹 서버가 처리 뒤 응답 결과를 XMLHttpRequest 전송 5 - XMLHttpRequest 객체에 응답 도착시 onreadystatechange 프로퍼티를 통해 지정한 콜백 함수 호출 6 - 콜백 함수 내의 응답 판단 (readyState, status 프로퍼티값으로 확인) 7 - 정상 동작시 응답 데이터를 responseText 프로퍼티를 사용해 처리

cs

출처: https://myeonguni.tistory.com/1526