728x90
반응형
Vanilla Js는 순수자바스크립트로 어떠한 라이브러리나 프레임워크를 쓰지 않는 자바스크립트를 일컫는다. 또한 vanilla Js는 자바스크립트 프레임워크로 다른 프레임워크나 jQuery보다도 압도적으로 빠르고 크로스 브라우징이 잘 되는 특성이 있다.
성적 처리 프로그램
1. 우선 xml에서 student.html 경로를 설정해주고 student.html 코드는 아래와 같이 작성했다. (xml 설명보기)
[Servlet]xml
Servlet을 사용하기 위해서는 xml파일에 servlet을 지정하거나 index.html에서 해당 서블릿을 호출해줄 수 있다. ※ xml 생성 방법: 프로젝트 우클릭 - Java EE Tools - Generate Deployment Descripter Stub x..
pro-growth.tistory.com
※ onload() 메소드가 담긴 score.js를 만들 예정이므로 script 소스에 "./score.js"를 추가해준다. "./"는 현재 내 파일이 위한 경로에 있는 score.js파일을 참고한다는 의미이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./score.js"></script>
</head>
<body>
<h1>성적 처리 프로그램</h1>
이름 : <input type="text" id="name"/><br>
국어 : <input type="text" id="kor"/><br>
영어 : <input type="text" id="eng"/><br>
수학 : <input type="text" id="math"/><br>
<input type="button" value="성적처리" id="process" onclick="load();"/><br>
<div id="result"></div>
</body>
</html>
2. score.js파일은 아래와 같이 작성한다. 세부 설명은 코드 내 주석으로 확인 가능하다.
//httpRequest.responseText : 서버에서 리턴받은 string
//JSON.parse : json형태의 string -> json object
//JSON.stringify : json object -> json형태의 string
function getParameterValues(){
var name = "?name="+encodeURIComponent(document.getElementById("name").value);
var kor = "&kor="+document.getElementById("kor").value;
var eng = "&eng="+document.getElementById("eng").value;
var math = "&math="+document.getElementById("math").value;
return name + kor + eng + math;
}
function load(){
var url = "cal.do"+getParameterValues();
//위 getParameterValues()에서 리턴받은 값이 들어가며
//결과적으로 "cal.do?name=입력값&kor=입력값&eng=입력값&math=&입력값"의 형태가 되고
//cal.do 서블릿으로 안내하는 경로가 된다.
console.log(url); // 제대로 경로가 담겼는지 확인을 위해 console로 출력해준다.
function load(){
var url = "cal.do"+getParameterValues();
console.log(url);
httpRequest = new XMLHttpRequest(); // 서버와 통신하는 (자바스크립트)객체(http을 통한 데이터 송수신 지원)
httpRequest.onreadystatechange=callback; // 처리할 함수: ready상태가 변경될 때 바꿔줄 함수
httpRequest.open("GET", url, true); // get방식으로 url에 넘어갈거야 true: 비동기/ false: 동rl
httpRequest.send(); // get->send() / post->send(string)
}
function callback(){
alert("readyState : " + httpRequest.readyState);
if(httpRequest.readyState == 4){ //통신
alert("status : " + httpRequest.status);
if(httpRequest.status ==200){ //통신성공
//httpRequest.responseText : 서버에서 리턴받은 string
//JSON.parse : json형태의 string -> json object
//JSON.stringify : json object -> json형태의 string
var obj = JSON.parse(httpRequest.responseText);
document.getElementById("result").innerHTML=decodeURIComponent(obj.name)+
" 님의 총점은 " + obj.sum + " 이고, 평균은 " + obj.avg + " 입니다. ";
} else {
alert("데이터를 계산할 수 없습니다.");
}
}
}<onreadystatechange>
- readyState
0 (uninitialized) : 실행(load)되지 않음
1 (loading) : 로드 중
2 (loaded) : 로드 됨
3 (interactive) : 통신 됨
4 (complete) : 통신 완료
- status
200 : 성공
400 : bad reqeust
401 : unauthorized
403 : forbidden
404 : not found
500 : internal server error
3. com.score.controller 패키지에 calServlet.java를 만들고 webServlet을 cal.do로 바꿔준다.
package com.score.controller;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONObject;
@WebServlet("/cal.do")
public class calServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String name = request.getParameter("name");
int kor = Integer.parseInt(request.getParameter("kor"));
int eng = Integer.parseInt(request.getParameter("eng"));
int math = Integer.parseInt(request.getParameter("math"));
int sum = kor + eng + math;
double avg = (double)sum/3;
JSONObject obj = new JSONObject(); //json타입의 java객체를 생성하여
obj.put("name", name); // key, value 값을 담아준다.
obj.put("sum",sum);
obj.put("avg", String.format("%.2f", avg));
PrintWriter out = response.getWriter(); //클라이언트로 보낼 수 있도록
out.print(obj.toJSONString()); // json string으로 바꾸어 보내준다.
System.out.println("servlet에서 보내는 json data: " + obj.toJSONString());
//확인을 위해 출력해보기
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
728x90
반응형
'Web > Jsp_servlet' 카테고리의 다른 글
| Core Tag Library/ XML Tag Library (0) | 2020.08.26 |
|---|---|
| RSS/JSTL/XML Tag Library (0) | 2020.08.26 |
| [Servlet]xml (0) | 2020.08.25 |
| [Servlet]SCOPE_page_request (0) | 2020.08.14 |
| [JSP]로그인만들기_02 (0) | 2020.08.13 |
