JS_JS에서 API가져오기(로컬)_AJAX통신

일단 이전 포스트 참조 플라스크로API구성하기

이전에 만든 API를 로컬에서 테스트 해보자.

파이참에서 일단 디버깅모드로 만들어 둔 API를 실행 시킨 후

http://127.0.0.1:5000/get 로 요청해보자.

html안에 script 태그를 이용하자

코드보자

<script>
const ReloadPage =()=>{
        let httpRequest = new XMLHttpRequest();

        httpRequest.open('GET', `http://127.0.0.1:5000/get`, true);
        httpRequest.send();

        httpRequest.onload = () => {
            result = JSON.parse(httpRequest.response);
            console.log(result)
        }
    }
</script>

이렇게 사용하면 됨...result 값이 console에 잘 찍히는것을 볼 수 있다.

AJAX 는 자바스크립트에서 서버랑 통신하는 라이브러리 이다.

let httpRequest = new XMLHttpRequest();

요렇게 선언하자.

httpRequest.open('GET', http://127.0.0.1:5000/get, true);

첫번째 인자는 어떤방식으로 통신할지, 두번째는 주소, 세번째는 비동기통신 여부이다.)

httpRequest.send();

서버로 요청 보내부러

httpRequest.onload = () =>

서버에서 요청 오면 요청 온 값을 처리함.(어쩌구.response로 받는다)

나는 JSON파일로 받았기 때문에 JSON.parse를 사용했다.
이제 받아온 값을 잘 파싱해서 사용하면 된다.

원래는 react 개발자로써 비교적 최신 기술이고 여러모로 깔끔한
(사실 각각의 장단점 듣긴 했지만 내기준 그냥 더 편해서 좋아함)
axios나 fetch를 더 선호하긴 하지만
일단 위에서 시키는걸로 해보았다.

-끗-