[JS] ajax : XMLHttpRequest 🤔!!

오늘은,,! 간단한 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()에 대해 자세히 알아보장..! 

역시 딴 짓은 재밌당 

 

 

---

⚠️ 아래 내용은 모두 개인적인 참고 / 기록을 위한 용도입니다. 참고해주시고 편안하게 봐주세요 :)  ⚠️
***    혹시라도 잘못된 정보가 있다면  언제든지 알려주시면 감사하겠습니다  !    ***