Ajax 통신, XMLHttpRequest 객체

@ Ajax(Asynchronous JavaScript and XML) : 비동기 방식의 자바스크립트와 XML

@ Ajax 통신의 기존 방식과의 차별성

웹 브라우저가 아닌 XMLHttpRequest 객체가 웹 서버와 통신한다.
웹 서버의 응답 결과가 HTML이 아닌 XML 또는 단순 텍스트이다.
페이지 이동 없이 결과가 화면에 반영된다.

@DOM(Document Object Model)
: DOM은 문서의 내용, 구조, 스타일을 프로그램이나 스크립트를 통해 다이나믹하게 접근, 수정 할수 있게 하는플랫폼/언어 중립의 인터페이스다. 이미 처리가 완료되서 사용자게에 보여진 문서를 다시 수정해서 그 처리결과를 보여줄 수 있다.

@ XMLHttpRequest 프로그래밍 순서

1. XMLHttpRequest 객체 구하기
2. 웹 서버에 요청 전송하기
3. 웹 서버에서 응답이 도착하면 화면에 반영하기

@ 크로스 브라우저(Cross Browser) : 브라우저 종류에 상관없이 알맞게 동작하도록 구현하는 것

1. XMLHttpRequest 객체 구하기

function getXMLHttpRequest(){
 if(window.ActiveXObject){//IE에서 XMLHttpRequest 객체 구하기
  try{
   return new ActiveXObject("Msxml2.XMLHTTP");//더 최신버젼이기 때문에 먼저 구한다
  }catch(e){
   try{
    return new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e1){
    return null;
   }
  }
 }else if(window.XMLHttpRequest){
  return new XMLHttpRequest();//IE이외의 파이어폭스, 오페라와 같은 브라우저에서 XMLHttpRequest 객체구하기
 }else{
  return null;
 }
}

2. 웹 서버에 요청 전송하기

- open() 함수 : 요청의 초기화. get/post 선택. 접속할 url 입력

첫번째 인자 : HTTP 메서드를 지정(get/post )
두번째 인자 : 접속할 URL 기재, 보안의 이유로 접속할 URL은 현재 페이지와 같은 도메인있어야함
세번째 인자: 동기/비동기 방식 지정 -- 비동기화(true, 디폴트)

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

- GET 방식의 경우

httpRequest=getXMLHttpRequest();
httpRequest.open("GET","/test.jsp?id=madvirus&pw=1234",true);
httpRequest.send(null);

- POST 방식

httpRequest=getXMLHttpRequest();
httpRequest.open("POST","/test.jsp",true);
httpRequest.send("id=madvirus&pw=1234");

3. 웹 서버에서 응답이 도착하면 화면에 반영하기
XMLHttpRequest 객체는 웹 서버로부터 응답이 도착하면 특정한 자바스크립트 함수를 호출하는 기능이 있다.
--> 이때 사용되는 프로퍼티가 onreadystatechange

httpRequest=getXMLHttpRequest();
httpRequest.onreadystatechange=callbackFunction;
httpRequest.open("GET","/test.jsp",true);
httpRequest.send(null);

function callbackFunction(){
 //서버로부터 응답이 왔으므로 알맞은 작업을 수행 
}

onreadystatechange 에서 지정한 함수를 callback 함수라고 부르며 이 함수에서 화면을 병경하거나

경고창을 띄우는 등 응답 결과에 따라 알맞은 작업을 수행하면 된다.

@ 중간 summary!!
1. 사용자의 이벤트가 발생하면 이벤트 처리 함수를 호출
2. 이벤트 처리 함수에서는 XMLHttpRequest 객체의 send() 함수를 호출
3. XMLHttpRequest 객체의 send() 함수가 호출되면 웹 서버에 요청이 전송된다.
4. 웹 서버는 알맞게 처리한 뒤 응답 결과를 XMLHttpRequest에 전송한다.
5. XMLHttpRequest 객체에 응답이 도착하면 onreadystatechange 프로퍼티에 지정한 콜백함수를 호출

@ XMLHttpRequest  객체의 상태 : readyState
:  콜백함수는 readyState라는 프로퍼티의 값이 변경될때마다 호출된다.

값	의미	설명
0	uninitialized	객체만생성,초기화되지 않은상태(open메서드가 호출되지 않음)
1	loading	open메서드가 호출되고 아직 send메서드가 불리지 않은 상태
2	loaded	send메서드가 불렸지만 status와 헤더는 도착하지 않은 상태
3	interactive	데이터의 일부를 받은 상태
4	completed	데이터를 전부 받은 상태, 완전한 데이터의 이용가능

보통 서버에서 응답이 도착한 경우에만 필요한 처리를 수행하면 되므로 readyState 값이 4인 경우만
원하는 기능을 수행한다. 하지만 항상 4 값만 사용되는 것은 아니다. 작업의 시간이 오래걸릴때 readyState 값이 1,2,3 인 경우 작업이 진행중임을 나타내는 메시지를 출력할 수 도 있다.

# 각 브라우저마다 readyState 값 2,3이 다르게 처리되므로 크로스 브라우저를 위해 1과 4값을 사용하는 것이 좋다.

@ 서버로부터의 응답상태
: XMLHttpRequest 객체는 웹 서버가 전달한 상태 코드를 status 프로퍼티에 저장한다.

값	텍스트 (statusText 프로퍼티로 지원)	설명
200	OK	요청성공
403	Forbidden	접근거부
404	Not Found	페이지 없음
500	Internal Server Error	서버 오류 발생

status프로퍼티를 사용해서 콜백함수의 내용을 작성

function callbackFunction(){
 //서버로부터 응답이 왔으므로 알맞은 작업을 수행 
 if(httpRequest.readyState==4){
  if(httpRequest.status==200){
   //정상적으로 수행
  }else{
   alert("문제발생:"+httpRequest.status);
  }
 }
}

@ responseText

웹 서버는 단순 텍스트 또는 XML의 두가지 형식으로 데이터를 전송할 수 있는데, 먼저 단순 텍스트인 경우
responseText프로퍼티를 사용하면된다.
var txt=httpRequest.responseText;
//txt를 사용해서 알맞은 작업 수행

@ 동기방식과 비동기 방식

httpRequest.send(null); // 비동기 방식 send()함수 호출이후에 서버와의 통신진행상태와 상관없이

callSome(); // callSome()함수가 호출됨

동기방식은 send()함수가 호출되면 서버와의 통신이 완전히 완료된 이후에 send()이후의 코드가 실행

브라우져마다 동작 방식이 달라서 항상 비동기방식으로 하는 것이 권장된다.

@ 파라미터의 한글 처리 방법

encodeURIComponent()함수로 요청 파라미터의 값을 UTF-8로 인코딩할 수 있다.

var params="name="+encodeURIComponent("홍길동")
httpRequest.open("GET","/hello.jsp?"+params,true);