test2.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<%@page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String cp = request.getContextPath();
%>
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function createXMLHttpRequest(){
var xmlReq=null;
if(window.XMLHttpRequest){ // non IE
xmlReq=new XMLHttpRequest();
}else if(window.ActiveXObject){ //IE
xmlReq=new ActiveXObject("Msxml2.XMLHTTP");
}
return xmlReq;
}
//전역변수
var xmlHttp;
function sendData(){
var num1=document.getElementById("num1").value;
var num2=document.getElementById("num2").value;
var oper=document.getElementById("oper").value;
xmlHttp=createXMLHttpRequest();
var url="test2_ok.jsp?num1="+num1+"&num2="+num2+"&oper="+oper;
// 서버가 처리를 끝내고 결과를 돌려줄 경우 호출할 자바 스크립트 함수 이름
xmlHttp.onreadystatechange=callback;
//GET 방식
xmlHttp.open("GET", url, true); // 보낼 옵션을 설정함 - 어떤방식으로 보낼지, 주소, true 비동기(false 동기)
xmlHttp.send(null); // 보냄, POST 방식은 인자에 null이나 "" 아닌 보낼 데이터를 보낸다
}
function callback(){
if(xmlHttp.readyState==4){ // 모든 응답 완료
if(xmlHttp.status==200){ // 상태코드(OK)
printData();
}
}
}
function printData(){
var val=xmlHttp.responseText; // 쏜거 받을 때 객체 생성
var out=document.getElementById("result");
out.innerHTML=val;
}
</script>
</head>
<body>
<input type="text" id="num1">
<select id="oper">
<option value="add">더하기</option>
<option value="sub">빼기</option>
<option value="mul">곱하기</option>
<option value="div">나누가</option>
</select>
<input type="text" id="num2">
<input type="button" value=" = " onclick="sendData();">
<br/>
<div id="result"></div>
</body>
</html>
==============================================================================================================================================
test2_ok.jsp
<%@page import="java.io.PrintWriter"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String cp = request.getContextPath();
int num1 = Integer.parseInt(request.getParameter("num1"));
int num2 = Integer.parseInt(request.getParameter("num2"));
String oper = request.getParameter("oper");
String result = "";
if (oper.equals("add")) {
result = String.format("%d+%d=%d", num1, num2, (num1 + num2));
} else if (oper.equals("sub")) {
result = String.format("%d-%d=%d", num1, num2, (num1 - num2));
} else if (oper.equals("mul")) {
result = String.format("%d*%d=%d", num1, num2, (num1 * num2));
} else if (oper.equals("div")) {
result = String.format("%d/%d=%d", num1, num2, (num1 / num2));
}
%>
<font color="blue"><%=result %></font>
'AJAX' 카테고리의 다른 글
| jquery로 여러개 데이터 파싱하기 : each (0) | 2014.03.27 |
|---|---|
| ajax - jsonp(미투데이 jsonp로 json 데이터 가져오기) (0) | 2014.02.12 |
| ajax의 jason,xml,text 출력 비교 (0) | 2013.08.08 |
| AJAX 기본 예제3 POST (회원가입양식에서 바로 검증) (0) | 2013.08.01 |
| AJAX 예제1 GET방식 (0) | 2013.07.31 |