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

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

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

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

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

1. Fetch ​​방법
2. 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() 메소드를 호출했습니다.