프리 정보 컨텐츠

AJAX의 개념과 사용 목적, 사용법 정리 본문

Javascript/ajax

AJAX의 개념과 사용 목적, 사용법 정리

쏜스 2021. 6. 29. 17:09

AJAX

AJAX(Asynshronous Javascript And Xml)는 자바스크립트의 라이브러리 중 하나로 비동기식(웹 페이지를 리로드하지 않고 데이터를 불러오는 방식) 자바스크립트와 XML의 약자로 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체페이지를 새로고침 할 필요없이 필요한 일부분의 데이터만을 갱신할 수 있게 도와줍니다.

AJAX는 왜 사용할까요?

AJAX는 왜 사용하는걸까요? 간단하게 이해하자면 카카오, 네이버의 트래픽이 많은 통신량을 관리할 때 리소스들을 관리하기 위함입니다. 페이지가 전환될 때마다 모든 파일을 다운받고 모든 요청을 주게된다면 웹 페이지의 속도는 느려지기 때문에 클릭해서 원하는 내용만 요청을 받아와 부분적으로 변경할 때 AJAX를 사용하므로 AJAX를 사용합니다.

AJAX 동작 원리와 기존 웹 동작 원리

위의 그림과 같이 기존 웹 응용 프로그램에 Ajax를 사용하면 다음과 같은 순서로 진행됩니다.

  • 사용자 요청에 의해 이벤트 발생
  • 요청 이벤트 발생 후 이벤트 핸들러에 의해 자바스크립트 호출
  • 자바스크립트 XMLHttpRequest 객체를 사용하여 서버 요청 전송
  • 서버는 이 객체를 가지고 Ajax요청 처리
  • 처리한 결과를 HTML, XML, JSON형태로 웹 브라우저에 전달
  • 전달받은 데이터로 웹 페이지의 일부분만 갱신하는 자바스크립트 호출
  • 결과적으로 웹 페이지의 일부분만을 다시 로딩되어 표시

AJAX 사용방법

개념과 사용하는 목적, 동작 원리를 알아보았으니 간단한 사용방법에 대해서 알아보겠습니다.

 

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>Ajax Suggestion</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script>
		$(function() {
			// <input>요소에 문자가 입력될 때마다 호출됨.
			$("#search_box").keyup(function() {
				$.ajax({	// Ajax 요청을 작성하고 GET 방식으로 전송함.
					url: "/examples/media/ajax_suggestion.php",
					data: { keyword: $(this).val() },
					method: "GET"
				})			// Ajax 응답을 정상적으로 받으면 실행됨.
				.done(function(result) {
					$("#suggestion_box").html(result);
				})
			})
		});
	</script>
</head>

<body>

	<h1>검색어 추천 기능</h1>
	<p>대한민국의 도시를 영문으로 찾아보세요!</p>
	<form action="/examples/media/tcpschool_request.php">
		<input id="search_box" type="text" name="city" size="20">
		<div id="suggestion_box"></div>
	</form>

</body>

</html>

Ajax 를 사용하는 방법은 여러가지가 있으나 fetch API를 사용하는 경우는 아래 링크를 참고하자

https://opentutorials.org/course/3281/20562

저작자표시
Comments