JavaScript POST

1. XHR (XML HTTP 요청)을 사용하여 JavaScript에서 양식없이POST데이터 보내기
2. Fetch API를 사용하여 JavaScript에서 양식없이POST데이터 보내기
3. Navigator.sendBeacon()을 사용하여 JavaScript에서 양식없이POST데이터 보내기

이 자습서에서는 JavaScript에서 양식을 사용하지 않고 게시물 데이터를 보내는 방법을 설명합니다.

XHR (XML HTTP 요청)을 사용하여 JavaScript에서 양식없이POST데이터 보내기

XHR은 JavaScript에서HTTP 요청을하는 데 사용되는 객체입니다. 서버와 상호 작용하고 클라이언트와 서버간에 데이터를 교환하는 데 도움이됩니다. 전체 페이지를 새로 고치지 않고도 서버에서 데이터를 가져올 수 있습니다. 이를 통해 사용자는 페이지의 일부만 중단하여 계속 작업 할 수 있습니다. 이 메서드를 사용하여 양식을 사용하지 않고POST 데이터를 보낼 수 있습니다.

const URL = 'delftstack.com'
var xhr = new XMLHttpRequest();
xhr.open('POST', URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({name: 'DelftStack'}));

Fetch API를 사용하여 JavaScript에서 양식없이POST데이터 보내기

XHR과 같은 JavaScript Fetch API는HTTP요청을 서버로 보내는 데 도움이됩니다. 그러나XHR은 약속을 사용하지 않았으며 코드가 복잡하고 부정확했습니다. Fetch API를 사용하려면fetch()메서드를 호출해야합니다. 다음 매개 변수를 허용합니다.

• URL: 데이터를 요청할 API의 URL입니다.
• object: 요청 유형에 대한 추가 속성을 지정하는 객체입니다. 3속성이 있습니다.
  • method:GET,POST등과 같은 메소드를 지정합니다.이 경우POST요청을하므로 해당 값은POST이어야합니다.
  • body:body객체는 전송할 데이터를 포함합니다.
  • headers:HTTP요청 및 응답 헤더에 대한 다양한 작업을 수행하는 데 도움이되는 선택적 매개 변수입니다.

fetch()메소드 다음에 프라 미스 메소드then()및catch()를 지정합니다. fetch()에 의해 반환 된promise가resolved이면then()에 지정된 함수가 실행되고 그렇지 않으면promise가거부되고catch()내부의 함수가 호출됩니다.

let data = {name: 'DelftStack'};
fetch('https://randomuser.me/api/?results=10', {
  method: 'POST',
  body: JSON.stringify(data)
}).then(res => {
  console.log('Promise resolved', res);
});

Navigator.sendBeacon()을 사용하여 JavaScript에서 양식없이POST데이터 보내기

Navigator.sendBeacon()메서드는 HTTP 요청을 통해 비동기 적으로 웹 서버에 데이터를 전송하는 데 도움이됩니다. 주요 응용 프로그램은 웹 사이트 분석 데이터를 서버로 보내는 것이지만 ‘POST’데이터를 보내는데도 사용할 수 있습니다.

let data = {name: 'DelftStack'};
navigator.sendBeacon('https://randomuser.me/api/?results=10', data);