JavaScript의 URL에서 데이터 가져오기

Muhammad Muzammil Hussain 2022년6월7일

JavaScript JavaScript Get

이 기사에서는 URL에서 웹 페이지로 데이터를 로드하고 그에 따라 해당 데이터에 대한 추가 작업을 수행하는 데 유용한 다양한 JavaScript 기능을 배우고 사용합니다.

JavaScript의 URL에서 데이터 가져오기

JavaScript에는 URL을 사용하여 데이터를 로드하는 여러 내장 및 외부 기능이 있습니다. 해당 URL은 서버 측에서 생성된 함수에 대한 API 요청을 호출하고 요청에 응답하기 위해 데이터를 반환합니다.

다른 메소드 유형으로 요청을 보낼 수 있지만 이 기사에서는 주로 서버 측에서 클라이언트 측으로 데이터를 가져오는 데 사용되는 GET 메소드에 대해 설명합니다. 아래 나열된 JavaScript에서 GET 요청을 수행하는 방법에는 여러 가지가 있습니다.

Fetch 방법
XML HTTP 요청

`fetch()` 메서드

fetch() 메서드는 JavaScript에서 네트워크 요청을 만드는 고급 방법이며 최신 브라우저에서 지원합니다. fetch() 메서드를 사용하여 웹 페이지를 새로 고치지 않고 서버에 요청을 보내 서버에서 데이터를 로드할 수 있습니다.

fetch 요청과 함께 async await 메소드를 사용하여 약속을 간결하게 할 수 있습니다. 모든 고급 브라우저에서 Async 기능이 지원됩니다.

기본 구문:

let requestRsponse = fetch(url, [params])

<script>
async function funcRequest(url){
 await fetch(url)
    .then((response) => {
      return response.json(); // data into json
    })
    .then((data) => {
      // Here we can use the response Data
    }).
    .catch(function(error) {
      console.log(error);
    });
}
   const url = 'URL of file';
   funcRequest(url);

</script>

위의 JavaScript 소스에서 async await 함수 funcRequest()를 선언했습니다. 이 함수는 URL을 인수로 가져오고 await 키워드와 함께 fetch 메서드를 사용하고 콜백 함수 then() 응답을 JSON 데이터로 변환합니다.

오류가 발생하면 catch 메소드를 console.log()와 함께 사용하여 로그에 오류를 표시합니다. 마지막으로 URL을 저장하고 funcRequest(url);에 전달했습니다.

XML HTTP 요청

웹 브라우저와 웹 서버 간에 데이터를 전송하는 객체 형태의 API입니다. XMLHttpRequest는 주로 AJAX(Asynchronous JavaScript and XML) 프로그래밍에서 사용됩니다.

프로그래밍 언어는 아니지만 AJAX는 여러 웹 기술을 사용하여 클라이언트 측에서 비동기 웹 애플리케이션을 개발하는 웹 개발 기술 세트입니다.

GET의 기본 구문:

<script>
my_variable = new XMLHttpRequest(); // object
my_variable.onload = function() {

 // Here, we can use the response Data

}
my_variable.open("GET", "MY_FILE_URL");

my_variable.send();

</script>

위의 JavaScript 소스에서 XMLHttpRequest 객체를 만든 다음 요청을 로드하는 동안 콜백 기능을 정의했습니다. open 함수를 사용하고 요청 메소드 유형과 URL을 인수로 전달하고 XMLHttpRequest()의 send() 메소드를 호출했습니다.

JavaScript의 URL에서 데이터 가져오기

fetch() 메서드

XML HTTP 요청

`fetch()` 메서드