AJAX 소개

The XMLHttpRequest Object

AJAX 예제 설명

HTML Page

HTML 페이지에 <div> 섹션과 <button>이 있습니다.

<div> 섹션은 서버에서 얻은 정보(information from a server)를 표시하는 데 사용됩니다.

<button>는 함수를 호출합니다 (버튼을 클릭할 때).

이 함수는 웹서버에 데이터를 요청하고, 그 데이터를 표시합니다:

loadDoc() 함수


AJAX란?

AJAX = Asynchronous JavaScript And XML(비동기 자바스크립트 및 XML).

AJAX는 프로그래밍 언어가 아닙니다.

AJAX는 다음을 조합하여 사용합니다:

  • 브라우저 내장(built-in) XMLHttpRequest 객체(object) (웹서버에 데이터를 요청하기 위해)
  • 자바스크립트와 HTML DOM (데이트를 표시하고 사용하기 위해)

AJAX를 사용하면 장면 뒤에서(behind the scenes) 웹 서버와 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트 할 수 있습니다. 즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있습니다.


AJAX 작동 방식

AJAX

  1. 웹페이지에서 이벤트가 발생합니다(페이지가 로드됨, 버튼을 클릭함)
  2. XMLHttpRequest 객체는 자바스크립트에 의해 생성됩니다.
  3. XMLHttpRequest 객체는 웹서버에 요청을 보냅니다
  4. 서버에소 요청을 처리합니다.
  5. 서버가 웹페이지에 응답(response)을 보냅니다.
  6. 자바스크립트가 응답을 읽습니다.
  7. 적절한 작업(Proper action) (예: 페이지 업데이트)이 자바스크립트에 의해 수행됩니다.

출처: AJAX Introduction

답글 남기기