<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn1">클릭</button>
<div id="div1"></div>
<script>
document.querySelector('#btn1').addEventListener('click', loadDoc);
function loadDoc() {
//ajax 요청 객체 생성
const xhttp = new XMLHttpRequest();
//요청~응답까지의 검증 및 응답 데이터 처리하는 사전
//요청 전 시점
//요청 객체에 응답 완료? 정상 응답? 조건에 한해서만
//응답된 데이터를 받아서 div1이라는 id tag에 데이터 출력
xhttp.onreadystatechange = function() {
// alert(this.readyState); 1~4까지의 숫자 확인 가능, 상태가 변경될때마다 자동 갱신
if (this.readyState == 4 && this.status == 200) {
let data = this.responseText;
alert(data);
document.getElementById("div1").innerHTML = data;
}
};
//Get방식으로 ajaxRes.js에게 요청하는 구조
//설정
xhttp.open("GET", "ajaxRes.jsp");
//실제 요청 수행
xhttp.send();
}
</script>
</body>
</html>
<!--
로직
1. 기능
버튼 클릭 -> jsp에게 요청 -> jsp는 이름 응답
응답된 이름을 html의 div tag에 출력
2. html에서 jsp가 응답된 데이터를 동적으로 처리
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn1">클릭</button>
<div id="div1"></div>
<script>
document.querySelector('#btn1').addEventListener('click', loadDoc);
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let data = this.responseText;
alert(data);
//step02 - csv 형식의 문자열 처리
//js에도 java처럼 문자열 특정 기준으로 분리하는 함수 - split()
sData = data.trim().split(',');
console.log(sData[0]);
document.getElementById("div1").innerHTML = sData[0];
//step01 = json 객체로 변환 필수
//data = JSON.parse(data);
//document.getElementById("div1").innerHTML = data.name;
}
};
xhttp.open("GET", "ajaxRes2.jsp");
xhttp.send();
}
</script>
</body>
</html>
