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

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

안녕하세요! 그레이해커 월횽입니다. 이번에는 AJAX 수업의 세 번째 강의를 준비했습니다. 이번 강의에서는 POST 요청과 데이터 전송에 대해 알아보겠습니다.

728x90

POST 요청의 필요성

POST 요청은 데이터를 서버로 전송하는 데 사용됩니다. 주로 사용자가 입력한 정보를 서버에 전달할 때 사용되며, 다음과 같은 특징이 있습니다.

• 보안성 향상: POST는 데이터를 URL에 포함하지 않기 때문에 GET보다 더 안전합니다.
• 전송 용량: GET 요청보다 더 많은 양의 데이터를 전송할 수 있습니다.

반응형

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);

your_server_url은 실제 서버 주소로 변경해야 하며, JSON 형식의 데이터를 전송하고 응답을 콘솔에 출력합니다.

SMALL

폼 데이터 전송

HTML form과 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>

JavaScript 처리 코드

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);
}

FormData 객체를 사용하면 HTML 폼 데이터를 간편하게 전송할 수 있습니다. 파일 업로드도 이 방식으로 가능합니다.

이상으로 POST 요청과 폼 데이터를 활용한 AJAX 통신에 대해 살펴보았습니다. 실무에서도 사용자 입력 처리나 로그인 요청 등에서 자주 사용됩니다.

다음 강의에서는 AJAX와 JSON의 관계 및 활용법을 더 깊이 있게 알아보겠습니다.

이전 강의 보기: [AJAX 수업] 2강 - 첫 번째 AJAX 요청 만들기
다음 강의 보기: [AJAX 수업] 4강 - AJAX와 JSON, JSON의 이해