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를 사용한 방식이 있습니다.

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

var type = navigator.appName;
var lang;

if (type == 'Netscape') {
    lang = navigator.language;
} else {
    lang = navigator.userLanguage;
}

lang = lang.substr(0, 2);

// 한국 : ko

// 미국 : en

안녕하세요 넌소중햇입니다.

간단하게 버튼 만들어서 글자를 복사하는 기능에 대해 남겨봅니다.

나중에 티스토리에서 사용할일이 있을듯 하여

기능을 남겨봅니다.

<script>
	function copyToClipboard(copyText){
		var ti = document.createElement("input");
		ti.setAttribute("value", copyText);
		document.body.appendChild(ti);
		ti.select();
		document.execCommand("copy");
		document.body.removeChild(ti);
		alert("\""+copyText+"\" 복사가 되었습니다.");
    }
</script>
<p><button onclick="copyToClipboard('복사할 텍스트 넣기')">복사하기</button></p>

복사하기