AJAX 예제~! 로컬 웹 문서 불러와 뿌려주기~!
프로그래밍을 하기 위해서는 사전에 이것저것 많이 읽어보고 뒤져보고.. 하는 것도 중요합니다.
그리고 처음 부터 어떠한 주제를 가지고 시작하는 것도 중요합니다.
하지만, 만약, 어려운 주제를 선택하셔서 그 주제를 달성하지 못하시면 후일에 가서는
"아.. 내가 저걸 못해서 포기했구나" 라는 생각이 들곤합니다.
이번에 우리는 아주 간단한 예제를 통해서 우선 Ajax 프로그래밍에 대한 감각을 키워보고,
대충~~~ 어떻게 돌아가는 구나... 라는 감각을 키우시면 됩니다.
그리고, 본 예제는 서버에서 구동하는 데이터, 웹 파일을 가져오는 것이 아니라,
로컬에 있는 파일을 활용하기 때문에, 한번쯤은 반드시 거치시는 것이 중요하리라 생각이 듭니다.
그럼~! 예제를 만들어 보죠.
이번 예제의 주제는
입니다.
이번 예제에서는 총 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 " 파일을 만들어보죠.
메모장이나 기타 등등의 에디터 프로그램을 하나 만드시고요~!
거기에 다음같이 간단하게 몇줄 적어 넣습니다.
<body>alpha,delta</body>
</html>
정말 간단하죠?? 이건 거의 데이터 파일로써의 역할을 하게 되니까요~!
이렇게 하시면 됩니다.
그리고 파일명은~ " data.html "로 저장하시는거 잊지마시고요.
어디에? step1 폴더에 넣으시면 됩니다.
자~ 그럼, 다음으로는 뭘해볼까요... 이번에는 마지막으로 Ajax프로그래밍을 해보죠~~!
우선, 에디터나 메모장에다가 다음과 같이 적고 " first.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] 버튼을 누르시면,
'TeCHs-Computer > AJAX' 카테고리의 다른 글
| AJAX 예제~! 로컬 웹 문서 불러와 뿌려주기~! (0) | 2007/10/10 |
|---|---|
| AJAX 연결 라이브러리 구현하기~! (0) | 2007/10/10 |
| Ajax 호출 기반 서비스 서버 구축시 고려사항 (2) | 2007/10/07 |
| Ajax에서 상태 변화시 호출되는 함수를 함수명으로 지정하기. (0) | 2007/10/05 |
| Ajax 호출 흐름과 기본적인 준비 운동 2/2 (0) | 2007/10/05 |
| Ajax 호출 흐름과 기본적인 준비 운동 1/2 (0) | 2007/10/05 |
글을 서비스하는 이코노와이드(EconoWide) 블로그의 각종 포스트 내용과 소식들을
무료로 이메일을 통해 편리하게 받아보실 수 있습니다.
구글 피드버너 (Google FeedBurner) 시스템에 의해 기사가 이메일로 배달됩니다.
이메일로 구독하는 방법 자세히 보기
.png){kind=small}
댓글을 달아 주세요