ChangHoon's IT Blog
[AJAX] Ajax 실습 1 본문
오늘은 Ajax를 활용하여 html 화면에 내용을 띄우는 실습을 진행하겠습니다.
먼저 AjaxApp이라는 Dynamic Web Project를 만들어준뒤
WebContent폴더 내에 AjaxTest01.html 파일을 만들어줍니다.
<AjaxTest01.html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AjaxTest01.html</title>
<script type="text/javascript">
function loadXMLDocs()
{
// XMLHttpRequest 객체를 담을 변수 선언
var xmlHttp;
// (클라이언트측) 브라우저에 따른 분기
if(window.XMLHttpRequest) // 자신의 브라우저가 XMLHttpRequest 를 지원하고 있다면...
{
// 테스트
//alert("XMLHttpRequest 지원");
xmlHttp = new XMLHttpRequest();
//-- 이와 같은 방법으로 객체를 생성하고
}
else // 잣니의 브라우저가 XMLHTtpRequest 를 지원하지 않는다면...
{
// 테스트
//alert("XMLHttpRequest 지원 안함");
xmlHttp = new ActiveXObject("Microsoft.XMLHTTTP");
//-- 이와 같은 방법으로 객체를 생성해라
}
// ※ 객체를 생성하는 방법의 차이만 있을 뿐
// 여기까지 수행하면 XMLHttpRequest 객체 생성 완료~!!!
// 『xmlHttp』 : XMLHttpRequest 객체
// 서버로부터 응답이 오면 『readystatechange』 이벤트가 발생하게 된다.
// 『onreadystatechange』 : readystatechange 이벤트가 발생했을 때
// 동작할 수 있도록 이벤트 핸들러를 등록하는 과정
// 즉, 이와 같은 이벤트가 발생하게 되면
// 아래의 내용처럼 동작하게 된다.
xmlHttp.onreadystatechange = function()
{
// 응답이 올 때 마다
// readyState 가 그 상황에서의 XMLHttpRequest 상태가 저장하게 된다.
// 즉, readyState 는 XMLHTtpRequest 객체의 property 이다.
//==> readystatechange 이벤트는
// readystate 가 변경될 때 마다 발생하게 된다.
// ※ 『XMLHttpRequest』 의 『readyState』 는
// 0 에서 4 까지 순차적으로 변화한다.
// 0 → 요청이 초기화 되지 않음.
// 1 → 서버의 연결이 이루어지지 않음.
// 2 → 요청이 수신됨.
// 3 → 요청을 처리중.
// 4 → 요청의 처리가 종료되고, 응답이 준비됨.
// ※ 『XMLHttpRequest』 의 『status』 는 HTTP Status 코드를 의미한다.
// 200 → 올바른 응답
// 400 → 클라이언트 측 에러(404 페이지를 찾을 수 없음)
// 50x → 서버 측 에러(JAVA 에러)
if (xmlHttp.readyState==4 && xmlHttp.status==200)
{
// 이 구문을 통해 서버로부터 응답을 가져와 DOM 을 업데이트 하겠다는 의미
// 응답의 속성에는 두 가지가 있는데
// 『responseText』 는 텍스트 형식의 응답일 경우 사용하게 되고,
// 『responseXML』 은 응답이 XML 형식일 경우 사용하게 된다.
document.getElementById("myDiv").innerHTML = xmlHttp.responseText;
}
};
// 『XMLHttpRequest』 의 『open("페이지 요청방식", "URL", async(동기화))』 는
// XMLHttpRequest 객체를 필요한 값으로 초기화 하는데 사용하는 메소드이다.
// GET 방식이 아닌 POST 방식으로 요청하기 위해서는
// 『xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// xmlHttp.send(input1=value1$input2=value2);』
xmlHttp.open("GET","ajax_info.txt",true);
xmlHttp.send("");
}
</script>
</head>
<body>
<div id="myDiv">
<h1>Ajax 관찰</h1>
<hr>
</div>
<br><br>
<button type="button" onclick="loadXMLDocs()">Content 바꾸기</button>
</body>
</html>html 구문에는 button을 하나 생성하여 버튼을 누르게 되면 loadXMLDocs함수를 실행하여
누르게 되므로써 페이지 내용을 바꾸는 기능이 실행됩니다.
script단을 보면 loadXMLDocs 함수내에는 XMLHttpRequest 객체를 담을 변수를 선언해주고,
본인의 브라우저가 XMLHttpRequest를 지원하거나 지원하지 않는다면 객체 생성방법을 정의 해줍니다.
그 뒤 응답의 속성에는 두가지가 있는데
1. responseText ==> 텍스트 형식의 응답일 경우
2. responseXML ==> XML 형식일 경우
사용이 됩니다.
그리고 마지막 부분에 있는
xmlHttp.open("GET","ajax_info.txt",true);
xmlHttp.send("");이 부분에서 open의 구성은 open("페이지 요청방식", "URL", async(동기화)) 로 구성됩니다.
여기서 중요한 것은 open을 했으면 꼭 send를 해야 값들이 전달된다는 겁니다!!!
여기까지 준비가 되었으면 WebContent 폴더 내에 ajax_info.txt라는 파일을 만들어 줍니다.
이 파일은 Contetn바꾸기 버튼을 누르게 될 시 바뀌게 되는 내용을 구성하는 파일입니다.
AJAX is not a programming language.
AJAX is a technique for accessing web server from a web page.
결과 화면
다음시간에는 Ajax를 활용하여 페이지 내에서 계산이 가능한 실습을 진행해보겠습니다.