JavaScript에서 XMLHttpRequest를 사용하여 POST 요청 보내기
이 기사에서는 다양한 예제와 함께 JavaScript 코드를 사용하여 AJAX 프로그래밍에서 XMLHttpRequest 게시 요청을 보내는 방법을 설명합니다.
XMLHttpRequest
웹 서버에서 데이터를 가져오려면 XMLHttpRequest(XHR)를 사용합니다. 웹 브라우저와 웹 서버 간에 데이터를 전송하는 객체 형태의 API입니다.
XMLHttpRequest는 주로 AJAX 프로그래밍에서 사용됩니다.
AJAX 프로그래밍
AJAX는 비동기 JavaScript 및 XML을 나타냅니다. 프로그래밍 언어는 아니지만 AJAX는 여러 웹 기술을 사용하여 클라이언트 측에서 비동기식 웹 애플리케이션을 개발하는 일련의 웹 개발 기술입니다.
AJAX를 사용하여 백그라운드에서 웹 서버로 데이터를 보낼 수 있습니다.
페이지가 로드되면 웹 서버에서 데이터를 읽고 다시 로드하지 않고 AJAX를 사용할 수 있습니다. 웹 페이지도 업데이트할 수 있습니다.
XMLHttpRequest 개체를 만들기 위한 기본 구문:
my_variable = new XMLHttpRequest();
요청을 로드하는 동안 콜백 함수를 정의합니다.
my_variable.onload = function() {
// Here we can use the Data
}
이제 요청을 보낼 수 있습니다.
xhttp.open("REQUEST_METHOD, "FILE_PATH")
xhttp.send();
JavaScript에서 XMLHttpRequest를 사용하여 POST 요청 보내기
POST 요청은 클라이언트 측에서 서버로 데이터를 보내는 데 도움이 됩니다. 데이터베이스에서 파일이나 데이터를 업데이트해야 하는 경우 POST 방법을 사용합니다.
POST 방식은 크기에 제한이 없기 때문에 엄청난 양의 데이터를 서버로 보낼 수 있습니다. 우리는 일반적으로 POST 방법을 사용하여 사용자 입력을 수신하고 가입 양식과 같이 DB에 저장합니다.
POST 방법은 GET 방법보다 더 안전합니다.
기본 구문:
my_variable = new XMLHttpRequest();
my_variable.onload = function() {
// Here, we can use the data
} xhttp.open('POST', 'MY_FILE_PATH');
xhttp.send();
POST 메서드를 사용하여 POST 요청의 구문과 작업을 더 잘 이해하기 위한 예제로 완전한 JavaScript 소스를 생성합니다. 요청을 실행하기 전에 객체에 헤더를 설정해야 한다는 점을 기억하십시오.
예제 코드:
<!DOCTYPE html>
<html>
<body>
<h2>XMLHttpRequest using POST method</h2>
<button type="button" onclick="loadRequest()">Request post method</button> // calling of a request
<p id="test"></p>
<script>
function loadRequest() {
const requestObject = new XMLHttpRequest(); // object of request
requestObject.onload = function() {
document.getElementById("test").innerHTML = this.responseText; // displaying response text in paragraph tag
}
requestObject.open("POST", "MY_FILE_PATH");
requestObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // setting of headers in request
requestObject.send("DATA_TO_SEND"); // data to send in request
}
</script>
</body>
</html>
예제 코드 설명:
- 위의 HTML 소스 코드에서 단락 요소를 만들고 ID를 정의하여 텍스트 값을 할당했습니다.
Request post method버튼을 생성했으며 해당 버튼의onclick이벤트는loadRequest()라는 함수입니다.loadRequest()함수에서XMLHttpRequest()객체를 생성했습니다.- 그런 다음 콜백 기능을 사용하여 데이터를 가져오고
document.getElementById("test")를 사용하여 단락에 요청-응답을 할당했습니다. - 이제 요청 연결을 열고 요청 방법
POST와 네트워크 요청 파일 경로를 전달했습니다. - 컨텐츠 유형을 정의하기 위해 요청 헤더를 설정했습니다.
- 마지막으로 게시하고 싶은 데이터를 사용하여 요청을 보냈습니다.
- 올바른 네트워크 요청 파일 경로로 이 HTML 소스를 저장하고 파일을
.html확장자로 저장할 수 있습니다. - 결과를 보려면 아무 브라우저에서나 엽니다.