XMLHttpRequest
- XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위해 사용된다.
- 전체 페이지의 새로고침 없이도 URL로부터 데이터를 받아올 수 있다. 이는 웹페이지가 사용자가 하고 있는 것을 방해하지 않으면서 페이지의 일부를 업데이트할 수 있도록 해준다.
- XMLHttpRequest는 AJAX 프로그래밍에 주로 사용된다.
[MDN XMLHttpRequest] https://developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest
XMLHttpRequest - Web API | MDN
XMLHttpRequest 는 이름으로만 봐서는 XML 만 받아올 수 있을 것 같아 보이지만, 모든 종류의 데이터를 받아오는데 사용할 수 있습니다. 또한 HTTP 이외의 프로토콜도 지원합니다(file 과 ftp 포함).
developer.mozilla.org
AJAX, Asynchronous JavaScript And XML
- AJAX는 XMLHttpRequest를 활용한 프로그래밍 방식이다.
- AJAX는 전체 페이지가 다시 로드되지 않고 일부분만 업데이트하는 더 복잡한 웹페이지를 만들 수 있게 해준다.
- AJAX를 사용하면 웹페이지 일부가 reload 되는 동안에도 코드가 계속 실행되어 비동기식으로 작업할 수 있다.
[MDN AJAX] https://developer.mozilla.org/ko/docs/Glossary/AJAX
AJAX - 용어 사전 | MDN
AJAX (Asynchronous JavaScript And XML (en-US))는 HTML, CSS, JavaScript, DOM 조작, 와 XMLHttpRequest object를 활용한 프로그래밍 방식이다. AJAX는 전체 페이지가 다시 로드되지 않고 일부분만 업데이트하는 좀 더 복
developer.mozilla.org
XMLHttpRequest 예제
index.html
<!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>Document</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>
app.js
const ajax = new XMLHttpRequest();
ajax.open('GET', 'https://api.hnpwa.com/v0/news/1.json', false);
ajax.send();
const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement('ul');
for (let i = 0; i < 10; i ++) {
const li = document.createElement('li');
li.innerHTML = newsFeed[i].title;
ul.appendChild(li);
}
document.getElementById('root').appendChild(ul);
'Programming > JavaScript' 카테고리의 다른 글
| [JS] JS와 웹프론트 기본 (0) | 2021.06.10 |
|---|