[javascript] JAX 호출로 서버에서 이미지 가져오기

11 Dec 2023

javascript

이 문서에서는 JavaScript를 사용하여 서버에서 이미지를 가져오는 방법에 대해 알아보겠습니다. JAX (Javascript Asynchronous XML)를 사용하여 서버와 비동기식으로 통신하여 이미지를 가져올 것입니다.

서버의 이미지 가져오기

// 이미지 요청을 보내서 가져오기
function requestImage() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'image_url', true);
  xhr.responseType = 'blob';

  xhr.onload = function() {
    if (xhr.status === 200) {
      var imageUrl = URL.createObjectURL(xhr.response);
      var img = document.createElement('img');
      img.src = imageUrl;
      document.body.appendChild(img);
    }
  };
  xhr.send();
}

위의 코드에서 xhr.open에 이미지가 있는 URL을 지정하여 서버에 요청하는 것을 볼 수 있습니다. 요청이 완료되면, Blob으로 이미지를 받아오고, URL.createObjectURL로 이미지를 로드하고 화면에 표시합니다.

이로써 JAX 호출을 사용하여 JavaScript를 통해 서버에서 이미지를 가져오는 방법에 대해 알아보았습니다.

참고 자료:

MDN Web Docs - AJAX