AJAX 수업 3강 - POST 요청과 데이터 전송

안녕하세요! 그레이해커 월횽(W)입니다. 이번에는 AJAX 수업의 세 번째 강의를 준비했습니다. 이번 강의에서는 POST 요청과 데이터 전송에 대해 알아보겠습니다. POST 요청은 데이터를 서버로 전송하는데 사용되며, 이는 주로 사용자가 입력한 데이터를 서버에 전달하는 데 유용합니다.

 

 

 

 

 

POST 요청의 필요성

POST 요청은 데이터를 서버로 전송하는 데 필요합니다. 주로 사용자가 입력한 정보나 어떤 작업을 서버에 전달할 때 사용됩니다. 이때 GET 요청과의 주요 차이점은 다음과 같습니다.

· 데이터 보안 및 전송량 고려: POST 요청은 데이터를 URL에 노출시키지 않기 때문에 GET 요청보다 보안적으로 더 안전합니다. 또한, GET 요청은 URL에 데이터가 노출되기 때문에 전송할 수 있는 데이터 크기에 제한이 있을 수 있습니다.

 

 

 

 

POST 요청 예제

이제 간단한 POST 요청 예제를 통해 실습해보겠습니다.

// AJAX를 이용한 POST 요청
var xhr = new XMLHttpRequest();
var url = "your_server_url";
var data = JSON.stringify({ key: "value" });

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

xhr.send(data);

 

위 코드는 간단한 POST 요청을 보내는 예제입니다. your_server_url에는 실제 서버의 URL을 입력하고, data에는 전송할 데이터를 JSON 형식으로 입력합니다. 서버로부터 응답을 받으면 콘솔에 응답 내용이 출력됩니다.

 

 

반응형

 

 

폼 데이터 전송

또한, HTML 폼과 AJAX를 이용하여 데이터를 전송할 수도 있습니다. 아래는 간단한 폼 데이터 전송 예제입니다.

<!-- HTML 폼 -->
<form id="myForm">
  <input type="text" name="username" id="username">
  <input type="password" name="password" id="password">
  <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
function submitForm() {
  var formData = new FormData(document.getElementById("myForm"));
  var xhr = new XMLHttpRequest();
  var url = "your_server_url";

  xhr.open("POST", url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  
  xhr.send(formData);
}
</script>

위 코드에서는 HTML 폼을 이용하여 사용자가 입력한 데이터를 서버로 전송하는 방법을 보여줍니다. 사용자가 입력한 데이터는 FormData 객체를 통해 가져와서 서버로 전송됩니다.

 

이상으로 AJAX 수업의 세 번째 강의를 마치겠습니다. 다음 강의에서는 AJAX와 JSON에 대해 더 자세히 알아보겠습니다.

 

 

 

 

 

- 이전 수업 목록