test1.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">
//XML개체생성
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="test1_ok.jsp?num1="+num1+"&num2="+num2+"&oper="+oper;
// 서버가 처리를 끝내고 결과를 돌려줄 경우 호출할 자바 스크립트 함수 이름
xmlHttp.onreadystatechange=callback;
//GET 방식
xmlHttp.open("GET", url, true); // 보낼 옵션을 설정함 - 어떤방식으로 보낼지, 주소, true 비동기(false 동기)
xmlHttp.send(null); // 보냄
}
// 서버처리끝나고 호출되는 함수
function callback(){
if(xmlHttp.readyState==4){ // 모든 응답 완료
if(xmlHttp.status==200){ // 상태코드(OK)
printData();
}
}
}
function printData(){
var xmlDoc=xmlHttp.responseXML; // 쏜거 받을 때 개체 생성
var result=xmlDoc.getElementsByTagName("resul")[0]; // result 태그를 받아온다. Elements의 s는 배열을 의미한다. result의 0번째 태그의 데이터를 가져옴.
var val=result.firstChild.nodeValue;
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>
===============================================================================================================================================================
test1_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 answer = "";
if (oper.equals("add")) {
answer = String.format("%d+%d=%d", num1, num2, (num1 + num2));
} else if (oper.equals("sub")) {
answer = String.format("%d-%d=%d", num1, num2, (num1 - num2));
} else if (oper.equals("mul")) {
answer = String.format("%d*%d=%d", num1, num2, (num1 * num2));
} else if (oper.equals("div")) {
answer = String.format("%d/%d=%d", num1, num2, (num1 / num2));
}
//xml을 만듬(반드시 한개이상의 태그가 있어야함, 태그의 시작과 끝이 있어야함, 대소문자 구분함)
StringBuffer sb = new StringBuffer();
sb.append("<root>");
sb.append("<resul>" + answer + "</resul>");
sb.append("</root>");
response.setContentType("text/xml;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.print(sb.toString());
%>
'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 기본 예제2 GET방식(예제1보다 심플) (0) | 2013.08.01 |