Prototype 매우 간단한 AJAX 예제 - prototype.js 이용 (ASP)

황제낙엽 2007.08.08 23:26 조회 수 : 180 추천:134

sitelink1  
sitelink2  
sitelink3  
extra_vars4  
extra_vars5  
extra_vars6  
http://www.taeyo.pe.kr
매우 간단한 AJAX 예제 - prototype.js 이용
AJAX에 대해서 인터넷 검색을 하다 여기저기에 있는 것들을 허락없이 재구성했습니다.ㅜㅜ
활용처는 개발자의 상상력과 응용력에 따라 무한히 확장될 수도 있겠네요.
prototype.js를 이용하여 확장한 것이 바로 아래 것들, 
http://script.aculo.us/
http://openrico.org/
여기 나온 예제들도 함 봐보세요. 이런 걸 RIA라고들 하네요.
http://wiki.script.aculo.us/scriptaculous/show/Demos
http://openrico.org/rico/demos.page
몇 년전만 해도 정말 이런거 할려면 삽질에 삽질을 거듭해야 했는데...
세상 너무 좋아졌습니다...ㅜㅜ

AJAX는...
- 동일 도메인 내에서만 가능합니다.(웹 C/S라고들 하던데...)
  (만약 서버투서버(자바<->ASP)로 데이터 통신을 하고 싶다면 XML-RPC를 이용해 보세요. 
  순수 ASP로만 짜여진 것도 존재합니다.)
- XMLHTTPRequest를 이용하여 HTTP로 통신합니다.
   : XMLHTTPRequest는 utf-8로 처리합니다.
- AJAX를 이용한 MVC 모델2 패턴 개발 방법이 가능합니다.
- 자바스크립트로 서버측 데이터를 핸들링합니다.
- 자바스크립트로 OOP도 하네요...ㅡㅡ;


아래 샘플은 prototype.js 파일이 있어야 실행가능합니다.
www.prototypejs.org에서 prototype.js 파일을 다운로드 받으세요.^^

아래 샘플 이외에 Ajax.PeriodicalUpdater 함수도 함 사용해보세요.
지정한 초마다 응답 페이지에서 서버쪽 데이터를 끌어옵니다. 
물론 페이지 리프레쉬없이요.
이외에도 다른 함수를 보면 여러개의 이벤트를 동시에 실행할 수 있습니다.
api 참조하세요.
http://www.prototypejs.org/api




