ajax 요청 보내기

1. ajax란

 asyncronous javascript and Xml

 

기존 클라이언트와 서버와의 통신이 곧 페이지 html의 Get요청이어서 요청에 의한 응답이 오면 페이지가 다시 랜더링이 되는 동작을 했다. 페이지가 다시 랜더링이 되면 당장 랜더링에 필요없는 데이터를 다시 요청해오는 리소스, 그리고 동기적으로 동작함으로 클라이언트의 블로킹 즉 사용자의 동작을 막는 이슈가 일어난다.

 

ajax의 등장은 XMLHttpRequest의 등작이다. 이는 브라우저에서 제공하는 Web API이다. MDN에 보면

 

XMLHttpRequest (XHR) 객체는 서버와 상호작용할 때 사용합니다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 있습니다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있습니다.

라고 한다. 간단하게 사용해 보면

const get = url =>{
    const xhr = new XMLHttpReqeust();
    
    xhr.open('GET',url);
    
    xhr.send();
    
    xhr.onload = ()=> {
    	if(xhr.status === 200){
        	console.log(JSON.parse(xhr.response));
        }
    }
}

 

이렇게 된다. 이제 이 코드를 자바스크립트가 실행 시킨다고 생각해보면, 먼저 우리가 서버에서 데이터를 가지고 오기 위해 저 get함수를 호출할 것이다. 그러면 JS의 callstack에 실행 컨텍스트가 생성됨으로 함수가 실행 되고, XMLHttpReqeust라는 객체를 생성자 함수로 호출하여 xhr객체를 만들어준다.

 

 open으로 요청 초기화, send로 요청을 보내고 나면 마냥 리턴을 기다리는게 아니라 비동기 적으로 동작한다. on이 붙은 걸 보니 딱 이벤트 헨들러 생각이 나지 않는가? 이벤트 핸들러도 비동기 프로그래밍의 한 형태이다. 자 여튼 이런 비동기 코드의 처리를 위해서 자바스크립트는 onload에 등록된 함수를 task queue로 보내고 call stack이 비고나면 실행되어진다. 

 

https://ukcasso.tistory.com/63