Ajax
- Ajax(Asynchronous JavaScript and XML)는 JavaScript, XML(또는 JSON)을 활용한 비동기적 정보 교환 기법이다.
- Ajax를 활용하여 웹페이지 전체를 리로드 하지 않고 일부만 변경할 수 있다.
비동기
- 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 방식이다.
- 데이터를 외부에서 가져오는 경우, 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있다.
- 완료될 때까지 기다리는 경우
- 네트워크의 상황, 외부 서버의 상황 등에 따라 데이터를 가져올 수 없는 경우 사이트가 먹통이 될 수 있다.
- 가져오더라도 시간이 오래 걸리는 경우 가져오는 동안 페이지를 사용할 수 없게 된다.
- 완료될 때까지 기다리는 경우
- python의 경우
import requests
response = requests.get("https://jsonplaceholder.typicode.com/posts/1")
print(response.json()) # 데이터가 출력된다.
- JavaScript의 경우
let data
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => data = response.json())
console.log(data) // undefined- 위의 JavaScript 코드에서 JavaScript의 경우 data가 출력되지 않음을 확인할 수 있다.
Promise
- JavsScript에서 제공하는 Promise 객체를 활용하여 기능이 완료된 후 다음 코드를 실행하도록 할 수 있다.
- 데이터를 외부에서 가져오는 경우
- 데이터가 필요하지 않은 동작들은 미리 실행하고
- 데이터가 필요한 동작들은 데이터를 가져온 후 실행한다.
- 동작의 완료 여부에 따라 성공하면 then, 실패하면 catch가 실행된다.
- then, catch 는 함수를 입력으로 받으며, 이전 단계의 return값이 input으로 들어간다.
Axios
- Axios는 Promise를 활용하여 웹 서버로부터 리소스를 비동기적으로 가져오는 데 사용되는 라이브러리이다.
- 설치
$ npm i axios
- cdn을 사용
시작하기 | Axios Docs
시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코
axios-http.com
- 두가지 방식으로 사용할 수 있다.
- 다음은 URL에 요청을 보내 응답을 출력하는 코드
- axios를 import한다.
- URL에 요청을 보낸 후 응답을 return한다.
- 응답을 입력으로 받아 응답의 속성으로 있는 data를 출력한다.
const axios = require('axios') // 1
const URL = 'https://jsonplaceholder.typicode.com/todos/1'
axios(
{
method: 'get',
url: URL
}
) // 2.
.then(response => console.log(response.data)) // 3.
[실습]
- 다음 URL을 참고하여 버튼을 누르면 랜덤한 강아지 사진이 나오도록 HTML 문서를 수정하시오.
- cdn을 활용하므로, axios를 import할 필요는 없다.
- https://dog.ceo/dog-api/
https://dog.ceo/api/breeds/image/randomDog API
Dog CEO's Dog API. Over 20,000 images of dogs programmaticaly accessible by over 120 breeds. Image supplied by the Stanford Dogs Dataset.
dog.ceo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<img src="" alt="강아지 사진">
<button>클릭!</button>
<script>
const URL = 'https://dog.ceo/api/breeds/image/random'
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Dog Image</title>
</head>
<body>
<img id="dogImage" src="" alt="강아지 사진 볼거면 버튼 클릭해...">
<button id="fetchButton">Fetch!</button>
<script>
const fetchButton = document.getElementById("fetchButton");
const dogImage = document.getElementById("dogImage");
const URL = 'https://dog.ceo/api/breeds/image/random';
fetchButton.addEventListener("click", function() {
// API에서 랜덤한 강아지 사진을 가져옴
fetch(URL)
.then(response => response.json())
.then(data => {
dogImage.src = data.message;
})
.catch(error => console.error('Error fetching random dog image:', error));
});
</script>
</body>
</html>
