[Javascript] AJAX_한 페이지에서 일부분만 새로고침

2020. 12. 2. 11:03

728x90

1. AJAX(Asynchronus Javascript & Xml)

자바스크립트를 이용한 백그라운드 비동기 통신기술로 하나의 웹페이지 안에서 변경사항이 발생한 특정 일부분에 대해서만 갱신이 가능해진다.

* WebContent > js > httpRequest.js 를 넣어두고 기능을 사용하려는 페이지에 <script src="js/httpRequest.js"></script>를 코딩한다.

httpRequest.js

0.00MB

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

코딩 기록