·미리보기 | 소스복사·
  1. <html>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />   
  4. <script src="lib/prototype/prototype.js" type="text/javascript"></script>   
  5. <script language="javascript">   
  6.     function ajaxRequest(strResponseURL){      
  7.         var httpObj = new Ajax.Request    (           
  8.             strResponseURL,         {               
  9.                 // 기본값은 비동기식, 동기식으로 작성할려면, api 참조               
  10.                 // method:'post',    // post가 기본값이므로 생략 가 능               
  11.                 parameters:Form.serialize('frm'),                   
  12.                 // form의 요소들을 통째로 응답페이지로 전송               
  13.                 onSuccess:displayJson,               
  14.                 // 성공했을 경우, displayJson 함수 호출               
  15.                 // onSuccess:displayTextHtml    // 일반 텍스트나 html 형식을 경우               
  16.                 onFailure:displayError               
  17.                 // 실패 했을 경우, displayError 함수 호출           
  18.             }       
  19.         );   
  20.     }   
  21.   
  22.     function displayJson(responseHttpObj){       
  23.         var returnData = responseHttpObj.responseText;       
  24.         // 만약 XML 형태로 데이터를 받아온다면 responseHttpObj.responseXML       
  25.         returnData = eval("(" + returnData + ")");       
  26.         switch (returnData.dataType)    {          
  27.             // 사실 응답 페이지가 utf-8로 저장되었다면 decodeURIComponent를 안써도 상관없지만,           
  28.             // 그래도 혹시나 하여 사용           
  29.             case 'one' : $("results").innerHTML = decodeURIComponent(returnData.response);           
  30.             break;           
  31.             case 'array' : viewResponse(returnData.response);           
  32.             break;    
  33.             default : $("results").innerHTML = decodeURIComponent(returnData);       
  34.         }   
  35.     }   
  36.   
  37.     function displayTextHtml(responseHttpObj){       
  38.        var returnData = responseHttpObj.responseText;       
  39.         $("results").innerHTML = decodeURIComponent(returnData);   
  40.     }   
  41.   
  42.     function viewResponse(data){       
  43.         var intLength = data.length;       
  44.         var strHTML = "";       
  45.         for(var i=0; i<intLength; i++)    {           
  46.             strUserID = decodeURIComponent(data[i].userID);           
  47.             strUserName = decodeURIComponent(data[i].userName);           
  48.             strHTML += "ID : " + strUserID + '<br>';            
  49.             strHTML += "이름 : " + strUserName + '<br>';           
  50.         }       
  51.        $("results").innerHTML = strHTML;   
  52.     }   
  53.   
  54.     function displayError(){       
  55.        $("results").innerHTML = 'AJAX failed';       
  56.     }   
  57.     
  58.     /*      
  59.     // 2번과 3번은 skip해도 됩니다.      
  60.     1. AJAX 응답 페이지는 utf-8로 인코딩하여 저장         
  61.     : 한글 처리를 위해서 반드시 필요         
  62.     : 여기서는 json.asp, json2.asp, json3.asp을 utf-8 인코딩 형 식으로 저장하였음.      
  63.     2. 응답 페이지에서 단일값을 전송할 경우,   
  64.     displayJson    {          
  65.         "dataType":"one",          
  66.         "response":"realsnake"      
  67.     }      
  69.     3. 응답 페이지에서 배열로 전송할 경우,   
  70.     displayJson    {          
  71.         "dataType":"array",          
  72.         "response":        [            {                  
  73.         "name":"realsnake",                   
  74.         "height":"???"            }        ]      
  75.     }      
  77.     4. 응답페이지에서 text나 html을 통째로 전송할 경우 : displayTextHtml  
  78.     */  
  79. </script>   
  80. </head>   
  81. <body>   
  82. <h3>AJAX in prototype.js Example</h3>   
  83. <p>prototype.js를 이용한 AJAX 예제</p>   
  84. <form id="frm">   
  85. <!--<input type="text" id="test" size="10">form의 요소의 값들 을 전송한다면, 받는 페이지에서는 strTest = Request("test")와 같이,일반적인 get/post 방식으로 받으시면 됩니다.//-->   
  86. <p><input type="button" value=" 확인 " onclick="ajaxRequest('json3.asp');"></p>   
  87. </form>   
  88. <div id="results">[Results Area]</div>   
  89. <!--위 div 태그 안의 내용은 AJAX로 받아온 데이터로 변경됩니다. //-->   
  90. </body>   
  91. </html>   
  92.   
  93. <!-- 이하 파일들은 반드시 utf-8 인코딩 방식으로 저장 //-->  


json3.asp
<%
    ' ---------------------------------
    ' asp 파일에서 DB 처리를 하고 결과 값을 넘겨도 잘 됩니다.
    ' 옵션대신 DB 처리결과를 함 넣어보세요.
    ' 그냥 일반 text만 써도 되고 아래처럼 html 태그를 같이 써도 됩니다.
    ' 아래 html코드와 텍스트가 그대로 위 div 태그에 페이지 리프레쉬없이 입력됩니다.
%>
<select name id="selectID" style="font-size:12px;">
<option value="1">옵션</option>
</select>
<%
' ---------------------------------
%>

json2.asp
<%
    ' 아래 예제들은 json(javascript object notation) 형태의 예제입니다.
    ' -------------------------------------
    ' 호출하는 페이지의 viewResponse 함수를 볼 것
%>
{
"dataType":"one",
"response":"응답"
}
<%
' -------------------------------------
%>

json.asp
<%
' -------------------------------------
' dataType이니 response니 하는 것들은 나름대로 데이터를 구조화하기 위하여 
' 임의적으로 작성하여 사용한 것입니다.
' 호출하는 페이지의 viewResponse 함수를 볼 것
%>
{
"dataType":"array",
"response":
[
{
"userID":"realsnake",
"userName":"누구신지"
}
]
}
<%
' --------------------------------------
%>

이 게시물을
목록
쓰기 태그