var x = new XMLHttpRequest(); x라는 XMLHttpRequest 객체 생성.
x.open("GET","https://consolekakao.github.io/"); //데이터를 로드해올 URL
x.send();
function test(){
if(x.readyState == '4'){ //x의 데이터로드가 완료 되었을 때.
console.log('complete road'); //데이터 로드 완료 출력.
let i; //반복문돌리기용 변수 선언
var el = document.createElement('yoso') //el이라는 엘리먼트 선언.
el.innerHTML = x.responseText; // el 엘리먼트 안에 아까 x가 받아온 respontext삽입.
for(i=0;i<el.querySelectorAll('.card-title').length;i++) {
//card-title클래스가 발견된 개수만큼 반복
document.writeln(el.querySelectorAll('.card-title')[i].innerText+'<br>');
// 화면에 card-title클래스에 있는 Text를 출력후 줄바꿈.
}
clearInterval(timer); //타이머 초기화
}
else{
console.log('loading'); //데이터 로드 미완료시 로딩표시
}
}
let timer = setInterval(test,100); 0.1초마다 test함수 실행.
🚀result
JAVASCRIPT: Fetch
JAVASCRIPT: 동기(Synchronous) & 비동기(Asynchronous)
JAVASCRIPT: XMLHttpRequest ReadyState를 활용한 HTML ROAD
JAVASCRIPT: CORS-Policy 관련 에러 발생이유
JAVASCRIPT: Async & await
JAVASCRIPT: querySelector
JAVASCRIPT: getElementByID
JAVASCRIPT: JSON과 스케줄링전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<script>
var x = new XMLHttpRequest();
x.open("GET","https://consolekakao.github.io/");
x.send();
function test(){
if(x.readyState == '4'){
console.log('complete road');
let i;
var el = document.createElement('yoso')
el.innerHTML = x.responseText;
for(i=0;i<el.querySelectorAll('.card-title').length;i++) {
document.writeln(el.querySelectorAll('.card-title')[i].innerText+'<br>');
}
clearInterval(timer);
}
else{
console.log('loading');
}
}
let timer = setInterval(test,100);
</script>
</body>
</html>
🚀이렇게 정상적으로 잘 동작한다.
일단 해보자