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을 사용할 수 있지만, 데이터를 순수 텍스트나 JSON 텍스트로 전송하는 것도 흔합니다.

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

AJAX이 어떻게 작동하는지

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