jQuery 이벤트 핸들러 이용하여 서버측 이미지를 비동기로 가져오는 예
| 오른쪽 테이블에 마우스를 올리고 위 아래로 이동해보세요 | A | |
| B | ||
| C | ||
| D |
서버측 코드(server_side.jsp)
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<%
String name = request.getParameter("name").toLowerCase();
String imgFile = null;
if(name.equals("a")) imgFile = "https://t1.daumcdn.net/cfile/tistory/14183F404F99613139";
else if(name.equals("b")) imgFile = "https://t1.daumcdn.net/cfile/tistory/1436A0404F9961311C";
else if(name.equals("c")) imgFile = "https://t1.daumcdn.net/cfile/tistory/1252E1404F99613105";
else if(name.equals("d")) imgFile = "https://t1.daumcdn.net/cfile/tistory/1236B6404F9961321C";
%>
<img src='<%=imgFile%>'/>
클라이언트측 코드(img_viewer.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>jQuery Event example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('td.data').bind('mouseover', function(){
var txt = $(this).text();
$.post("server_side.jsp", {name:txt}, function(data){ $('#img').html(data);});
});
});
</script>
<style>
table {width:700px; border:1px solid black; border-collapse: collapse; }
tr { height:40px; }
.data { background-color:#eeeeee; border:1px solid black; text-align: center; width:300px;}
</style>
</head>
<body>
<table>
<tr><td rowspan="4">우측 테이블에 마우스를 올려 보세요</td>
<td class="data">A</td><td rowspan="4"><div id="img" style="height:100px;width:100px;"></div></td></tr>
<tr><td class="data">B</td></tr>
<tr><td class="data">C</td></tr>
<tr><td class="data">D</td></tr>
</table>
</body>
</html>
<!--https://t1.daumcdn.net/cfile/tistory/14183F404F99613139
https://t1.daumcdn.net/cfile/tistory/1436A0404F9961311C
https://t1.daumcdn.net/cfile/tistory/1252E1404F99613105
https://t1.daumcdn.net/cfile/tistory/1236B6404F9961321C
-->
사용된 이미지
