자바스크립트에서 JSON 데이터를 서버에 전송하는 방법

아래는 XMLHttpRequest 객체를 사용하여 JSON 데이터를 서버에 전송하는 예제 코드입니다.

var data = { name: "John", age: 30 };
var json = JSON.stringify(data);

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/api", true);
xhr.setRequestHeader("Content-Type", "application/json");

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

xhr.send(json);

위의 코드에서, 우선 JSON.stringify() 함수를 사용하여 JavaScript 객체를 JSON 문자열로 변환합니다. 그리고 XMLHttpRequest 객체를 생성하고 open() 메서드로 POST 요청을 보낼 URL을 지정합니다.

setRequestHeader() 메서드를 사용하여 요청 헤더에 “Content-Type”을 “application/json”으로 설정합니다. 이는 서버에게 요청이 JSON 형식의 데이터임을 알려줍니다.

onreadystatechange 이벤트 핸들러를 등록하여 서버 응답에 대한 처리를 수행합니다. readyState가 4이고 status가 200인 경우에만 응답을 처리하도록 설정합니다. 그리고 JSON.parse() 함수를 사용하여 서버에서 받은 JSON 응답을 JavaScript 객체로 변환합니다.

마지막으로 send() 메서드를 사용하여 요청을 서버로 전송합니다. 이때, send() 메서드의 인자로는 변환한 JSON 문자열을 전달합니다.

위의 예제 코드는 JSON 데이터를 POST 요청으로 서버에 전송하는 간단한 방법입니다. 더 복잡한 기능이나 라이브러리를 사용하고 싶다면, axios나 fetch와 같은 라이브러리를 사용할 수도 있습니다.