Asynchronous Javascript And XML
Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해줍니다.
즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.
데이터 형식
이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.
-
JSON
-
XML
-
HTML
-
텍스트 파일 등
Ajax의 한계
Ajax를 이용하면 여러 장점을 가지지만, Ajax로도 다음과 같은 일들은 처리할 수 없습니다.
-
Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
-
Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
-
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
-
클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.
구성요소
-
웹 페이지의 표현을 위한 HTML과 CSS
-
데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델
-
데이터의 교환을 위한 JSON이나 XML
-
웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체
-
위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는 데 사용되는 자바스크립트
동작원리
- 서버요청을 보낸 후 다른 작업이 가능한 비동기식 처리
- Polling 방식 클라가 서버에 요청(반대로 Push는 서버가 클라에게 정보를 전달)
XMLHttpRequest 객체
Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체입니다.
Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다.
웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문입니다.
var httpRequest = new XMLHttpRequest(); //XMLHttpRequest 객체 생성
// GET 방식으로 요청을 보내면서 데이터를 동시에 전달함. 맨마지막 인자는 동기여부
httpRequest.open("GET", "/examples/media/request_ajax.php?city=Seoul&zipcode=06141", true); // 비동기식 방식
httpRequest.send();
// POST 방식의 요청은 데이터를 Http 헤더에 포함시켜 전송함.
httpRequest.open("POST", "/examples/media/request_ajax.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("city=Seoul&zipcode=06141");
/*
위의 예제에서 readyState 프로퍼티의 값이 XMLHttpRequest.DONE이면, 서버에 요청한 데이터의 처리가 완료되어 응답할 준비가 완료되었다는 의미입니다.
또한, status 프로퍼티의 값이 200이면, 요청한 문서가 서버 상에 존재한다는 의미입니다.
*/
if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
...
}
/////////// Ajax 상태
function sendRequest() {
var httpRequest = new XMLHttpRequest();
var currentState = "";
httpRequest.onreadystatechange = function() {
switch (httpRequest.readyState) {
case XMLHttpRequest.UNSET:
currentState += "XMLHttpRequest 객체의 현재 상태는 UNSET 입니다.<br>"; // 객체가 생성됨.
break;
case XMLHttpRequest.OPENED:
currentState += "XMLHttpRequest 객체의 현재 상태는 OPENED 입니다.<br>"; // open 메소드 호출
break;
case XMLHttpRequest.HEADERS_RECEIVED:
currentState += "XMLHttpRequest 객체의 현재 상태는 HEADERS_RECEIVED 입니다.<br>"; // 모든 요청에 대한 응답이 도착
break;
case XMLHttpRequest.LOADING:
currentState += "XMLHttpRequest 객체의 현재 상태는 LOADING 입니다.<br>"; // 처리중
break;
case XMLHttpRequest.DONE:
currentState += "XMLHttpRequest 객체의 현재 상태는 DONE 입니다.<br>"; // 처리완료로 응답준비 완료
break;
}
document.getElementById("status").innerHTML = currentState;
if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
document.getElementById("text").innerHTML = httpRequest.responseText;
}
};
httpRequest.open("GET", "/examples/media/ajax_intro_data.txt", true);
httpRequest.send();
///////////////////// 요청 및 처리
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
// XML 문서의 응답 처리에 responseText 프로퍼티를 사용하면 XML 코드를 문자열로 반환함.
document.getElementById("text").innerHTML = httpRequest.responseText;
// XML 문서의 응답 처리는 responseXML 프로퍼티를 사용해야 함.
document.getElementById("xml").innerHTML = httpRequest.responseXML;
}
};
httpRequest.open("GET", "/examples/media/ajax_doctype_xml.php");
httpRequest.send();HTTP 헤더
클라이언트와 서버 사이에 이루어지는 HTTP 요청과 응답은 HTTP 헤더를 사용하여 수행됩니다.
HTTP 헤더는 클라이언트와 서버가 서로에게 전달해야 할 다양한 종류의 데이터를 포함할 수 있습니다.
- 사용자 정의 키, 값 전달 가능
/*
헤더내용
Accept: *
Referer: http://codingsam.com/examples/tryit/tryhtml.php?filename=ajax_header_request_01
Accept-Language: ko-KR
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Host: codingsam.com
DNT: 1
Connection: Keep-Alive
*/
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == XMLHttpRequest.DONE && httpRequest.status == 200 ) {
document.getElementById("text").innerHTML = httpRequest.responseText;
}
};
httpRequest.open("GET", "/examples/media/ajax_request_header.php", true);
httpRequest.setRequestHeader("testheader", "123"); // 헤더 설정
httpRequest.send();Ajax 활용방법
- 주기적으로 Ajax 요청하기
Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
하지만 주기적으로 Ajax 요청을 보내도록 설정하여, 실시간 서비스와 비슷한 동작을 하도록 만들 수는 있습니다.
- 데이터가 변경된 경우에만 Ajax 응답하기
서버에 주기적으로 Ajax 요청을 계속하게 되면, 네트워크와 서버의 자원을 많이 소모하게 합니다.
따라서 웹 페이지의 내용이 변경된 경우에만 서버가 응답을 보내도록 설정하는 것이 많은 자원을 절약하게 만들 수 있습니다.
이러한 방법은 Ajax 요청 헤더에 이전 요청 시간을 헤더로 포함해서 보내는 것으로 설정할 수 있습니다.
그러면 서버는 전달받은 시간 이후에 변경된 내용이 있는 경우에만 응답하면 됩니다.
Ajax 프레임워크
ajax 프레임워크는 다양하다.
- jQuery
- axios
