Ajax 기초

TIL/Ajax

Ajax 기초

hanna🐤 2022. 1. 24. 15:39

728x90

# Ajax란?

Asynchronous JavaScript And XML의 약자
빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나
웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음
※ Ajax를 이용한다면 백그라운드 영역에서 서버와 통신하여, 결과를 웹 페이지의 일부분에만 표시할 수 있음
이때 서버와는 다양한 형태의 데이터를 주고받을 수있음
- JSON, XML, HTML, 텍스트파일 등

# Ajax의 장점

웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음
웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있음
웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있음
백그라운드 영역에서 서버로 데이터를 보낼 수 있음

# Ajax의 한계

Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로,
- 클라이언트 풀링방식
  - 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 의미
서버 푸시 방식의 실시간 서비스는 만들 수 없음
Ajax로는 바이너리 데이터를 보내거나 받을 수 없음
Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax요청을 보낼 수는 없음
클라이언트의 PC로 Ajax 요청을 보낼 수는 없음

# Ajax 프레임워크

Ajax를 이용하여 개발을 손쉽게 할 수 있도록 미리 여러가지 기능을 포함해 놓은 개발환경
- dojo, jQuery

# 예제 코드

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

<head>
<meta charset="UTF-8">
<title>Ajax Intro</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(function() {
        $("#requestBtn").on("click", function() {
            $("#text").load("/examples/media/ajax_intro_data.txt");
        });
    });
</script>
</head>
	<body>
	<h1>Ajax(Asynchronous JavaScript and XML)</h1>
	<p id="text">이 단락에 다른 텍스트를 불러와보죠!</p>
	<button id="requestBtn">데이터 불러오기!</button>
	</body>
</html>

출처: tcpschool.com

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

728x90