728x90
반응형
실습환경 Django
1. XMLHttpRequest를 이용해서 .json 파일과 .txt 파일을 읽기
static/sample.txt
"Hello My name is Kim"
index.html
<body>
<div id="test"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '/static/sample.txt', true);
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status === 200) {
var data = xhr.response;
document.querySelector("#test").innerText = data;
console.log(data);
}
};
xhr.send();
</script>
</body>
xhr.open('GET', 'static'sample.txt', true);에서 true는 Asynchronous 의미 (false -> Synchronous)
*. json 형태로 저장되어 있는 경우
static/sample.txt
{"a": 1, "b": 2}
index.html
<body>
<div id="a" style="background-color: pink;"></div>
<div id="b" style="background-color: yellow;"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'static/sample.txt', true);
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status === 200) {
var data = xhr.response;
console.log(data);
document.querySelector("#a").innerText = data.a;
document.querySelector("#b").innerText = data.b;
}
};
xhr.send();
</script>
</body>
.json 파일도 가능
fetch API를 이용하는 방법도 추후에 포스팅 하도록 하겠습니다.
참고사이트:
https://ko.javascript.info/xmlhttprequest
728x90
반응형
'Javascript' 카테고리의 다른 글
| Javascript: new Date # 날짜 (0) | 2023.03.27 |
|---|---|
| javascript: event.target vs event.currentTarget (0) | 2023.03.09 |
| 주소 API # 행정안전부 # javascript # ajax # xml (0) | 2023.03.08 |
| Javascript 이미지 업로드 미리보기 (0) | 2023.02.24 |
| Javascript: Array for loop showing elements (0) | 2023.01.27 |
