AJAX 개요

AJAX는 개발자의 꿈이 되는 것입니다. 왜냐하면 여러분은 다음과 같이 할 수 있습니다:

  • 페이지를 새로 고침하지 않고 웹 페이지를 업데이트합니다
  • 페이지가 로드된 후 서버에서 데이터를 요청합니다
  • 페이지가 로드된 후 서버에서 데이터를 받아옵니다
  • 서버로 데이터를 배후로 보냅니다

AJAX 예제

아래의 버튼을 클릭하여 Ajax가 이 텍스트를 변경하도록 하세요：

직접 시험해 보세요

AJAX 예제 설명

HTML 페이지

<!DOCTYPE html>
<html>
<body>
<div id="demo">
  <h2>AJAX로 이 텍스트 변경</h2>
  <button type="button" onclick="loadDoc()">텍스트 변경</button>
</div>
</body>
</html>

이 HTML 페이지는 <div>와 <button>를 포함하고 있습니다。

<div> 서버에서 온 정보를 표시하는 데 사용됩니다。

<button> 함수 호출（클릭 시）。

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

Function loadDoc()
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

어떻게 AJAX가 되는가?

AJAX = Asynchronous JvaScript And XML.

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

AJAX은 단순히 다음을 결합한 것입니다:

  • 브라우저 내장 XMLHttpRequest 객체(웹 서버에서 데이터를 요청)
  • JavaScript 및 HTML DOM(데이터를 표시하거나 사용)

Ajax은 오해의 소지가 있는 이름입니다. Ajax 애플리케이션은 데이터를 전송할 때 XML을 사용할 수 있지만, 데이터를 plain text나 JSON 텍스트로 전송하는 것도 흔합니다.

Ajax은 웹 서버 뒤에 있는 Web 서버와 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있도록 합니다. 이는 웹 페이지의 일부를 업데이트할 수 있지만 전체 페이지를 다시 로드하지 않아도 됨을 의미합니다.

AJAX이 어떻게 작동하는지

AJAX
  1. 웹 페이지에서 이벤트가 발생합니다 (페이지 로드, 버튼 클릭)
  2. JavaScript로 XMLHttpRequest 객체를 생성합니다
  3. XMLHttpRequest 객체가 웹 서버로 요청을 보냅니다
  4. 서버가 요청을 처리합니다
  5. 서버가 응답을 웹 페이지로 보냅니다
  6. JavaScript로 응답을 읽습니다
  7. JavaScript로 올바른 동작을 수행합니다. (예: 페이지 업데이트)