스포츠마케터의 초보 개발자 도전기
Ajax를 활용한 구구단 본문
1. Ajax기본 설치
아래 파일을 eclipse / Dynamic Web Projec의 scr - webapp에서 새로운 js 폴더를 만든 뒤 삽입
2. Ajax를 활용한 구구단 만들기
gugudan. jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- Ajax(Asynchronus JavaScript $ XML) : 비동기 통신
자바스크립트를 이용한 백그라운드 통신 기술로써 하나의 웹페이지 안에서
변경사항이 발생한 특정한 일부분에 대해서만 부분 갱신이 가능해 짐 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- Ajax 연동을 위한 httpRequest.js 참조 -->
<script src="js/httpRequest.js"></script>
<script>
function send(){
let dan = document.getElementById("dan").value;
//dan을 Ajax를 통해 서버로 전달
let url = "gugudan_ajax.jsp";
let param = "dan="+dan;
//url, 전송할파라미터, 콜백메서드, 전송방식
sendRequest(url, param, resultFn, "GET");
}
function resultFn(){
console.log(xhr.readyState + "/" + xhr.status);
//xhr.readyState
//0 -> 초기화 오류
//1,2,3 -> 페이지 로딩
//4 -> 페이지 로드 완료
//xhr.status
//200 - 이상없음
//404, 500 - 경로, 서버에러 등
if(xhr.readyState == 4 && xhr.status == 200){
//콜백으로 도착한 데이터를 읽어오기
let data = xhr.responseText;
let disp = document.getElementById("disp");
disp.innerHTML = data;
}
}
</script>
</head>
<body>
단: <input id="dan">
<input type="button" value="확인" onclick="send();">
<br>
<div id="disp"></div>
</body>
</html>
gugudan_ajax.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//gugudan_ajax.jsp?dan=5
int dan = Integer.parseInt(request.getParameter("dan"));
String str = "";
for(int i = 1; i <= 9; i++){
str += String.format("%d * %d = %d<br>", dan, i, dan*i );
}
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
</script>
</head>
<body>
<%= str %>
</body>
</html>'develop > 기타' 카테고리의 다른 글
| Model2 MVC 패턴 (0) | 2024.05.17 |
|---|---|
| JSON (0) | 2024.05.17 |
'develop/기타' Related Articles
more
