XMLHttpRequest Object
이번에는 웹 서버와 통신하는데 핵심 기능을 제공하는 XMLHttpRequest 객체를 사용하는 방법에 대해 알아보고,
해당 속성들을 이용하여 실제로 사용할 수 있는 예제를 만들어 보자.
XMLHttpRequest 프로그래밍 순서
XMLHttpRequest를 사용한 Ajax 프로그램은 다음과 같이 세 과정을 거치게 된다.
1. XMLHttpRequest 객체 생성
2. 웹 서버에 요청 전송하기
3. 웹 서버에서 응답이 도착하면 화면에 반영하기
위의 과정에 맞게 차례대로 살펴보자.
1) XMLHttpRequest 객체 생성
XMLHttpRequest 객체를 생성하는 방식은 브라우저마다 서로 다르다.
따라서 크로스 브라우징을 위한 코드를 작성하게 되면 아래와 같다.
var req;
if(window.XMLHttpRequest){ // IE 이외에서 XMLHttpRequest 생성
req = new XMLHttpRequest();
}else if(window.ActiveXObject){ // IE에서 XMLHttpRequest 생성
req = new ActiveXObject("Microsoft.XMLHTTP");
}
2) 웹 서버에 요청 전송하기
XMLHttpRequest 객체를 생성한 다음에는 생성한 XMLHttpRequest 객체를 사용해서 웹 서버에 요청을 전송할 수 있따.
웹 서버에 요청을 전송할 때 사용되는 함수는 다음과 같다.
•open() 함수 : 요청의 초기화. GET/POST 선택. 접속할 URL 입력
•send() 함수 : 웹 서버에 요청 전송
위의 두 함수를 이용하는 방식은 아래와 같다.
req.open("GET", "/test.txt", true);
req.send(null);
open() 함수는 세 개의 인자를 입력받는데, 다음과 같은 의미를 가지고 있다.
1번 인자는 HTTP 메소더를 지정한다.대개 "GET", "POST" 등을 사용한다. 이외에 서버에서 지원하는 HTTP 메서드인 PUT, DELETE,
HEAD 등이 되기도 한다.
2번 인자는 접속할 URL을 입력한다. 보안상 이유로 접속할 URL은 현재 페이지와 같은 도메인에 있어야 한다.
3번 인자는 동기/비동기 방식을 지정한다. 이 값이 'true'일 경우, 이 상태에서는 요청이 처리되는 도중에 사용자가 다른 작업을
할 수 있다. 반대로 'false'이면 요청은 동기적으로 처리되어서 요청이 종료될 때까지 사용자는 차단될 것이다.
3) 서버 응답 처리하기
open()함수와 send()함수를 사용하여 웹 서버에 데이터를 전송한 다음에 할 작업은 서버로부터 응답이 도착하면 알맞게 처리하는 것이다.
XMLHttpRequest 객체의 속성 중 하나인
onreadystatechange는 응답이 도착하면 특정 자바스크립트 함수를 호출하게 한다.
하지만 우선 이를 처리하기 전에 요청한 응답이 XMLHttpRequest객체에 전달 될 때까지의 상태를 나타낸
readyState에 알아보자.
각 상태에 따라 readyState 속성의 값이 아래와 같게 된다.
| 값 |
의미 |
설 명 |
| 0 |
UNINITIALIZED |
객체만 생성되고 아직 초기화되지 않은 상태 |
| 1 |
LOADING |
open 메서드가 호출되고 아직 send 메서드가 불리지 않은 상태 |
| 2 |
LOADED |
send 메소드가 불렸지만 status와 해더는 도착하지 않은 상태 |
| 3 |
INTERACTIVE |
데이터의 일부를 받은 상태 |
| 4 |
COMPLETED |
데이터를 전부 받은 상태. 완전한 데이터의 이용 가능 |
이렇듯 상태에 맞는 작업을 아래의 코드처럼 사용하여 처리하는 것이 가능해진다.
function callback(){
if(req.readyState == 1 || req.readyState == 2 || req.readyState == 3){
// 화면에 서버에서 작업 중이라는 메시지 출력
}else if(req.readyState == 4){
// 서버에서 완전한 응답이 도착한 경우
// 응답 결과에 따라 알맞은 작업 처리
}
}
XMLHttpRequest 객체의 또 다른 속성인
status는 웹 서버에서 전달한 상태코드를 저장하게 된다.
status 속성에 저장되는 주요 상태 코드는 아래와 같다.
| 값 |
텍스트 |
설 명 |
| 200 |
OK |
요청 성공 |
| 403 |
Forbidden |
접근 거부 |
| 404 |
Not Found |
페이지 없음 |
| 500 |
Internal Server Error |
서버 오류 발생 |
따라서 서버로부터 응답이 도착하면 status 속성을 사용해서 요청이 성공적으로 수행되었는지 확인해야 한다.
다음과 같이 콜백 함수를 작성하는 것이 좋을 것이다.
function callback(){
if(req.readyState == 4){
if(req.status == 200){
// 정상적으로 수행하는 부분
}else{
alert("문제 발생:"+req.statusText);
}
}
}
마지막으로
responseText 속성에 대해 알아보자.
웹 서버로부터 정상적으로 요청이 들어오게 될 경우 웹 서브는 단순 텍스트 또는 XML의 두가지 형식으로 데이터를 전송하게 된다.
이 중 단순 텍스트로 응답이 왔을 때 사용하는 예제는 다음과 같다.
function callback(){
if(req.readyState == 4){
if(req.status == 200){
var txt = req.responseText;
// txt 변수에 응답 데이터가 저장된다.
}
}
}
이를 바탕으로 예제를 하나 살펴보자.
바로가기 소스보기
소스보기
exam.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="exam.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<body>
입력창에 입력 후 '확인'버튼을 누르시면 글이 바뀌게 됩니다.
<a href="source.html" target="_blank">소스보기</a>
<br/><br/>
<div id="head">Hello, Guest!</div>
<input id="name" type="text" value="이름을 입력하시오." onkeyup="change()"/>
</body>
</html>
var req;
// input에 문장을 넣었을 때 정답을 확인하기 위한 XHR 객체 생성
function change(){
var name = document.getElementById('name').value;
var url = "exam.jsp?name=" + name;
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("Get",url,true);
req.onreadystatechange = callback;
req.send("");
}
// callback 함수
function callback(){
if(req.readyState == 4){
if(req.status == 200){
var txt = req.responseText;
document.getElementById('head').innerHTML = txt;
}
}
}
<%@ page contentType="text/plain; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%
String name = request.getParameter("name");
String a = new String(name.getBytes("ISO-8859-1"),"euc-kr");
out.print("Hello," + a + "!");
%>
출처:
http://compstat.chonbuk.ac.kr/JavaScript/
