개인공부

XML HttpRequest ajax

하이후에호 2021. 6. 6. 23:36
반응형

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 사용(모듈용)

반응형