자바스크립트에서 웹서버와 JSON 데이터를 주고받는 방법

10 Sep 2023

javascript

웹 애플리케이션을 개발할 때, 자바스크립트는 웹서버와 데이터를 주고받는데 자주 사용됩니다. 특히 JSON 형식은 데이터를 구조화하고 전송하기 위해 많이 사용되며, 자바스크립트에서도 이를 쉽게 처리할 수 있습니다. 이번 포스트에서는 자바스크립트에서 웹서버와 JSON 데이터를 주고받는 방법에 대해 알아보겠습니다.

웹서버에 GET 요청 보내기

웹서버에 GET 요청을 보내어 JSON 데이터를 받아오는 방법을 알아보겠습니다.

function getJSON(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'json';
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send();
}

// 예제 사용법
getJSON('http://example.com/data.json', function(error, data) {
  if (error !== null) {
    console.error('Error:', error);
  } else {
    console.log('Data:', data);
  }
});

이 예제에서는 getJSON 함수를 정의하여 웹서버에 GET 요청을 보내고, 응답을 JSON으로 변환한 후에 콜백 함수를 실행합니다. XMLHttpRequest 객체를 사용하여 웹서버와 통신하며, open 메소드를 호출하여 요청을 설정하고, responseType을 'json'으로 설정하여 응답을 JSON으로 자동 변환합니다.

웹서버에 POST 요청 보내기

웹서버에 POST 요청을 보내어 JSON 데이터를 전송하는 방법을 알아보겠습니다.

function postJSON(url, data, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    var status = xhr.status;
    if (status === 200) {
      callback(null, xhr.response);
    } else {
      callback(status, xhr.response);
    }
  };
  xhr.send(JSON.stringify(data));
}

// 예제 사용법
var data = { name: 'John Doe', age: 25 };
postJSON('http://example.com/api', data, function(error, response) {
  if (error !== null) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
  }
});

이 예제에서는 postJSON 함수를 정의하여 웹서버에 POST 요청을 보내고, JSON 데이터를 전송한 후에 응답을 처리합니다. setRequestHeader 메소드를 호출하여 요청에 대한 헤더를 설정하고, JSON.stringify 메소드를 사용하여 데이터를 JSON 문자열로 변환하여 전송합니다.

이처럼 자바스크립트를 사용하여 웹서버와 JSON 데이터를 주고받을 수 있습니다. 웹 개발에서 자주 사용되는 이 기능을 응용하여 다양한 기능을 구현할 수 있습니다. 각각의 요청과 응답에 대한 처리를 정확하게 구현하고, 오류 처리를 신경쓰면 안정적인 웹 애플리케이션을 개발할 수 있습니다.