<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<meta name='viewport'
content='width=device-width, initial-scale=1.0'>
<script>
// 요청결과
var result;
// API요청하기
function loadAPI() {
// XMLHttpRequest 객체 생성
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
// readyState : 4, 요청 완료 및 응답 준비
// status : 200, 요청 완료
if( this.readyState == 4 && this.status == 200 ) {
// 응답데이터를 JSON객체로 변환
result = JSON.parse(this.responseText);
console.log( result );
// 결과값을 테이블 로우에 추가
drawRow( 'resultTable', result );
// JSON객체의 크기
var resultLength = document.getElementById('resultLength');
console.log( 'JSON객체의 크기 : ' + Object.keys(result).length );
resultLength.innerHTML = '응답데이터 크기 : ' + Object.keys(result).length;
}
};
// 요청정보작성
xhttp.open('GET', 'https://pokeapi.co/api/v2/pokemon/ditto', true);
// 서버에 요청
xhttp.send();
}
/* 테이블 로우 추가
tableId : 테이블ID
data : 추가할 row데이터 */
function drawRow( tableId, data ){
// 결과를 보여줄 테이블
var table = document.getElementById( tableId );
// 테이블 초기화
table.innerHTML = '';
// 로우 인덱스
var idx = 1;
// 로우 추가
for( var key in data ) {
var thisData = data[key];
// 테이블 행추가
var row = table.insertRow( table.rows.length );
// 테이블 열 추가
var cell1 = row.insertCell( 0 );
var cell2 = row.insertCell( 1 );
cell1.innerHTML = idx + '. ' + key;
// 데이터타입 체크
if( typeof(thisData) == 'object' ){
cell2.innerHTML = JSON.stringify( thisData );
}else{
cell2.innerHTML = thisData;
}
idx++;
}
}
// 요쳥결과테이블 초기화
function resetTable( elementId ){
var table = document.getElementById('resultTable');
// 테이블 초기화
table.innerHTML = '';
//응답데이터 크기 초기화
var resultSize = document.getElementById('resultLength');
resultSize.innerHTML = '응답데이터 크기 : ';
}
</script>
<style>
table {
width: 100%;
border: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border: 1px solid #444444;
padding: 10px;
}
</style>
</head>
<body>
<button type='button' onclick='loadAPI()'>XHR요청하기</button>
<button type='button' onclick='resetTable()'>초기화</button>
<div>⬇요청결과⬇</div>
<div id="resultLength"></div>
<table id='resultTable'></table>
</body>
⬇요청결과⬇