오늘은,,! 간단한 XMLHttpRequest 객체를 이용한
비동기 통신 예제를 해 볼 예정이당ㅎㅎㅎㅎ
원래의 계획은 XHR, $.ajax(), fetch(), axios 까지
하나씩 GET 메서드로 같은 데이터를 요청하는 코드를 작성해보려고 했으나.. ㅎㅎㅎ
하다보니 재밌는게 생각나서 딴 길로 새는 중 이다!!!!!!!
오늘의 일은 ,,,, 내일로........
🤓
input 태그에 원하는 컬러를 입력하고 버튼을 클릭하면
test.json으로 컬러의 정보가 담긴 JSON을 비동기로 요청하게 되고,
입력한 색이 JSON 안에 있는 컬러라면 hex 코드를 화면에 보여준다!!!
const btn = document.getElementById('btn');
const ipt = document.getElementById('ipt');
const hexCheck = (data) => {
const req = ipt.value;
const color_box = document.getElementById('color_box');
const hex = document.getElementById('hex');
for(let i in data){
if(data[i].color == req){
color_box.style.background = data[i].Hex;
hex.innerHTML = data[i].Hex;
return;
}
}
};
const onClick = () => {
const method = 'GET';
const url = `test.json`;
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onreadystatechange = () => {
if(xhr.readyState == XMLHttpRequest.DONE){
var status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
const data = JSON.parse(xhr.response);
hexCheck(data);
} else {
console.log('fail');
}
}
}
xhr.send();
};
btn.addEventListener('click', onClick);
다음 포스팅은 .. 정말 ..
xhr 객체를 편리하게 이용할 수 있는 $.ajax()와 fetch(), axios()에 대해 자세히 알아보장..!
역시 딴 짓은 재밌당
⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :) ⚠️
*** 혹시라도 잘못된 정보가 있다면 언제든지 알려주시면 감사하겠습니다 ! ***
'JS' 카테고리의 다른 글
IntersectionObserver API 무한 스크롤 구현 (0) | 2023.03.08 |
---|---|
[JS] Nullish coalescing operator (??) + OR 연산자 (0) | 2021.12.15 |
[JS] 자식 Node 모두 삭제: removeChild() (0) | 2021.10.19 |
[JS] Node.js 내장 모듈 : HTTP ? (0) | 2021.10.12 |
[JS] 자바스크립트 : 함수형 프로그래밍 - 순수 함수 (feat. sideEffect) (0) | 2021.09.13 |