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

황제낙엽 2007.08.24 14:13 조회 수 : 7497 추천:203

sitelink1  
sitelink2  
sitelink3  
extra_vars4  
extra_vars5  
extra_vars6  
https://www.omnibuscode.com/zeroboard/zboard.php?id=seeyou_programing_javascript&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=38원본 소스 및 자세한 설명은 링크#1에서...

1. Test HTML
·미리보기 | 소스복사·
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. >  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. <title>Insert title heretitle>  
  7. <script src="http://localhost:8080/pms/js/prototype/prototype.js" type="text/javascript">script>  
  8. <script language="javascript">  
  9.     function ajaxRequest(strResponseURL){   
  10.         var httpObj = new Ajax.Request (   
  11.             strResponseURL, {   
  12.                 parameters:Form.serialize('frm'),   
  13.                 //onSuccess:displayJson,                // 성공했을 경우, displayJson 함수 호출   
  14.                 onSuccess:displayTextHtml,          // 일반 텍스트나 html 형식을 경우   
  15.                 onFailure:displayError              // 실패 했을 경우, displayError 함수 호출   
  16.             }   
  17.         );   
  18.     }   
  19.        
  20.     function displayJson(responseHttpObj) {   
  21.         var returnData = responseHttpObj.responseText;  // 만약 XML 형태로 데이터를 받아온다면 responseHttpObj.responseXML   
  22.         returnData = eval("(" + returnData + ")");   
  23.         switch (returnData.dataType) {   
  24.             // 사실 응답 페이지가 utf-8로 저장되었다면 decodeURIComponent를 안써도 상관없지만, 그래도 혹시나 하여 사용   
  25.             case 'one' : $("results").innerHTML = decodeURIComponent(returnData.response);   
  26.             break;   
  27.             case 'array' : viewResponse(returnData.response);   
  28.             break;   
  29.             default : $("results").innerHTML = decodeURIComponent(returnData);   
  30.         }   
  31.     }   
  32.        
  33.     function displayTextHtml(responseHttpObj) {   
  34.         var returnData = responseHttpObj.responseText;   
  35.         $("results").innerHTML = decodeURIComponent(returnData);   
  36.     }   
  37.        
  38.     function displayError() {   
  39.         $("results").innerHTML = 'AJAX failed';   
  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. script>  
  54. head>  
  55. <body>  
  56.     <h3>AJAX in prototype.js Exampleh3>  
  57.     <form id="frm">  
  58.               
  59.         <p><input type="button" value=" 확인 " onclick="ajaxRequest('sso/userAction.do');">p>      
  60.     form>  
  61.     <div id="results">[Results Area]div>      
  62.           
  63. body>  
  64. html>  



2. Spring Controller
·미리보기 | 소스복사·
  1. import java.io.PrintWriter;   
  2.   
  3. import javax.servlet.http.HttpServletRequest;   
  4. import javax.servlet.http.HttpServletResponse;   
  5.   
  6. import org.springframework.web.servlet.ModelAndView;   
  7. import org.springframework.web.servlet.mvc.Controller;   
  8.   
  9. import com.seeyouservice.pms.common.TestStaticField;   
  10.   
  11. public class UserAction implements Controller {   
  12.   
  13.     public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception {   
  14.   
  15.         PrintWriter out = response.getWriter();   
  16.         if(TestStaticField.TESTACCOUNT != null) {   
  17.             out.println(TestStaticField.TESTACCOUNT.getUserid());   
  18.         } else {   
  19.             out.println("nobody");   
  20.         }   
  21.         out.close();   
  22.         return null;   
  23.     }   
  24.        
  25. }  

이 게시물을
목록
번호 제목 글쓴이 날짜 조회 수
81 마우스 드래그(drag)시 iframe 위에서 컨트롤 잃는 현상과 해결 방안 황제낙엽 2017.12.12 18478
» 매우 간단한 AJAX 예제 - prototype.js 이용 (JSP) 황제낙엽 2007.08.24 7497
79 [re] XML+JS 연동 다중셀렉트박스 (2) - [AJAX] <font color="brown">(MS Explorer 전용)</brown> 황제낙엽 2006.02.22 1559
78 Redux: React 앱의 효율적인 데이터 교류 file 황제낙엽 2020.05.19 740
77 json을 이용한 로그인 구현 file 황제낙엽 2011.03.25 601
76 How Prototype extends the DOM (Prototype으로 DOM을 확장하는 법) 황제낙엽 2011.03.24 444
75 $.ajax() 공략 file 황제낙엽 2011.03.27 415
74 Dojo로 HTML 위젯 개발하기 - Dojo HTML 위젯 황제낙엽 2009.03.18 363
73 Building Your Own Widget Library with YUI 황제낙엽 2009.04.16 321
72 15+ jQuery Popup Modal Dialog Plugins and Tutorials 황제낙엽 2011.03.30 280
71 XML+JS 연동 다중셀렉트박스 (1) - [AJAX] <font color="brown">(MS Explorer 전용)</brown> 황제낙엽 2005.12.02 241
70 Jasmine 관련 황제낙엽 2020.01.13 240
69 다섯 가지의 Ajax 우수 사례 황제낙엽 2011.04.07 219
68 Spring에서 DWR Annotation 사용하기 file 황제낙엽 2009.10.28 151
67 [펌] 6. DOJO AND JSON file 황제낙엽 2009.03.11 137
66 Ajax 관련 사이트 정리 황제낙엽 2006.04.20 132
65 웹 개발 패러다임의 전환 - Flex와 Ajax의 동거 황제낙엽 2006.12.21 125
64 XML+JS 연동 다중셀렉트박스 (1) - [AJAX] <font color="brown">(MS Explorer 전용)</brown> 황제낙엽 2005.12.02 125
63 DWR 2.0 and Spring 2.x - The DWR namespace handler 황제낙엽 2009.05.16 124
62 관심 사이트 황제낙엽 2009.03.12 116
쓰기 태그