반응형
https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
XMLHttpRequest - Web API | MDN
XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 HTTP 이외의 프로토콜도 지원합니다(file 과 ftp 포함).
developer.mozilla.org
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HN client</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
<script src="app.js" type="module"></script>
</body>
</html>const ajax = new XMLHttpRequest();
const RequstType = 'GET';
const NEW_URL = 'https://api.hnpwa.com/v0/news/1.json';
ajax.open(RequstType,NEW_URL,false);
ajax.send();
console.log(ajax.response);
const newFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');
for(let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.innerHTML = newFeed[i].title;
ul.appendChild(li);
}
document.getElementById('root').appendChild(ul);
// document.getElementById('root').innerHTML = `<ul>
// <li>${newFeed[0].title}</li>
// <li></li>
// <li></li>
// </ul>`;parsel.js 사용(모듈용)
반응형
'개인공부 > 프론트엔드' 카테고리의 다른 글
| 클로저 (0) | 2021.06.21 |
|---|---|
| JavaScript push를 이용해서 렌더링하기. (0) | 2021.06.09 |
| React : Hook (2018v) (0) | 2021.05.24 |
| Javascript , Typescript, NodeJs 입맛정리. (0) | 2021.05.22 |
| Parcel, Typescript 설치 (0) | 2021.05.22 |
