💫 LoadTest01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LoadTest01.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#btn .btnLoad").click(function()
{
$("#ctlGrid").load("LoadTest02.html");
window.alert("여기서 작성한 메세지가 먼저 출력된다.");
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 load() 활용 실습</h1>
<hr>
</div>
<div>
<div id="btn">
<div class="btnLoad">HTML 읽어오기 버튼</div>
</div>
<br>
<div id="ctlGrid">
</div>
</div>
</body>
</html>➰체크할 내용➰
1. $(document).ready()
- DOM이 완전히 로드된 후에 실행할 코드 정의
2. window.alert이 먼저 출력되는 이유
- load 메소드는 비동기적으로 작동한다. 따라서 내용 로딩이 완료될 때까지 기다리지 않고 바로 다음 코드를 실행한다.
그렇기 때문에 window.alert이 먼저 실행됨!
💫 LoadTest03
# web.xml, Test03Send.java 코드 생략~
# LoadTest03.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
request.setCharacterEncoding("UTF-8");
String cp = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LoadTest03.jsp</title>
<link rel="stylesheet" type="text/css" href="<%=cp %>/css/main.css">
<style type="text/css">
.txtNum
{
width: 100px;
text-align: right;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#sendButton").click(function()
{
var su1 = $("#su1").val();
var su2 = $("#su2").val();
var oper = $("#oper").val();
var url = "loadtest03.do?su1="+su1+"&su2="+su2+"&oper="+oper;
$("#result").load(url);
});
});
</script>
</head>
<body>
<div>
<h1>jQuery 의 load() 활용 실습</h1>
<hr>
</div>
<div>
<input type="text" id="su1" class="txt txtNum"/>
<select id="oper">
<option value="add">덧셈</option>
<option value="sub">뺄셈</option>
<option value="mul">곱셈</option>
<option value="div">나눗셈</option>
</select>
<input type="text" id="su2" class="txt txtNum"/>
<input type="button" value=" = " id="sendButton" class="btn">
</div>
<br>
<div id="result">
</div>
<br>
<br>
<div>
<input type="radio" name="rdo">rdo1
<input type="radio" name="rdo">rdo2
</div>
<div>
<input type="checkbox" name="chk">chk1
<input type="checkbox" name="chk">chk2
</div>
<div>
<input type="text" />
</div>
</body>
</html>
# LoadTest03.java
protected void doGetPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
// GET 방식이든 POST 방식이든
// 어떤 방식의 요청에도 모두 처리할 수 있는 사용자 정의 메소드
int su1 = Integer.parseInt(request.getParameter("su1"));
int su2 = Integer.parseInt(request.getParameter("su2"));
String oper = request.getParameter("oper");
String result = "";
if (oper.equals("add"))
result = String.format("%d + %d = %d", su1, su2, (su1+su2));
else if(oper.equals("sub"))
result = String.format("%d - %d = %d", su1, su2, (su1-su2));
else if(oper.equals("mul"))
result = String.format("%d * %d = %d", su1, su2, (su1*su2));
else if(oper.equals("div"))
result = String.format("%d / %d = %.2f", su1, su2, ((double)su1/su2));
request.setAttribute("result", result);
RequestDispatcher dispatcher = request.getRequestDispatcher("WEB-INF/view/LoadTest03_ok.jsp");
dispatcher.forward(request, response);
}
# LoadTest03_ok.java
<%@ page contentType="text/html; charset=UTF-8"%>
${result}
