AJAX 기본 튜토리얼

AJAX XMLHttpRequest

AJAX 소개

AJAX는 백그라운드 웹 서버와 데이터를 교환하여 웹 내용을 "비동기적으로" 업데이트할 수 있습니다。

이는 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트할 수 있다는 것을 의미합니다。

AJAX를 사용하여 다음을 할 수 있습니다：

데이터를 웹 서버로 전송합니다(백그라운드에서)
웹 서버에서 데이터를 읽습니다(페이지 로드 후)
페이지를 다시 로드하지 않고 웹 페이지를 업데이트합니다

AJAX 예제

다음 코드는 AJAX의 기본 예제를 보여줍니다：

AJAX가 이 텍스트를 변경합니다

코드 실행

AJAX 예제 설명

위의 예제는 다음 부분을 포함하고 있습니다：

HTML 코드는 다음과 같은 부분을 포함하고 있습니다：

　　<!DOCTYPE html>
　　<html>
　　
　　<div id="output">
　　<h2>AJAX가 이 텍스트를 변경합니다</h2>
　　<button onclick="fetchDoc()" type="button">요청 발행</button>
　　</div>
　　
　　</html>

HTML 코드에는 하나의<div>부분(<h2>과<button>)

의<DIV>부분은 서버에서 온 정보를 표시하는 데 사용됩니다。

의<button>클릭할 때 호출되는 함수를 호출합니다。

이 함수는 웹 서버에서 데이터를 요청하여 표시합니다(페이지를 다시 로드하지 않습니다)：

함수 fetchDoc()：

　　function fetchDoc() {
　　var httpRequest = new XMLHttpRequest();
　　httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {"}}
　　　　document.getElementById("output").innerHTML = this.responseText;
　　　}
　　};
　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();
　　}

AJAX는 무엇인가요？

AJAX는 “Asynchronous Javascript And XML”（비동기 JavaScript와 XML）라는 의미입니다。

AJAX는 프로그래밍 언어가 아니라, 웹 페이지에서 웹 서버에 접근하기 위한 기술입니다。

AJAX는 페이지를 다시 로드하지 않고 서버로 요청을 보낼 수 있습니다。

AJAX는 페이지를 새로 로드하지 않고 서버와 통신하고 데이터를 교환하고 페이지를 업데이트할 수 있습니다。

AJAX는 JSON, XML, HTML, 텍스트 파일 등 다양한 형식의 정보를 보내고 수신할 수 있습니다。

결론적으로, XMLHttpRequest 객체를 사용하여 서버와 통신하는 것입니다.

AJAX의 두 가지 주요 기능은 다음과 같은 작업을 수행할 수 있게 합니다：

페이지를 다시 로드하지 않고 요청을 보냅니다
서버에서 데이터를 수신하고 처리합니다

AJAX는 어떻게 작동합니까？

AJAX 통신을 수행하기 위해 JavaScript는 XMLHTTPRequest 객체를 사용하여 서버로 HTTP 요청을 보내고 응답 데이터를 수신합니다。

모든 최신 브라우저（Chrome, Firefox, IE）는 이 XMLHttpRequest 객체를 지원합니다。7 +Safari, Opera와 함께 지원합니다。

아래 그림은 AJAX 통신이 어떻게 작동하는지 설명합니다：

AJAX 작업 단계

웹 페이지에서 이벤트가 발생했습니다（예：페이지가 로드되거나 버튼이 클릭되었습니다）
XMLHttpRequest 객체는 JavaScript로 생성됩니다
XMLHttpRequest 객체는 요청을 웹 서버로 보냅니다
서버는 요청을 처리합니다
서버는 응답을 웹 페이지로 반환합니다
응답은 JavaScript로 읽힙니다
HTML DOM은 JavaScript로 업데이트됩니다

어떤 것을 배울 것인가요

이 강의의 다음 장에서는 다음을 배울 것입니다：
XMLHttpRequest 객체를 생성하는 방법
웹 서버로 데이터를 보내는 방법（백그라운드에서）
웹 서버에서 데이터를 읽는 방법（백그라운드에서）
페이지를 다시 로드하지 않고 웹 페이지를 업데이트하는 방법

AJAX XMLHttpRequest