AJAX

● AJAX

 

- Asynchronous Javascript And Xml

- JavaScript 와 XML 형식을 이용한 비동기적 정보 교환 기법

- 이름에 XML이 포함되어있긴 하지만 요즘은 XML을 잘 사용하지 않고 대부분 JSON 형식을 다룬다

 

- 브라우저의 XMLHttpRequest를 이용해 전체 페이지를 새로 가져오지 않고 페이지 일부만을 변경할 수 있도록 JS 를 실행해 서버에 데이터만을 별도로 요청하는 기법

 

- 비동기 JS로 XML을 처리하는 기법

- 특정 프로그램이 아니라 JS의 기법

- XML보다 JSON이 용량이 적어 대체됐다  <-  JSON은 경량의 데이터 표현법~

 

- JS 라이브러리 중 하나

- JS를 통해 서버에 request, response 한다

- JS를 통해 클라이언트, 서버 간의 통신을 한다

- JS 를 통해 비동기적으로 XML 데이터를 주고 받는다

 

 

 

● XML

- eXtensible Markup Language

- W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어

- HTML의 tag는 XML에서 온 것 

 

 

---

● Axios

 

- 브라우저와 Node.js 에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리

- 동일한 코드베이스로 브라우저와 Node.js 에서 실행할 수 있다

- 서버 사이드에서는 네이티브 Node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequest를 사용한다

- Promise API를 활용하는 HTTP 비동기 통신 라이브러리

- HTTP Methods를 사용한다

 

- 브라우저를 위해 XMLHttpRequest 생성

- Node.js를 위해 http 요청 생성

- Promise API 지원

- 요청, 응답 인터셉트

- 요청 및 응답 데이터 변환

- 요청 취소

- JSON 데이터 자동 변환

- XSRF 막기 위한 클라이언트 사이드 지원

 

- jsDelivr CDN 사용하기

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 

 

 

● Fetch API

- 일반적으로 API 를 연동하기 위해 사용하던 방식

- JS 빌트인 라이브러리

 

---

axios.get(url)
    .then( response => {
        console.log( response.data );
        const result = document.querySelector('#result');
        result.insertAdjacentHTML( 'beforeend', response.data );
    } ).catch( error => {
        console.error(error);
        alert( error.message );
    } ).finally( () => {
        console.log( 'Finish!!!' );
    }

- ajax 의 결과를 통해 response 라는 결과를 가져온다

- url의 소스코드를 response.data로 가져온다

 

=> 다른 html 파일의 소스코드를 JS 변수로 가져온다  =>  파일 읽어오기!

 

 

 

 

 

 

 

 

 

---

refer to

https://namu.wiki/w/AJAX

https://cdrh.unl.edu/articles/basicguide/XML

https://axios-http.com/kr/docs/intro

https://velog.io/@dusunax/AXIOS%EB%9E%80-feat.-React