본문 바로가기
프로그램 (PHP,Python)

jQuery를 이용한 Ajax 구현

by 날으는물고기 2009. 7. 19.

jQuery를 이용한 Ajax 구현

Eclipse에서 쉽게 jQuery를 이용하기 위해서 Aptana 플러그인을 먼저 다음 순서대로 설치한다.

Eclipse 3.4 Instructions

  1. From the Help menu in Eclipse, select Software Updates ...
  2. Select the Available Software tab
  3. Click the "Add Site..." button.
  4. Specify the Location Url update site: http://update.aptana.com/update/studio/3.4/ and click OK
  5. Select the checkbox next to the added update site.
  6. Click the Install.. button.
  7. Complete instruction to install from update site.

설치 도중 에러 메시지가 나타날 수 있지만 계속 설치를 진행한다.

jQuery 관련 스크립트를 작성할 경우 편집하고자 하는 페이지를 선택한 후 마우스 오른쪽 버튼을 누르고, 컨텍스트 대화상자가 나타나면 [Open With]-[Other..]-[Aptana HTML Editor]를 선택한다.

요청을 하는 페이지: index.jsp

 <%@ page language="java" contentType="text/html; charset=EUC-KR"
   
pageEncoding="EUC-KR"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>jQuery Demo</title>

 

<style type="text/css">

    #result {

        width: 160px;

        height: 160px;

        border: 2px solid #499BD7;

    }

</style>

 

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){

        //

        $('#loadButton').click(function(){

           //alert('Test');

           $.post('response.jsp',{nickname:'munklsnim'},function(data){

               $('#result').html(data);

           });

        });

       

        //

        $('#clearButton').click(function(){

           $('#result').empty();

        });

       

    });

</script>

</head>

<body>

<button id="loadButton">Image Load</button>

<button id="clearButton">Clear</button>

<div id="result"></div>

</body>

</html>

응답하는 페이지: response.jsp

 <%@ page language="java" contentType="text/html; charset=EUC-KR"

    pageEncoding="EUC-KR"%>

 

<%

    request.setCharacterEncoding("utf-8");

    //System.out.println(request.getParameter("nickname"));

    String nickname = request.getParameter("nickname").toString();

    String fileName = nickname+".gif";

%>

 

<img src="<%=fileName%>"></img>

출력 결과:

 초기 상태

Image Load 버튼을 눌렀을 때 

 Clear 버튼을 눌렀을 때



출처 : http://blog.naver.com/barlack

728x90

댓글