xmlHttpRequest는 서버로 부터 데이터를 받아오기 위해 사용하는 객체입니다.
이번 포스팅에서는 open api에서 json 데이터를 받아오는 방법과 관련해서 간단하게 다뤄볼 예정입니다.
xmlHttpRequest 사용법, json 파싱방법 순서로 포스팅이 진행됩니다.
1. xmlHttpRequest 사용법
아래는 제가 포스팅을 위해 생성한 Django Restful API 서버를 캡쳐한 모습입니다.
이 URL주소를 가지고 GET 방식으로 데이터를 받아오는 코드는 아래와 같습니다.
버튼을 누르면 xmlHttpRequest가 실행되어서 가져온 데이터가 console에 출력되도록 했습니다.
<!-- index.html -->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>xmlHttpRequest 사용법 정리</title>
</head>
<body>
<button type="button" id="button">Button</button>
<script type="text/javascript">
const requestURL = 'http://localhost:8000/api/v1/polls/';
const button = document.getElementById('button');
button.addEventListener('click', getData);
function getData() {
const xhr = new XMLHttpRequest();
xhr.open('GET', requestURL);
xhr.onload = () => {
console.log(xhr.response);
};
xhr.send();
}
</script>
</body>
버튼을 눌렀을 때 위와 같은 로그가 찍혔습니다. 데이터를 잘 가져왔습니다.
하지만 서버에서 제공하는 데이터가 json형식이기 때문에 json으로 파싱을 해야합니다.
2. json 파싱
json타입으로 변경하는건 단 한줄만 추가하면 됩니다.
xhr.open() 다음줄에 다음 코드를 추가해주세요.
xhr.responseType='json';
위코드에서는 그냥 문자열로 찍힌 것과 달리, 한줄만 추가했을 뿐인데 console에 출력될 때 json 데이터로 출력된것을 확인할 수 있습니다.
json 데이터로 받아왔으니 이번에는 question_text만 console에 출력되도록 해봤습니다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>xmlHttpRequest 사용법 정리</title>
</head>
<body>
<button type="button" id="button">Button</button>
<script type="text/javascript">
const requestURL = 'http://localhost:8000/api/v1/polls/';
const button = document.getElementById('button');
button.addEventListener('click', getData);
function getData() {
const xhr = new XMLHttpRequest();
xhr.open('GET', requestURL);
xhr.responseType='json';
xhr.onload = () => {
var data = xhr.response;
for(var i=0;i<data.length;++i){
console.log(data[i].question_text);
}
};
xhr.send();
}
</script>
</body>
for문을 통해서 가져온 json 데이터의 개수만큼 돌려서 question_text만 콘솔에 출력했습니다.
json 데이터 형식마다 코드가 달라져야 하지만, 컨셉만 알아두시면 쉽게 응용이 가능합니다.
+
공공데이터를 받아와서 파싱하는 걸 예로 보여드리려고 했는데, 두세개 활용신청을 했는데 12시간이 지나도 서비스키가 등록되지 않았다는 에러메시지만 떠서 포기했습니다.
서비스 키 발급이 되고나면, 포스팅에 추가하겠습니다.
xmlHttpRequest 사용방법에 대해서 간단히 정리해봤습니다.
서버에서 데이터를 가져올 때 대부분 라이브러리를 사용하던데, 귀찮아서 라이브러리 없이 짜려고 하다가 관련된 포스팅이 많이 없고, 제가 복붙해서 사용했을 때 잘 안돌아가서 돌아가는 코드를 한번 정리해봤습니다.
웹을 잘 안다뤄서 그런지 간단한 것도 헤매고 있습니다:(
다음번에는 귀찮아 하지 않고 그냥 라이브러리 사용하려고 합니다. 지금이라도 늦지 않았으니 포스팅 보고도 잘 안되신다면 promise 같은 라이브러리 사용하세요..
잘못된 내용이 있다면 언제든지 댓글이나 메일로 알려주시면 감사하겠습니다.
이 포스팅이 도움이 되었다면 공감 부탁드립니다.
궁금한 점은 언제든지 댓글 남겨주시면 답변해드리겠습니다:D
'major > Web' 카테고리의 다른 글
| 사이트맵 만들고 제출하기 (0) | 2021.03.23 |
|---|---|
| robots.txt 생성 및 검색로봇 접근 제어하기 (0) | 2021.03.22 |
| favicon(파비콘) 설정 및 갱신 오류 해결방법 (1) | 2021.03.21 |
| [JavaScript] To Do List 만들기 (11) | 2020.04.29 |
| [JavaScript] 구글맵 사용법 및 간단 예제 (3) | 2020.04.27 |
