JavaScript AJAX Intro

description : JavaScript AJAX Introduction
author : 오션
email : shlim@repia.com
lastupdate : 2021-04-02

AJAX Introduction

AJAX는 웹 페이지가 로딩된 후 웹 서버에서 데이터를 읽을 수 있습니다.
페이지를 리로딩하지 않고 웹 페이지를 업데이트할 수 있습니다.
백그라운드에서 웹 서버로 데이터를 보낼 수 있습니다.

AJAX Example

<!DOCTYPE html>
<html>
<body>
 
<div id="demo">
  <h2>Let AJAX change this text</h2>
  <button type="button" onclick="loadDoc()">Change Content</button>
</div>
 
</body>

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();
}

What is AJAX?

AJAX = Asynchronous JavaScript And XML.

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

AJAX는 다음 조합을 사용합니다.

브라우저 내장 XMLHttpRequest 오브젝트 (웹 서버에 데이터 요청)
JavaScript 및 HTML DOM (데이터 표시 또는 사용)

AJAX는 잘못된 이름입니다. AJAX 애플리케이션은 XML을 사용하여 데이터를 전송할 수 있지만,
데이터를 일반 텍스트^{plain text} 또는 JSON 텍스트로 전송하는 것도 동일합니다.

AJAX를 사용하면 백그라운드에서 웹 서버와 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트 할 수 있습니다.
이는 전체 페이지를 리로딩하지 않고도, 웹 페이지의 일부를 업데이트 할 수 있음을 의미합니다.

How AJAX Works

1. 웹 페이지에서 이벤트가 발생합니다(페이지 로딩, 버튼 클릭)

2. XMLHttpRequest 오브젝트가 JavaScript에 의해 생성됩니다.

3. XMLHttpRequest 오브젝트는 웹 서버에게 요청을 보냅니다.

4. 서버는 요청을 처리합니다.

5. 서버가 웹 페이지에게 response를 보냅니다.

6. JavaScript는 Respnose를 읽습니다.

7. JavaScript는 적절한 작업 (예, 페이지 업데이트)를 수행합니다.

오션,, Javascript, AJAX