AJAX(Asynchronous JavaScript And XML)
AJAX(Asynchronous JavaScript And XML)
1. AJAX (Asynchronous JavaScript And XML)
(1): 특징
비동기 자바스크립트
비동기적 자바스크립트 동작을 하는 기술
서버로부터의 응답(response) 확인
XMLHttpRequest` 객체를 사용하는 것을 말함
페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있음.
(2): 특징
- 페이지 새로고침 없이 서버에 요청
- 서버로부터 데이터를 받고 작업을 수행
1) XMLHttpRequest
XMLHttpRequest - Web API | MDN
특징
- 초기 기획때부터 인터페이스를 제공하지 않아 브라우저간의 불일치가 발생
- IE 지원.
(1) XMLHttpRequest 활용
- hello.html
<!-- hello.html -->
<h1 class="text">안녕하세요</h1>
<h2 class="text">Ajax 입니다.</h2>
- index.html (문서 불러오기를 클릭했을때 요청)
<!-- index.html -->
**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="css/reset.css" />
<style>
body {
margin: 30px;
}
.box {
width: 400px;
padding: 20px;
border: 1px solid #000;
margin-top: 20px;
}
.box h1 {
font-size: 30px;
color: red;
}
.box h2 {
font-size: 25px;
color: green;
}
.box p {
font-size: 14px;
color: #999;
}
</style>
</head>
<body>
<button class="btn">문서불러오기</button>
<div class="box">
<p>데이터가 들어옴</p>
</div>
<script>
const btn = document.querySelector(".btn");
const box = document.querySelector(".box");
btn.addEventListener("click", (e) => {
e.preventDefault();
const xhr = new XMLHttpRequest();
const method = "GET";
const url = "backend/hello.html";
xhr.onreadystatechange = (e) => {
console.log(e);
const { target } = e;
if ((target.readyState = XMLHttpRequest.DONE)) {
//Ajax 처리 결과를 구현하는 위치
if (target.status == 200) {
alert("dd");
const req = target.responseText;
box.insertAdjacentHTML("beforeend", req);
} else {
const a = parseInt(target.status / 100);
if (a == 4) {
console.log(
"요청 주소가 잘못되었습니다",
target.status,
target.statusText
);
} else if (a == 5) {
console.log(
"서버 응답이 없음",
target.status,
target.statusText
);
} else {
console.log("요청에 실패", target.status, target.statusText);
}
}
}
};
xhr.open(method, url);
xhr.send();
});
</script>
</body>
</html>
**
- 요청 결과값
2) Fetch
특징
- promise 기반
- 이미 잘 명세된 API가 제공됨으로써 브라우저간의 불일치가 없음
- IE 대부분에서 동작하지 않음
(1) Fetch 활용
- Directory
- hello.html
<!-- hello.html -->
<h1 class="text">안녕하세요</h1>
<h2 class="text">Ajax 입니다.</h2>
- index.html (문서 불러오기를 클릭했을때 요청)
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="css/reset.css" />
<style>
body {
margin: 30px;
}
.box {
width: 400px;
padding: 20px;
border: 1px solid #000;
margin-top: 20px;
}
.box h1 {
font-size: 30px;
color: red;
}
.box h2 {
font-size: 25px;
color: green;
}
.box p {
font-size: 14px;
color: #999;
}
</style>
</head>
<body>
<button class="btn">문서불러오기</button>
<div class="box">
<p>데이터가 들어옴</p>
</div>
<script>
const btn = document.querySelector(".btn");
const box = document.querySelector(".box");
btn.addEventListener("click", (e) => {
const url = "backend/hello.html";
fetch(url).then((res) => {
console.log(res);
res.text().then((text) => {
box.insertAdjacentHTML("beforeend", text);
});
});
});
</script>
</body>
</html>
- 요청 결과값
3) Axios
특징
- 브라우저를 위해 XMLHttpRequests 생성
- node.js를 위해 http 요청 생성
- Promise API를 지원
- 요청 및 응답 인터셉트
- 요청 및 응답 데이터 변환
- 요청 취소
- JSON 데이터 자동 변환
- XSRF를 막기위한 클라이언트 사이드 지원
- 크로스 브라우징에 신경을 많이썼기에 브라우저 호환성이 좋다
- IE 지원.
Axios 라이브러리 공식 문서
설치
npm 사용하기:
$npm install axios
bower 사용하기:
$ bower install axios
yarn 사용하기:
$yarn add axios
jsDelivr CDN 사용하기:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
unpkg CDN 사용하기:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
(1) Axios 활용
- Directory
- hello.html
<!-- hello.html -->
<h1 class="text">안녕하세요</h1>
<h2 class="text">Ajax 입니다.</h2>
- index.html (문서 불러오기를 클릭했을때 요청)
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="css/reset.css" />
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<style>
body {
margin: 30px;
}
.box {
width: 400px;
padding: 20px;
border: 1px solid #000;
margin-top: 20px;
}
.box h1 {
font-size: 30px;
color: red;
}
.box h2 {
font-size: 25px;
color: green;
}
.box p {
font-size: 14px;
color: #999;
}
</style>
</head>
<body>
<button class="btn">문서불러오기</button>
<div class="box">
<p>데이터가 들어옴</p>
</div>
<script>
const btn = document.querySelector(".btn");
const box = document.querySelector(".box");
btn.addEventListener("click", (e) => {
///xxx.data: 정보가 들어가 있음 json파일을 불러오면 => 객체로 가져옴
const url = "backend/hello.html";
// axios.get(url).then(res=>console.log(res.data))
axios
.get(url)
.then((res) => {
console.log(res);
box.insertAdjacentHTML("beforeend", res.data);
})
.catch((err) => {
console.log("파일연결 에러");
console.log(err.res.status);
console.log(err.res.data);
})
.finally(() => {
console.log("데이터 불러오기 완료");
});
});
</script>
</body>
</html>
- 요청 결과값