티스토리 뷰

Ajax/Ajax with PHP

[ Ajax 강좌 ] 2강. Prototype을 활용한 Ajax 기초1

멍발멍발 2008. 12. 23. 17:48
안녕하세요. 이틀만에 2강까지 올리네요. ㅎㅎ
바쁘게 글을 써내려가는것 같습니다.

Ajax 강의를 진행하기 위해 여러가지를 생각해 보았습니다.
실제로 우리가 Ajax를 사용해 Application 을 개발할 때 중요한 것이 무엇일까.
기반 지식을 통해 기술을 얻는 것과 실제적인 기술만을 익히는 것중 어느것이 더 필요할까. 라는 것에 대해 조금 고민을 해봅니다.

제가 제목을 "Prototype을 활용한..." 이라고 적어놓은 것은 기반지식을 얻기 전에 실제적인 기술을 배우고 그 이후에 그런 예제를 통해서 기반지식에 대해 알아보자. 라는 생각에서 입니다.

실제로 AJAX를 다루기 위해서는 기반지식인 XmlHttpRequest를 이용하여 간이 라이브러리를 작성해보고 그것을 테스트 해보고 하는 과정이 필요합니다. Prototype은 그러한 라이브러리를 기본적으로 제공해 주는 기능을 하는 것이지요.

일반적으로 Prototype 이라 함은 소프트웨어 공학에서 사용자에게 또는 그것을 상용화 하려는 자에게 보여주기 위한 데모버전 정도라고 여겨집니다. 하지만 여기서 제가 말씀드리는 Prototype은 Ajax 라이브러리 중의 하나로 널리쓰이고 있는 자바스크립트 프레임워크 라고 보시면 됩니다. 물론 소스는 공개되어 있고요.^^
http://www.prototypejs.org/ 에서 다운 받으실 수 있습니다.

자 그러면 이제 실제로 테스트를 해보겠습니다.
어떤 과정을 거쳐 페이지를 불러오게 되느냐 라는 것이지요.
시작하기 전에 서버 환경 및 준비물을 살펴보면 아래와 같습니다.

MySQL : UTF-8 을 지원
PHP 버전정보 : http://wowajax.mireene.com/test.php
Editor : Editplus 또는 UltraEdit 가 사용하기 편한것 같습니다. 제가 느끼기엔^^;;

::Prototype 을 미리 다운로드 하여 계정에 올려주시기 바랍니다.

꼭 같은 환경을 설정하셔야 하는 것은 아닙니다.
자 그럼 실제로 코딩을 진행해 봅시다..!!

파일은 다음 두가지가 필요합니다.
1) 우리가 불러오려고 하는 파일 ( 실제 값이 저장되어있는 곳 :: lect1_data.php )
2) 불러들여서 보여지게 할 파일 ( 1번 파일 호출페이지 :: lect1.php )

그럼 실제 우리가 코드를 사용해야 하는 부분은 어떤 파일일까요?
........................ 2번째 파일이겠지요. 호출을 할 부분이니까요.
1번파일에는 우리가 불러오려고 하는 데이터만이 들어있을 것 입니다.

오늘은 간단하게 텍스트를 읽어오는 부분을 하겠습니다.
파일은 아래와 같이 작성해 주시면 됩니다.

1번 파일 ( lect1_data.php )
Hello World
//일단 데이터는 영문데이터만 사용합니다. 한글데이터는 인코딩 설정이 필요하기 때문에 복잡해 지기 때문입니다. 한글데이터 처리 부분은 나중에 상세히 집고 넘어갈 것입니다.


2번파일 ( lect1.php )
<html>
<head>
 <script src="./prototype.js"></script>
 <script>
  function loading()
  {
   var url="./lect1_data.php";
   new Ajax.Request(url,
   {
    onLoading  : function() {
     alert("불러오는 중입니다.");
    },
    onSuccess  : function(returnValue)
    {
     alert(returnValue.responseText);
    },
    onFailure: function() {
     alert("불러오기 실패!!");
    },
    onComplete : function() {
     alert("모든 것을 완료하였습니다!");
    }
   });
  }
 </script>
</head>
<body>
 <input type="button" value="로딩시작!!!" onClick="loading()";>
</body>
</html>

자 그럼 설명을 시작하겠습니다.
1번파일은 설명이 필요 없겠지요? ㅎㅎ 데이터만 들어있는 공간입니다. (오늘은 텍스트이지만 다음엔 XML데이터겠지요? ^^)

2번파일을 봅시다. 실제 우리가 1번 파일을 호출해서 가지고 오고 값을 출력해 주는 형태입니다. 전체적인 흐름을 설명하자면 Prototype에서 제공해주는 Ajax.Request라는 함수를 사용해서 1번파일에 들어있는 "Hello World" 라는 값을 가져와 alert창에 뿌려주는 형태를 가지고 있습니다.

자 그럼 하나하나 보겠습니다.

<script src="./prototype.js"></script> 를 통해 prototype.js 파일을 인크루드 시킵니다.
그리고  loading() 함수를 정의하고 그 안에서는 Ajax.Request를 통해 호출을 진행하게 됩니다.\

