반응형
자바스크립트의 라이브러리 중 하나
비동기식 자바스크립트와 xml의 약자
장점
웹페이지의 속도향상
서버의 처리가 완료될 때까지 기다리지 않고 처리 가능
단점
히스토리 관리가 안되어서 보안에 좀 더 신경을 써야한다
연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다
http://www. .com/project/board/list.html
http:// www. .com/ project/board/ list.html
프로토콜 도메인(ip) 경로 파일
경로에서 / 가 있으면 도메인 주소 바로 뒤 해당 경로로 이동
http://www. .com/list.html
/가 없으면 상대경로
http://www. .com/project/board/list.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 통신</title>
<script>
window.onload = function(){
/* alert(""); */
}
function firstAjaxFn(){
//첫번째 ajax 통신 클릭시 호출
//first.html로 ajax 요청 보내기
//1.XMLHttpRequest 객체 생성하기
let request = new XMLHttpRequest();
//*XMLHttpRequest 객체 상태 변경시 호출되는 메소드 정의 수정
//요청에 대한 응답이 온 후 처리할 수 있도록(미리 등록)
request.onreadystatechange = function(){
//XMLHttpRequest 객체 상태 변경될 때 마다 호출
let state = request.readyState; //XMLHttpRequest 객체 상태값
let status = request.status; //요청에 대한 응답의 상태코드값 반환
//응답코드 300은 새로고침한 결과
if(state == 4 && status == 200){
//4.응답데이터 받기(응답데이터:요청경로를 실행했을때 화면에 출력되는 내용)
let data = request.responseText;
console.log(data);
document.getElementById("result").innerHTML = data;
}
}
//2.생성된 XMLHttpRequest 객체에 open 메소드 호출하여 정보 넘기기
//3번째 인자가 false이면 요청에 대한 응답을 기다린 후 처리
//인자가 true이면 요청에 대한 응답을 기다리지 않고 다음 실행
request.open('GET','data/first.html',false);
//3.open에서 정의한 정보로 요청 보내기
request.send();
/* //4.응답데이터 받기(응답데이터:요청경로를 실행했을때 화면에 출력되는 내용)
let data = request.responseText;
console.log(data); */
}
function infoAjaxFn(){
//info.html로 ajax 요청 보내기
//1.XMLHttpRequest 객체 생성하기
let request = new XMLHttpRequest();
request.onreadystatechange = function(){
let state = request.readyState; //XMLHttpRequest 객체 상태값
let status = request.status; //요청에 대한 응답의 상태코드값 반환
if(state == 4 && status == 200){
//4.응답데이터 받기(응답데이터:요청경로를 실행했을때 화면에 출력되는 내용)
let data = request.responseText;
document.querySelector("#result").innerHTML = data;
}
}
//2.생성된 XMLHttpRequest 객체에 open 메소드 호출하여 정보 넘기기
request.open('GET','data/info.html',false);
//3.open에서 정의한 정보로 요청 보내기
request.send();
/*
//4.응답데이터 받기(응답데이터:요청경로를 실행했을때 화면에 출력되는 내용)
let data = request.responseText;
document.querySelector("#result").innerHTML = data; */
}
</script>
</head>
<body>
<h1>ajax 공부 페이지</h1>
<button onclick="firstAjaxFn();">첫번째 ajax 통신</button><br>
<button onclick="infoAjaxFn();">소개 불러오기(비동기)</button>
<div id="result"></div>
</body>
</html>
first.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 응답</title>
</head>
<body>
<h2>응답데이터입니다.</h2>
</body>
</html>
info.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>info</title>
</head>
<body>
<h2>나를 소개합니다</h2>
<div>
<strong>이름 : </strong> 홍길동
</div>
<div>
<strong>나이 : </strong> 20
</div>
<div>
<strong>연락처 : </strong> 010-1111-1111
</div>
</body>
</html>
반응형
'JavaScript, jQuery, Ajax' 카테고리의 다른 글
| [Ajax] XML과 Json 데이터 Ajax로 다루기 (1) | 2024.09.10 |
|---|---|
| [Ajax] jQuery를 사용하여 Ajax 사용 (0) | 2024.09.09 |
| [JQUERY] 다운받기 (0) | 2024.08.28 |
| [JavaScript] onclick으로 버튼 눌러 내용 바꾸기 (0) | 2024.08.26 |
| [JavaScript] 계산기 focus(), onblur, onclick,onchange (0) | 2024.08.23 |
