[Javascript] Ajax 요청 보내기 - helloworld 자바스크립트 참조

Ajax는 자바스크립트를 이용해 HTTP요청(request)을 보낼 수 있다.

 

Asynchronous Javascript and XML(비동기 자바스크립트와 XML)의 약자

: 브라우저에서 페이지를 이동하지 않고 자바스크립트를 통해 http에 요청을 보낸 후 그 응답을 받아 처리할 수 있는 기술

- 페이지 이동이 없어 더 나은 사용자 경험을 제공.

<script>
    var req = new XMLHttpRequest( ); // ➊
    req.open("GET", "./data.txt");   // ➋
    req.send( );                     // ➌
    
    console.log(req.response); // 콘솔 출력 내용 추가
</script>

1 - Http request를 보낼 수 있는 객체를 생성

2 - open() 메서드 : 요청을 어떤 서버로 보낼지 결정(get,post등의 request method, 얻어올 리소스 또는 url)

3 - send() 메서드 : 메서드를 호출하여 http요청 전송

 req.response;

콘솔에서 확인 하면 해당파일의 내용을 볼 수 있다.

하지만 setTimeout이나 지금 배운 Ajax는 timeout이 일어날 때까지 혹은 요청한 HTTP 요청에 대한 응답을 받을 때까지 시간이 소요됩니다. 이 시간 동안 컴퓨터는 수많은 작업을 할 수 있으며, 이후에 있는 코드도 실행할 수 있습니다. 

자바스크립트는 이러한 명령들에 대해 비동기 실행 방식으로 동작합니다.

불필요한 기다림을 줄일 수 있고 다음 코드도 바로 실행할 수 있기 때문

대신 콜백 함수를 사용함으로써 응답을 받은 이후에 해야 할 작업들을 처리할 수 있습니다.