XmlHttpRequest 요청 및 처리 흐름

★ AJAX의 XMLHttpRequest 요청 및 처리

- AJAX의 주요 기본구성요소중 하나인 XMLHttpRequest 객체

- XMLHttprequest : 웹서버와 통신을 담당함. 사용자의 요청을 웹서버에 전송 및 웹서버로부터 받은 결과를 웹브라우저에 전달함

 

1. XMLHttpRequest 프로그래밍 순서 

- XMLHttpRequest 객체 구하기

- 웹서버에 요청 전송하기 

- 웹 서버에서 응답이 도착하면 화면에 반영하기 

 

 

1) XMLHttpRequest 객체 생성

- New ActiveXObject(“Msxml2.XMLHTTP”);  // IE신버전(MSXML2)

- New ActiveXObject(“Microsoft.XMLHTTP”);  // IE구버전

- New XMLHttpRequest();  // IE 이외 브라우저

*sample -------------------------------------------------------------------------

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
   } else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   } 

-------------------------------------------------------------------------------- 

 

2) 송신 방법, URL, 통신방법 지정

- xmlhttp.open("GET", "/order/packageCancelCheck.do?ordNo="+document.cancelForm.ordNo.value, true);

- xmlHttp.open(“POST”, “JavaApplication”, “true”);

- 괄호 안 첫 번째가 송신방법, 가운데는 URL, 마지막은 통신방법을 작성 

- open()함수 : 요청의 초기화, GET/POST 방식 선택, 접속할 URL 입력 

- GET방식의 경우 URL뒤에 ?를 붙이고 함께 넘길 parameter들을 넘기면 됨(전송할 Parameter가 없을 경우 주소만 보내도 됨)

- POST방식의 경우 send()함수에 데이터를 넣어서 보냄 

 

3) 처리 데이터 송신

- xmlhttp.open("GET", "/order/packageCancelCheck.do?ordNo="+document.cancelForm.ordNo.value, true);

  xmlHttp.send(); //null

- xmlHttp.open(“POST”, “JavaApplication”, “true”);

  xmlHttp.send(sendData);

- send()함수 : 웹서버에 요청 전송 

 

4) 처리상태 변경 발생

클라이언트와 서버가 처리를 시작하게 되면 처리 상태가 변경된다.

변경되는 상태에 따라 적절한 처리를 수행해야 하는데 onreadystatechange 프로퍼티를 이용한다.

XMLHttpRequest 객체의 onreadystatechange 프로퍼티는 웹 서버로부터 응답이 도착할때 호출 될 함수를 지정할때 사용한다. 

- xmlhttp.onreadystatechange = function() {    //sample } 

 

5) 처리결과 체크 

onreadystatechange 프로퍼티가 이벤트를 발생시키면 서버의 처리상태가 변경된 것이므로 readystate의 코드값으로 체크한다

- if (xmlhttp.readyState == 4) { 

 

6) 데이터 편집

서버에서 가져온 파일의 데이터를 편집하여 브라우저에 출력한다.

readyState의 값이 4이고 status 값이 200일때 요청이 성공적으로 수행되었는지 확인하는 이것을 callback함수라고 한다. 

- if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

 

 

<< AJAX Sample >>---------------------------------------------------------------------------------------*

  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
   } else {// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
     result = eval('(' + xmlhttp.responseText + ')');   
     if(result.data != undefined && result.data != null && result.data == "Y"){
      cancelOrderStart()
     }else if(result.data != undefined && result.data != null && result.data == "QN"){
      alert("샘플경고메세지");

     }else if(result.data != undefined && result.data != null && result.data == "MN"){
      alert("샘플경고메세지2");
     }
    }
   }
   xmlhttp.open("GET", "/order/packageCancelCheck.do?ordNo="+document.cancelForm.ordNo.value true);
   xmlhttp.send();
  }

------------------------------------------------------------------------------------------------------*