728x90
목차
- AJAX
- AJAX 예시
- 코드분석
- a. web
- b. jsp
1. AJAX(Asynchronus Javascript & Xml)
자바스크립트를 이용한 백그라운드 비동기 통신기술로 하나의 웹페이지 안에서 변경사항이 발생한 특정 일부분에 대해서만 갱신이 가능해진다.
* WebContent > js > httpRequest.js 를 넣어두고 기능을 사용하려는 페이지에 <script src="js/httpRequest.js"></script>를 코딩한다.
2. AJAX 예시
* 단을 입력하고 '확인'을 누르면 페이지 전체가 새로고침되면서 5단 전체가 출력되는 것이 아니라 단을 입력하는 필드는 그대로 유지되면서 5단 전체 단이 출력된다.
3. 코드분석
메서드 | 설명 | 예시 |
xhr.readyState | 이벤트가 일어날 때 마다 객채의 '변경되는 상태'를 표시 | console.log( xhr.readyState ); *웹의 콘손창에서 상태 확인 가능 0 : 초기화 오류 1,2,3 : 로드 중 4 : 로드완료 |
xhr.status | 객체의 '최종 상태' 표시 | console.log( xhr.status ); 200 : 이상없음 404 : 경로없음 500 : 서버에러 |
xhr.responseText | 작업을 마친 후 최종적으로 돌아오는 데이터를 문자열로 얻음 | var data = xhr.responseText; document.getElementById("disp").innerHTML = data; |
xhr.responseXML | 작업을 마친 후 최종적으로 돌아오는 데이터를 XML로 얻음 | - |
a. WEB
* <script src="js/httpRequest.js"></script>
* send( )에서 id=dan에 입력된 value를 받아와 유효성체크를 하고 sendResquest( 호출할 페이지 , 파라미터, 콜백메서드, 전송방식(get/post) )를 실행
sendRequest(url, param, resultFn, "get");
* 호출한 페이지에 파라미터를 전달하고 연산 처리 후 돌아온 데이터를 var data에 담는다. var data = xhr.responseText;
* var data 담긴 데이터는 id=disp 인 영역에 출력된다. document.getElementById("disp").innerHTML = data;
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/httpRequest.js"></script>
<script type="text/javascript">
function send() {
var dan = document.getElementById("dan").value;
if( dan < 2 || dan > 9 ){
alert("2 ~ 9사이의 값을 입력하세요");
return;
}
//Ajax를 통한 파라미터 전달
var url = "gugudan_ajax.jsp";
var param = "dan="+dan;
sendRequest(url, param, resultFn, "get");
}
//Ajax를 통해 호출된 페이지에서 작업을 완료한 후 자동으로 호출되는 콜백메서드
function resultFn() {
console.log( xhr.readyState + "/" + xhr.status );
if( xhr.readyState == 4 && xhr.status == 200 ){
//작업을 마친후 최종적으로 돌아오는 데이터
var data = xhr.responseText;
document.getElementById("disp").innerHTML = data;
}
}
</script>
</head>
<body>
단 : <input id="dan">
<input type="button" value="확인" onclick="send();">
<hr>
<div id="disp"></div>
</body>
</html>
b. jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
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>
</head>
<body>
<%= str %>
</body>
</html>
728x90
'# WEB > JavaScript' 카테고리의 다른 글
[Javascript] JSON_데이터 교환 표기법(추가해야할 내용있음) (0) | 2020.12.04 |
---|