[javascript] XMLHttprequest, Fetch API, Axios, $.ajax를 사용한 통신방법

---

1. XMLHttpRequest를 사용한 방법

// GET 요청
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
xhr.send();

// POST 요청
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/data', 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);
  }
};
var data = JSON.stringify({
  key1: 'value1',
  key2: 'value2'
});
xhr.send(data);

---

2. Fetch API를 사용한 방법

// GET 요청
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});

// POST 요청
fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2',
  }),
})
.then(response => response.json())
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Error:', error);
});

---

3. Axios 라이브러리를 사용한 방법

// GET 요청
axios.get('https://example.com/api/data')
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

// POST 요청
axios.post('https://example.com/api/data', {
  key1: 'value1',
  key2: 'value2',
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error('Error:', error);
});

 

---

4. $.ajax 라이브러리를 사용한 방법

// GET 요청
$.ajax({
  url: 'https://example.com/api/data',
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error('Error:', error);
  }
});

// POST 요청
$.ajax({
  url: 'https://example.com/api/data',
  method: 'POST',
  dataType: 'json',
  contentType: 'application/json',
  data: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  }),
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error('Error:', error);
  }
});

 

이 세 가지 방법 모두 널리 사용되며, 각각의 장단점이 있습니다.

 

XMLHttpRequest는 오래된 방법이지만 모든 브라우저에서 지원되고 있습니다.

 

Fetch API는 비교적 최근에 나왔으며 간결하고 강력한 기능을 제공합니다.

 

Axios는 HTTP 클라이언트 라이브러리로서 코드를 간결하게 작성할 수 있고 다양한 환경에서 사용할 수 있습니다.

 

ajax를 사용한 방식이 있습니다.

 

이를 통해 다양한 상황에 맞게 선택하여 사용할 수 있습니다.