< XMLHttpRequest란? >
웹 페이지와 서버 사이에 통신을 하기위해, Ajax에서 통신을 담당하고 데이터를 송수신할 수 있는 객체가 XMLHttpRequest이다.
기존의 웹브라우저와 웹 서버가 통신하는 방식이 동기화 방식이었다. 이러한 방법은 서버가 받은 요청에 대하여 새로운 html페이지를 생성하여 응답하기 때문에 로딩시간이 길고 브라우저에서 발생하는 이벤트마다 새로운 페이지로 이동했다.
웹 2.0에서는 Ajax를 이용하여 비동기화 방식으로 웹 서버와 브라우저가 통신한다. 기존의 동기화 방식에서의 단점을 보완하기 위해 브라우저와 서버 사이에서 XMLHttpRequest가 요청과 응답을 한번 더 처리한다.
XMLHttpRequest는 자바스크립트와 같은 웹 브라우저 스크립트 언어에서 사용할 수 있는 API이다. 웹 사이트를 접속할 때 브라우저의 주소 검색창에 "http://"로 시작하는 주소를 입력한다. 이것은 브라우저와 서버 간의 통신을 HTTP방법으로 하겠다는 W3C의 규약이다. 이때 브라우저와 서버가 HTTP 통신을 하기 위해 다리역할을 하는 무엇인가가 있어야하는데, XMLHttpRequest가 이런 역할을 한다. 요약하자면, http프로토콜을 이용해서 웹 서버가 전송하는 xml을 브라우저에서 처리하는 기능을 가진다. XMLHttpRequest 즉, XHR을 통해 새로운 정보를 표시하기위해 웹은 새로운 페이지 전체를 다시 로드하지 않고 XML을 가져와 페이지의 특정 부분만 업데이트 할 수 있기 때문이다.
===========================================================
< 브라우저와 XMLHttpRequest >
이렇게 웹서버와 브라우저 간에 효율적으로 통신을 하고 정보를 주고받기 위해서는 위와 같이 XMLHttpRequest 객체를 선언하고 이를 통해 서버와 통신을 하는 것이 Ajax이다. 이러한 XMLHttpRequest는 브라우저마다 사용하는 방법이 다른데, 정확하게 말하자면 Internet Explorer와 다른 브라우저들이 다르다. IE는 Active X 컴포넌트로 제공하고, 나머지 브라우저들은 XHR 클래스를 기본적으로 제공하고 있다.
▶ IE에서의 XMLHttpRequest
IE는 ActiveXObject를 사용해서 HTTP통신을 하며 Msxml2.XMLHTTP와 Microsoft.XMLHTTP 두 종류의 객체가 있다.
- Msxml2.XMLHTTP : IE 5.0 이후 버전
- Microsoft.XMLHTTP : IE 5.0 이전 버전
하지만 Microsoft.XMLHTTP를 사용하지 않는다는 보장이 없기 때문에 두 종류를 포함해서 XMLHttpRequest를 정의해야 한다.
▶ IE 이외의 브라우저에서의 XMLHttpRequest
각 브라우저마다 XHR 객체를 정의하는 객체 명칭이 다르다. 따라서 브라우저에서 XHR을 선언하는 객체 이름을 통합하면 사용자가 어떤 브라우저를 사용하더라도 이에 대응할 수 있을 것이다.
-> 브라우저에 상관없이 작동하는 것을 ‘크로스 브라우징’이라고 한다.
XMLHttpRequest는 W3C 표준은 아니지만 데이터를 송수신하는 데에 있어서 정해진 흐름과 이를 제어하기 위한 규칙이 있다. 이러한 흐름과 제어는 브라우저마다 다르지 않다.
XMLHttpRequest는 method와 property를 가진 객체이다. 따라서 메서드를 호출하고 property를 편집해주어야 객체가 가진 목적을 달성할 수 있다. 즉, XMLHttpRequest 객체를 제어해야 하는데 자바스크립트로 제어하며 이러한 모든 것을 하나로 묶은 것이 Ajax 엔진이다. 그러므로 Ajax 엔진과 서버가 통신을 한다고 할 수 있다.
===========================================================
< XMLHttpRequest 객체를 이용하여 웹 서버에 요청 하는 과정 >
XMLHttpRequest 요청의 처리는 다음과 같다.
1) 서버처리를 위한 클라이언트 준비 사항
2) 서버에서 처리하는 사항
3) 서버의 처리가 진행될 때마다 발생하는 상태를 받아서 분석하고 서버 처리가 종료되면 파일의 데이터를 브라우저에 출력하는 사항
하지만 클라이언트가 서버의 어떠한 제어도 없이 서버에서 파일을 가져오는 것이 아니라, 클라이언트가 파일을 보내 줄 것을 서버에게 Get/Post 하면 서버에서 클라이언트로 파일을 보내주는 것이므로 서버에 대한 정의가 필요하다. 또한, 서버는 파일을 클라이언트에게 보내고있는 상태를 클라이언트에게 제공하게 되는데, 이를 Ajax 엔진이 받아 상태를 분석한 후 서버의 처리가 완료되면 파일의 데이터를 브라우저에 출력하게 된다. (3번 과정)
===========================================================
< XMLHttpRequest 사용방법 >
웹 서버와 통신하기 위해 XMLHttpRequest 객체를 선언하고 XMLHttpRequest 객체의 method와 property를 이용하여 알맞은 데이터 및 통신을 하는 방법은 크게 보면 다음과 같다.
1. XMLHttpRequest 객체 생성
2. 웹 서버에 요청 전송
3. 웹 서버에서 응답이 도착하면 화면에 반영
1. XMLHttpRequest 객체 생성
- Internet Explorer : ActiveXObject를 사용해서 HTTP 통신을 한다.
- IE 이외의 브라우저 : 기본적으로 XMLHttpRequest 클래스 제공
2. 웹 서버에 요청을 전송
XMLHttpRequest 객체의 (요청 전송 방법, URL, 통신 방법) 지정을 한다.
- 서버로 데이터를 보내는 방법을 정의한 전송 방법은 Get 방식과 Post 방식이 있다.
- URL은 가져오려는 파일이 존재하는 서버의 URL을 지정하는 것이다.
- 통신 방법은 동기(false)와 비동기(true)를 지정한다. -> 지정하지 않으면 기본적으로 비동기로 설정된다.
*** Get방식과 Post방식
Get방식은 데이터를 이름과 값이 결합된 스트링 형태로 전달하며, 각 이름과 값의 쌍은 &을 이용하여 구분한다.
예 ) http://localhost/chs/book/Request.asp?Name=Michael&Dept=Computer
Post방식은 데이터를 클라이언트와 서버 간에 상호 정의되어 있는 형식대로 값을 인코딩하여 서버로 전송하며, 서버는 전달된 스트링을 디코딩하여 통신을 한다. 각 파라미터들, 즉 데이터의 이름과 값은 내부의 구분자가 구분한다. 이러한 Post방식은 브라우저의 주소 입력란에 데이터가 나타나지 않는다.
예 ) http://localhost/chs/book/TotalBytes_1.asp
- GET 방식 : 기본적으로 데이터베이스에 대한 질의어 데이터와 같은 요청 자체를 위한 정보를 전송할 때 사용
- POST 방식 : 데이터베이스에 대한 갱신 작업과 같은 서버측에서의 정보 갱신 작업을 원할 때 사용
- 일정한 크기 이상의 데이터를 전송할 때에는 POST 방식을 사용
- GET 방식을 사용하면 이를 초과하는 데이터가 절단
- GET 방식을 사용하면 데이터가 주소 입력란에 표시되므로 최소한의 보안도 유지되지 않음
- POST 방식을 사용하면 GET 방식에 비해 상대적으로 처리 속도가 늦어짐
===========================================================
< XMLHttpRequest 메소드 >
|
Method |
개요 |
형식 |
|
abort() |
실행을 강제로 중단시킨다 |
XMLHttpRequest.abort() |
|
getAllResponseHeaders() |
Header 정보를 문자 값으로 반환한다. |
XMLHttpRequest.getAllResponseHeaders() |
|
getResponseHeader() |
headerName으로 지정한 Header 정보를 문자 값으로 반환한다. |
XMLHttpRequest.getResponseHeader(“Header Name”) |
|
open() |
Http통신을 위한 기준을 설정한다. |
|
|
send() |
서버로 전송할 데이터를 정의한다 |
|
|
setRequestHeader() |
Header의 label과 value를 정의한다. |
|
- open()메서드는 send() 메서드의 파라미터에서 서버로 보낼 데이터를 정의한다. 즉, 이 데이터를 서버에 있는 애플리케이션이 받아서 데이터베이스에 저장하거나 다른 서버로 보내게 된다. 회원가입 웹 페이지에는 다수의 항목이 있다. 그런데 send() 메서드의 파라미터 항목은 하나이다. 따라서 하나의 파라미터로 보내기 위해서는 서버용 애플리케이션과 사전에 약속된 순서로 입력한 회원가입 데이터를 문자열(String) 형식으로 연결해야 한다.
- get방식으로 사용할때는 send(“null”); 로 지정해야한다. 왜? open은 소켓을 열어주는 기능이고 send는 실질적으로 요청데이터를 보내는 역할이다.
데이터를 서버로 보낸다는 것은 서버의 애플리케이션이 클라이언트가 보낸 데이터를 기준으로 데이터를 가공하거나 테이블에 저장하는 것과 같은 처리를 한다는 의미를 포함하고 있다. 따라서 서버로부터 파일을 가져오기만 한다면 서버로 보낼 데이터가 없으므로 send 메소드의 파라미터에 null을 지정한다.
===========================================================
< XMLHttpRequest Property >
|
Property |
개요 |
|
onreadystatechange |
서버의 처리 상태가 변경될 때마다 자동으로 이벤트를 발생시키고 이벤트 핸들러함수를 자동으로 수행한다. |
|
readyState |
서버의 처리 상태 반영 : 0 ~ 4 |
|
responseText |
텍스트 형태로 자료 반환 |
|
responseXML |
XML 형태로 자료 반환 |
|
status |
서버의 처리 결과 ( 상태 ) : 200, 403, 404 |
|
statusText |
status에 대한 내역 ( 문자열 ) |
- onreadystatechange 형식
XMLHttpRequest.onreadystatechange = 이벤트 핸들러 함수이름
ex)
XMLHttpRequest.onreadystatechange = function() {
if(xmlHttp.readyState ==4){ //서버 처리 완료
if(xmlHttp.status ==200){ //파일 수신 성공
mainControl(xmlHttp); } //메인 처리
}
}
-> onreadystatechange 프로퍼티를 이용하여 객체가 서버로 보낸 요청에 대한 응답이 어떤형태인지에 따라 이벤트 핸들러 함수를 호출한다. 이때 주목해야할 점은 onreadystatechange = function에서 해당 함수를 수행하는 것이 아니라 응답에 따라 단순하게 어떤 함수가 불릴것인지만 지정한다는 것이다.