Javascript 개념
AJAX
자바스크립트 코드는 동기적으로 실행됩니다.
동기적으로 실행된다는 뜻은 위에서 아래로 순차적으로 코드가 실행된다는 뜻입니다
.
AJAX가 나오기 이전에는 클라이언트와 서버가 통신하는 방식은 총 3가지였습니다.
- 브라우저 창에 특정 URL을 입력하기
- HTML 요소인 a태그 이용하기
- form 태그 이용하기
이때 서버는 요청 받은 데이터와 함께 데이터가 포함되어 있는 HTML 파일을 같이 전송했기 때문에 이것은 엄청나게 비효율적이였습니다.
(과자한개 먹겠다고 과자세트를 사는 격..)
// 자바스크립트 코드는 기본적으로 순서대로(동기적으로) 실행됩니다.
console.log(1);
console.log(2);
[3, 4, 5].forEach(i => console.log(i));
console.log(6);비동기적 실행 예제
console.log(1);
// setTimeout으로 콜백함수가 일정시간 뒤에 실행하도록 코드를 작성합니다. 순서대로 실행되지 않습니다.(비동기적으로 실행). 이러한 비동기 실행 코드는 setInterval, addEventListener 와 같은 함수들이 있습니다.
setTimeout(() => console.log(2), 100);
[3, 4, 5].forEach(i => console.log(i));
console.log(6);XMLHttpRequest
서버와 비동기 통신을 가능케 하는 자바스크립트 객체입니다.
// XHR 객체를 생성합니다.
const requestObj = new XMLHttpRequest();
requestObj.open('GET', 'url'); // 요청을 초기화합니다. 통신방법과 요청을 발신할 대상의 주소를 전달합니다.
requestObj.onreadystatechange = () => { // readystate 가 변화하면 실행되는 이벤트리스너 입니다.
// readystate : 요청을 보내는 클라이언트의 상태를 의미합니다.
// readystate의 종류
// 0 (UNSENT) - XHR 객체가 생성되었지만 아직 초기화되지 않았습니다.
// 1 (OPENED) - open()함수가 호출되어 요청이 초기화되었습니다.
// 2 (HEADERS_RECEIVED) - send()함수가 호출되었습니다.
// 3 (LOADING) - 데이터를 다운받는 중 입니다.
// 4 (DONE) - 통신이 완료되었습니다.
if (requestObj.readyState == 4 && requestObj.status == "200") {
const result = requestObj.responseText;
}
};
requestObj.send(); // 서버로 요청을 보냅니다. send 메소드가 실행되어야만 우리가 위에서 설정한 내용들이 의미를 가지게 됩니다.🧐 **readyState와 status**
개발자들은 종종 readyState와 status를 혼동합니다. 간단한 비유로 설명해보겠습니다.
배가 너무 고파서 1시간 후에 집에서 저녁을 먹기 위해 피자를 주문해야 합니다. 그래서 배달앱을 꺼내 피자를 한판 주문합니다.
이때 배달하는 사람이 피자 배달을 완료했는지, 아니면 배달 중인지 추적합니다. (readyState)
피자가 집에 도착하고 피자가 올바르게 만들어졌는지 확인합니다. 피자가 타지 않았는지, 재료를 잘못 넣었는지, 또는 주문대로 내가 원하는 피자가 맞는지 확인합니다. (status)
결론적으로, readyState === 4 (즉, 피자가 집에 도착했음)이고 status === 200 (즉, 피자가 올바르게 만들어졌음)인 경우에만 모든 통신이 계획대로 잘 진행되었다는 것을 의미합니다. XMLHttpRequest예제 코드
<p>hello world!</p>
<button type="button">통신버튼</button>
const btn = document.querySelector('button')
// btn.addEventListener('click', xhrRequest);
let result;
function xhrRequest() {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'message.txt');
xhr.onreadystatechange = () => {
console.log(xhr.readyState);
if (xhr.readyState === 4 && xhr.status === 200) {
const result = xhr.responseText;
console.log(result);
document.querySelector('p').textContent = result;
}
}
xhr.send();
}
xhrRequest();
console.log(result);
if(xhr.readyState === 4 && xhr.status === 200) // 온전하게 응답을 받았을 때를 의미한다.button 클릭시
p태그의 textContent가 바뀐 것을 볼 수 있다.
그리고 콘솔창에 나온 2,3,4는 (Open 후에 진행되는 순서로 각각 send()함수 호출, 데이터다운, 통신 완료를 의미합니다.)
