JSP/AJAX.1
Ex01 . data.jsp / xhr1.jsp / xhr2.jsp
GAWON
2023. 6. 23. 09:28
<%@ 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>
</head>
<body>
<div>
<ul>
<li>이름 : 김</li>
<li>나이 : 20</li>
</ul>
</div>
</body>
</html><%@ 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>
</head>
<body>
<%--
ajax : asynchronous javascript and xml
- 비동기식으로 Javascript와 xml을 사용하는 방식
- 현재는 xml보다 json을 이용
1. asynchronous : 비동기통신을 의미 (클라이언트가 서버에게 정보를 요청하고,
서버가 응답할때까지 기다리지 않는 통신 방식)
- 페이지 단위로 로드하지 않고, 페이지의 일부 단위를 받아서 페이지 동적 갱신
2. XMLHttpRequest 객체
javascript 에서 ajax 처리를 할 때 필요한 객체
--%>
<h1>Ex01_xhr.jsp 페이지 입니다.</h1>
<hr>
<script type="text/javascript">
// 1. XMLHttpRequest 객체생성
var xhr = new XMLHttpRequest();
// 2. open(스트림 열기)
// open(전송방식, 경로, 비동기유무)
// 1) 전송 방식 : get, post
// 2) 비동기 유무 : true(비동기), false(동기)
xhr.open("get", "data.jsp", false);
// 3. send
xhr.send();
// 4. responseText(결과)
document.body.innerHTML += xhr.responseText;
</script>
<hr>
<h1>Ex01_xhr.jsp 페이지 입니다.</h1>
</body>
</html><%@ 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>
</head>
<body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
/*
onreadystatechange 이벤트 속성
1) 각 진행 단계를 확인하는 이벤트 속성
2) onreadystatechange 이벤트 속성을 사용하면 "비동기 통신"을 할 수 있다.
readyState 값 : 데이터의 전송 결과
0 : 객체 생성, open 안 함
1 : open() 함, send() 안함
2 : send() 함, 데이터를 받지 않음
3 : send() 함, 데이터의 일부만 받음
4 : 성공
status 값 : 오류 관련
200 : 정상(오류 없음)
4XX : 클라이언트 측 오류
5XX : 서버 측 오류
*/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.body.innerHTML += xhr.responseText;
}
}
}
xhr.open("get", "data.jsp", true);
xhr.send();
</script>
</body>
</html>