<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>AJAX</title>
</head>
<body>
<h1>AJAX</h1>
<p>브라우저에서 웹페이지를 요청하거나 링크를 클릭하면
필연적으로 화면갱신이 발생함</p>
<p>서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데,
페이지 일부만 갱신하고도 동일한 효과를 볼수있게 하는 기술</p>
<p>이를 통해 데스크탑 프로그램과 동일한 사용자 경험을 제공받을 수 있음</p>
<h2> XMLHttpRequest </h2>
<p>AJAX 처리를 위한 핵심 라이브러리 </p>
<p id="msg">서버로부터 응답 : </p>
<script>
let req = new XMLHttpRequest(); // 1
//서버로 비동기 요청을 위해 ajax 객체 생성
req.onreadystatechange= function (e) { // 4 - 콜백함수
if (req.readyState == 4 ) {
if (req.status == 200) {
let msg = document.getElementById('msg');
msg.innerHTML = msg.innerHTML + req.responseText;
req.responseText;
} else {
console.log('Error!' + req.readyState);
}
} else {
console.log('Error!'+ req.readyState)};
};
// 클라이언트가 서버에 요청한 후
// 서버로부터 넘어오는 결과에 따라
// 응답을 처리하기 위해 콜백함수 정의
// readystate : 0 - open 호출 이전
// readystate : 1 - open 호출 완료
// readystate : 2 - send 호출 완료
// readystate : 3 - 서버 응답 준비중
// readystate : 4 - 서버 응답 완료
// req.status : 200 - '정상 처리완료' 응답 전송 (원하는 데이터 찾아 클라이언트로 보냄)
// req.status : 404 - '찾는 데이터가 없음'
// req.status : 500 - '코드 오류로 인한 비정상 종료'
req.open('GET', '/ajax/sayHello.txt'); // 2
// open(요청방식, 요청URL)
// 서버에 데이터를 요청하기 위해
// 요청방식과 대상이 있는 URL 지정
req.send(); // 3
// 실제로 요청 전송
</script>
<hr>
<input type="text" id="userid">
<button type="button" onclick="checkUid()">아이디 중복검사</button>
<p id="msg2"></p>
<script>
let isExistUid = (res) => {
let isExist = false;
let uid = document.getElementById('userid').value;
let msg2 = document.getElementById('msg2');
let member = JSON.parse(res);
for (let m of member) {
if (m.userid == uid ) {
isExist = true; break;
}
}
if (isExist) {
msg2.innerHTML = '이미 사용중인 아이디!';
msg2.style.color = 'red';
} else {
msg2.innerHTML = '사용가능한 아이디';
msg2.style.color = 'blue';
}
};
let checkUid = () => {
let req = new XMLHttpRequest();
req.onreadystatechange = (e) => {
// alert(req.readyState + '/' + req.status );
if(req.readyState ==4 && req.status == 200) {
// alert(req.responseText);
isExistUid(req.responseText);
}
}; //콜백함수 등록
req.open('GET', '/ajax/member.txt');
req.send();
};
// XML 방식
// <dog>
// <name>식빵</name>
// <family>웰시코기<family>
// <age>1</age>
// <weight>2.14</weight>
// </dog>
//
// JSON 방식
// {
// "name": "식빵",
// "family": "웰시코기",
// "age": 1,
// "weight": 2.14
// }
</script>
</body>
</html>
Hello, World!!
[ {"userid":"abc123" , "passssd":"987xyz"},
{"userid":"abc124", "passssd":"988xyz"},
{"userid":"abc125", "passssd":"989xyz"} ]