jQuery 없이 Ajax 호출하기

  2. 어떻게
  3. JavaScript 하우투
  4. jQuery 없이 Ajax 호출하기
Habdul Hazeez 2023년6월20일
JavaScript JavaScript Ajax
  1. JavaScript에서 XMLHttpRequest를 사용하여 Ajax 호출을 만드는 방법
  2. JavaScript에서 Fetch API를 사용하여 Ajax 호출을 만드는 방법
jQuery 없이 Ajax 호출하기

이 튜토리얼은 외부 라이브러리 없이 JavaScript에서 AJAX 호출을 만드는 방법을 알려줍니다. 그러므로 우리는 당신에게 다음을 가르칠 것입니다.

  1. XMLHttpRequest로 AJAX 호출하는 방법
  2. Fetch API로 AJAX 호출을 만드는 방법

JavaScript에서 XMLHttpRequest를 사용하여 Ajax 호출을 만드는 방법

XMLHttpRequest는 AJAX 호출을 허용하는 JavaScript의 개체입니다. 일련의 방법 덕분에 이를 가능하게 합니다.

이러한 방법에는 다음이 포함됩니다.

  1. XMLHTTPRequest.onreadystatechange()
  2. XMLHTTPRequest.readyState
  3. XMLHTTPRequest.status()
  4. XMLHTTPRequest.open()
  5. XMLHTTPRequest.send()

올바르게 결합되면 이러한 메서드를 사용하여 AJAX 호출을 할 수 있습니다. 또한 개체 이름은 해당 개체가 수행하는 작업에 대한 아이디어를 제공합니다.

예를 들어 XMLHTTPRequest.send()는 준비가 되면 AJAX 호출을 보냅니다. 다음은 AJAX 호출에 XMLHttpRequest를 사용하는 일반적인 알고리즘입니다.

  1. 새 XMLHTTPRequest 객체 생성

  2. XMLHTTPRequest.onreadystatechange()에 함수를 첨부합니다.

    2.1 함수는 XMLHTTPRequest.readyState가 DONE을 반환하는지 확인합니다.
    2.2 XMLHTTPRequest.status()를 확인하고 그에 따라 조치

  3. AJAX 연결 열기

    3.1 연결이 GET 또는 POST 요청인지 지정하는 부분입니다.

  4. AJAX 호출 보내기

한편, 달성하려는 목표에 따라 알고리즘이 더 길어질 수 있습니다. 그러나 다음에 자세히 설명하는 예제에서는 알고리즘이 목적에 부합합니다.

사용자는 예제에서 HTML 버튼을 클릭하여 AJAX 호출을 시작할 수 있습니다. 이 호출은 <main> 요소의 내용을 대체합니다.

<head>
	<meta charset="utf-8">
	<title>Plain AJAX Request</title>
	<style>
		body {
			display: grid;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

		button {
			padding: 1.2em;
			background-color: #1a1a1a;
			color: #ffffff;
			border: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<main id="button_container">
		<button type="button"  onclick="load_ajax_button()">CLICK ME</button>
	</main>
	<script>
		function load_ajax_button() {
			const xhttp = new XMLHttpRequest();
			xhttp.onload = function() {
				let button_container = document.getElementById("button_container")
				button_container.innerHTML = this.responseText;
			}
			xhttp.open("GET", "ajax-button.html", true);
			xhttp.send();
		}
	</script>
</body>

출력:

XMLHttpRequest를 사용한 Ajax 요청

JavaScript에서 Fetch API를 사용하여 Ajax 호출을 만드는 방법

Fetch API는 AJAX 호출을 수행할 수 있는 최신 웹 브라우저의 내장 기능입니다. 또한 Fetch API를 XMLHttpRequest의 최신 버전으로 간주할 수 있습니다.

예를 들어 아래 코드에서 HTML 버튼을 누를 때마다 Picsum API에서 임의의 이미지를 가져옵니다. 한편, 다음은 프로세스가 작동하는 방식입니다.

  1. HTML 버튼을 클릭하여 Picsum API에 가져오기 요청을 시작합니다.
  2. Picsum API 응답에서 url 속성을 가져옵니다. url에 임의의 이미지 주소가 포함되어 있기 때문입니다.
  3. Picsum API의 주소를 이미지 소스로 사용합니다.
  4. 따라서 HTML 버튼을 클릭할 때마다 새로운 임의의 이미지가 생성됩니다.
<head>
	<meta charset="utf-8">
	<title>Fetch API</title>
	<style>
		main {
			text-align: center;
			margin: 0 auto;
			max-width: 800px;
		}

		img {
			max-width: 100%;
			display: inline-block;
		}

		button {
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<main>
		<h2>A Simple Fetch API Example</h2>
		<div class="img-container">
			<img src="" id="random_image" width="300" height="300">
		</div>
		<button>Click Me for a Random Image</button>
	</main>

	<script>
		let button = document.querySelector('button');

		button.addEventListener('click', function () {
			fetch('https://picsum.photos/200/300')
			.then((response) => {
				return response;
			})
			.then((image_source) => {
				random_image.src = image_source['url'];
			});
		}, false);
	</script>
</body>

출력:

Fetch API가 있는 Ajax

작가: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn

관련 문장 - JavaScript Ajax