AJAX 통신을 할 때 jQuery가 사용하기 편리해서 자주 사용했으나 이번에 바닐라 JS로 어떻게 구현하는 지 궁금해서 대강 코드를 작성해보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>바닐라 JS로 AJAX 통신하기 예제</title>
</head>
<body>
<button type="button" id="myButton">AJAX 통신 테스트하기</button>
</body>
<script>
// 1. 버튼 DOM을 변수로 지정
const myButton = document.getElementById("myButton");
// 2. 버튼 클릭 시 이벤트 추가
myButton.addEventListener("click", function () {
// 3. XMLHttpRequest 생성
let xhr = new XMLHttpRequest();
// 4. 요청 보내기
xhr.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true);
// 4-1. POST 요청일 경우 요청 HEADER를 설정한다.
// xhr.setRequestHeader("Content-type", "application/json");
// 5. 요청 전송
xhr.send("id=get_ajax");
// 6. 요청 후 작업
xhr.onload = function () {
// 7. 요청에 성공했을 때
if (xhr.status == 200) {
console.log(xhr.response);
console.log("요청 성공");
// 8. 요청에 실패했을 때
} else {
console.log("요청 실패");
}
};
});
</script>
</html>
버튼 하나를 두고 버튼을 클릭하면 AJAX 통신이 이루어지는 방식이다.
POST로 요청을 보낼 때는 헤더 설정이 반드시 필요하다. 4-1을 참조하면 된다.
'Study > JavaScript' 카테고리의 다른 글
| [JavaScript] 함수형 프로그래밍(2) (0) | 2022.11.04 |
|---|---|
| [JavaScript] 함수형 프로그래밍(1) (0) | 2022.11.02 |
| [JavaScript] 배열에 사용하는 반복문과 배열 메소드 비교하기 (0) | 2022.10.29 |
| [JavaScript] 웹소켓 사용하기 (0) | 2022.04.30 |
| [JavaScript] 쓸데 많은 정규 표현식 정리 (0) | 2022.04.07 |