Ajax.Request 함수를 이 소스를 통해 보자면 처음으로 호출하는 url이 들어가고, 그리고 이벤트에 관한 정보를 쭉 나열하게 됩니다. (다음강좌에서는 파라미터를 넘겨주는 부분도 포함하겠습니다.)

그럼 각각의 이벤트를 보겠습니다.
onLoading : 로딩중일때 발생.
onSuccess : 연결이 정상적으로 완료되었을 때 발생.
onFailure : 연결이 실패되었을 때 발생.
onComplete : 연결과 데이터 전송이 완료 되었을 때 실행.

소스에서는
○ onLoading  : alert("불러오는 중입니다.") ::::::: alert창을 띄웠습니다.
○ onSuccess  : function(returnValue)에서 returnValue를 받아옵니다. (변수는 아무거나 쓰셔도 상관없습니
                      다.)  returnValue는 object 형태로 넘어오게 됩니다. 여기서 오브젝트에 포함된 Text를 가져
                      오고자 했기 때문에  returnValue.responseText 로 결과값을 받아와서 aler으로 띄워주도록 
                      했습니다.
○ onFailure: alert("불러오기 실패!!") :::::: 연결이 정상적으로 진행되므로 실행되지 않겠지요.
○ onComplete : alert("모든 것을 완료하였습니다!") ::: 결과적으로 연결이 실패됐든 성공됐던 간에 완료되었
                      을 때 발생하여 실행합니다.

위와 같이 데이터를 가져와서 alert창을 띄워주도록 했습니다. 하지만 실행속도가 빨라 그 차이는 느끼지 못하실 수 있으시겠지만 띄워보시면 로딩메시지가 뜬 후 Success 메시지가 뜨는 것을 알 수 있으실 것입니다. 그리고 그러한 창을 모두 닫은 후에 Complete 메시지가 출력됨을 아실 수 있으실 것입니다.

또한 위에서 말씀드렸던 returnValue.responseText 는 오브젝트에서 가져온 text를 얻기위한 방법이고, 나중에 XML데이터를 가져오실때는 returnValue.responseXML 을 통해 각각의 데이터를 XML 형식으로 가져오실 수 있습니다. 물론 XmlNode 오브젝트를 통해 그 데이터를 사용하실 수 있겠지요. 이렇게 간단한 텍스트를 가져오는 방식을 통해서 사실 확인 등의 처리가 가능합니다. 간단한 예로 로그인 처리를 들 수 있겠습니다. 로그인시에 아이디와 비밀번호를 받아와 파라미터로 넘겨주고 파라미터를 가지고 data파일에서 확인후에 로그인이 되었다면 return 1 / 아이디가 없다면 -1 / 비밀번호가 틀렸다면 0  -> 이런식으로 텍스트를 받아와 제어문으로 페이지 전환 처리를 하면 되겠지요. 물론 세션처리와 같은 로그인 처리는 data 파일에서 실행을 해주어야 보안상 안전할거라 생각됩니다.

간단한 예제로 alert 창을 띄우지 않고 div에 넣어 이벤트 흐름이 어떻게 되는지 정확히 알아보고 넘어가겠습니다. data파일은 그대로 사용할 것이기 때문에 그냥 두셔도 되고요. data파일을 호출하는 페이지를 하나 더만들어보도록 하겠습니다.

lect2.php
<html>
<head>
 <script src="./prototype.js"></script>
 <script>
  function loading()
  {
   var url="./lect1_data.php";
   new Ajax.Request(url,
   {
    onLoading  : function() {
     document.getElementById("loadData").innerHTML += "<br> 로딩중입니다.";
    },
    onSuccess  : function(returnValue)
    {
     document.getElementById("loadData").innerHTML += "<br>"+returnValue.responseText;
    },
    onFailure: function() {
     document.getElementById("loadData").innerHTML += "<br>불러오기 실패!!";
    },
    onComplete : function() {
     document.getElementById("loadData").innerHTML += "<br>모든 것을 완료하였습니다!";
    }
   });
  }
 </script>
</head>
<body>
 <input type="button" value="로딩시작!!!" onClick="loading()";>
 <div id="loadData"></div>
</body>
</html>

위의 소스는 lect1.php 파일과 흡사하지만 body 부분에 <div> 를 하나 추가하였고, 스크립트 부분에 alert이 아닌 document객체를 사용하여 특정공간에 집어넣도록 하였습니다.
document.getElementById 를 통하여 ID를 이용한 특정 공간으로의 접근이 가능합니다. 여기서는 loadData라는 div 공간으로 접근을 하였고 그곳에 innerHTML 을 사용하여 로딩중입니다 라는 값을 집어넣도록 하였습니다. 실제로 다음과 같은 결과값을 얻을 수 있습니다.


로딩 시작 버튼을 실행 후 화면인데 로딩속도가 느리다면 눈으로 불러오는 결과들을 확인 하실 수 있으실 것입니다.  이상으로 2강을 마치고 3강에서는 XML 데이터를 가져와 파싱하여 테이블로 나타내는 것을 한번 해보겠습니다.!!

글이 길고 지루한데 읽어주신 분들 감사합니다. ㅎㅎ 태클은 언제나 환영입니다^^

lecture1.zip

오늘 연습한 소스파일을 첨부합니다.