이제 드디어 Ajax 프로그래밍 예제를 만들기에는 충분한 과정을 거쳤습니다.
프로그래밍을 하기 위해서는 사전에 이것저것 많이 읽어보고 뒤져보고.. 하는 것도 중요합니다.
그리고 처음 부터 어떠한 주제를 가지고 시작하는 것도 중요합니다.
하지만, 만약, 어려운 주제를 선택하셔서 그 주제를 달성하지 못하시면 후일에 가서는 "아.. 내가 저걸 못해서 포기했구나" 라는 생각이 들곤합니다.
이번에 우리는 아주 간단한 예제를 통해서 우선 Ajax 프로그래밍에 대한 감각을 키워보고, 대충~~~ 어떻게 돌아가는 구나... 라는 감각을 키우시면 됩니다.
그리고 본 예제는 서버에서 구동하는 데이터, 웹 파일을 가져오는 것이 아니라, 로컬에 있는 파일을 활용하기 때문에, 한번쯤은 반드시 거치시는 것이 중요하리라 생각이 듭니다.
그럼~! 예제를 만들어 보죠.
이번 예제의 주제는
같은 폴더에 있는 HTML 파일을 읽어와 그 내용은 자신의 페이지에 뿌려주기~!
입니다.
이번 예제에서는 총 3개의 파일이 필요합니다.
1. AjaxLib.js
: 이파일은 우리가 지난 글에서 만들었던 파일이죠. 혹시, 모르시는 분 있으시다면, 바로가기를 눌러주세요.
2. 그리고, Ajax 프로그래밍을 할 html 파일입니다. 파일명은 " first.html " 이라고 짓죠.
3. 마지막으로는, first.html 파일에서 불러올 같은 위치에 존재하게 될 데이터 파일 역할을 할, data.html 파일입니다.
파일을 하나하나씩 만들기 전에~~~
폴더를 하나 생성합시다.
C:\Ajax\step1 이렇게 Ajax 폴더를 만드시고 그 안에 step1을 만드셔서 앞으로 만들거나 복사할 3개의 파일은 모두 이곳에 넣으시면 됩니다.
* 폴더의 위치는 마음대로 하셔도 됩니다~ ^^
그냥.. 체계성 유지하자고~~~~ 하는겁니다 ^.^
그리고 이제 step1 폴더에 AjaxLib.js 파일을 복사해 주세요.
이 라이브러리를 통해 first.html은 통신을 하게 됩니다.
다음으로는, 데이터파일 역할을할 " data.html " 파일을 만들어보죠.
메모장이나 기타 등등의 에디터 프로그램을 하나 만드시고요~!
거기에 다음같이 간단하게 몇줄 적어 넣습니다.
<html>
<body>alpha,delta</body>
</html>
정말 간단하죠?? 이건 거의 데이터 파일로써의 역할을 하게 되니까요~!
이렇게 하시면 됩니다.
그리고 파일명은~ " data.html "로 저장하시는거 잊지마시고요.
어디에? step1 폴더에 넣으시면 됩니다.
자~ 그럼, 다음으로는 뭘해볼까요... 이번에는 마지막으로 Ajax프로그래밍을 해보죠~~!
우선, 에디터나 메모장에다가 다음과 같이 적고 " first.html"이라고 저장을 하죠.
<html>
<head>
<title>Ajax Test</title>
<script language="javascript" type="text/javascript" src="AjaxLib.js"></script>
</head>
<body>
<div id="results"></div>
</body>
</html>
위와 같이 내용을 기재하시고 저장을 하셔도 아무것도 안보이실 겁니다.
하지만, 큰 골격은 잡아 놓은 샘이죠.
검은색 굵은 글씨는 우리가 만든 AJAX 라이브러리입니다.
빨간색 굵은 글씨는 작업의 결과가 표시될 곳입니다.
검은색과 빨간색 글씨로 표시한 부분들이 전체 코드의 뼈대 역할을 하기 때문에 매우 중요하다고 볼 수 있습니다.
그럼 아래의 소스코드 같이 한번 작성해 보세요.
<html>
<head>
<title>Ajax Test</title>
<script language="javascript" type="text/javascript" src="AjaxLib.js"></script>
<script language="javascript" type="text/javascript">
//이 함수는 Ajax 콜을 하고 난 뒤 상황이 변할때 마다 호출이 됩니다.
function handlerStateChange() {
//이 부분은 호출이 완전히 완료가 되었는지를 검사합니다.
if (xmlHttp.readyState == 4)
{
//Http 프로토콜을 이용할때 완료시 STATUS 값은 200이 됩니다.
if (xmlHttp.status == 200) {
viewResult();
}
//로컬 파일 시스템 이용할때 완료시 STATUS 값은 0이 됩니다.
//이번 예제에서는 이부분이 호출이 되겠죠~!
if (xmlHttp.status == 0) {
viewResult();
}
}
}
//handlerStateChange() 함수에서 작업을 어떻게 할지.. 처리를 하는 함수입니다.
function viewResult() {
//<div id="results"></div> 이부분에 xmlHttp 변수의 responseText 속성 즉, 텍스트 값을
//가져오는 부분이 되겠습니다.
document.getElementById("results").innerHTML = xmlHttp.responseText;
}
</script>
</head>
<body>
<form action="#">
//AJAX 호출을 하게 되는 함수입니다.
//startRequest 함수는 AjaxLib.js 에 구현되어 있죠!
<input name="hello" type="button" value="Get Source"
onclick="startRequest('POST', 'data.html', 'handlerStateChange');" />
</form>
<div id="results"></div>
</body>
</html>
자~~~ 이제는 웹 브라우저를 여시고,
C:\Ajax\step1에 있는 first.html 파일을 엽니다.
그럼,
위의 그럼 처럼 아무것도 나오지 않고 버튼하나 덜렁 나올 겁니다.
위의 [Get Source] 버튼을 누르시면,
빨간 박스의 내용처럼 "alpah,delta"가 출력 되게 됩니다~!
어떤가요?
이번에 설명드린 로컬 웹 문서 불러와 출력하는 AJAX 예제 잘 따라오셨나요?
이 기본적인 AJAX 예제 코드들을 응용하면 참 재밌는 것들을 많이 만드실 수 있습니다.