문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

======JavaScript AJAX Intro======
<WRAP left notice 80%>
  * description : JavaScript AJAX Introduction
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-02
</WRAP>
<WRAP clear></WRAP>
\\
=====AJAX Introduction=====
  * AJAX는 웹 페이지가 로딩된 후 웹 서버에서 데이터를 읽을 수 있습니다.
  * 페이지를  리로딩하지 않고 웹 페이지를 업데이트할 수 있습니다.
  * 백그라운드에서 웹 서버로 데이터를 보낼 수 있습니다.
\\
====AJAX Example====
<code html>
<!DOCTYPE html>
<html>
<body>

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

</body>
</code>
\\
%%HTML%% 페이지에는 %%<div>%% 섹션과 %%<button>%%이 있습니다.\\
\\
%%<div>%% 섹션은 서버의 정보를 표시하는 데 사용됩니다.\\
\\
%%<button>%%은 함수를 호출합니다 (클릭 한 경우).\\
\\
이 함수는 웹 서버에 데이터를 요청하고, 이를 표시합니다.\\
\\
====Function loadDoc()====
<code javascript>
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();
}
</code>
\\
====What is AJAX?====
AJAX = **A**synchronous **J**avaScript **A**nd **X**ML.\\
\\
AJAX는 프로그래밍 언어가 아닙니다.\\
\\
AJAX는 다음 조합을 사용합니다.\\
\\
  * 브라우저 내장 ''%%XMLHttpRequest%%'' 오브젝트 (웹 서버에 데이터 요청)
  * %%JavaScript%% 및 %%HTML DOM%% (데이터 표시 또는 사용)
\\
AJAX는 잘못된 이름입니다. AJAX 애플리케이션은 XML을 사용하여 데이터를 전송할 수 있지만,\\ 
데이터를 __일반 텍스트__<sup>plain text</sup> 또는 JSON 텍스트로 전송하는 것도 동일합니다.\\

AJAX를 사용하면 백그라운드에서 웹 서버와 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트 할 수 있습니다.\\
이는 전체 페이지를 리로딩하지 않고도, 웹 페이지의 일부를 업데이트 할 수 있음을 의미합니다.\\
\\
=====How AJAX Works=====
{{:wiki:javascript:javascript_note:howajaxworks.png?600|}}\\
\\
| 1. 웹 페이지에서 이벤트가 발생합니다(페이지 로딩, 버튼 클릭)        |
| 2. XMLHttpRequest 오브젝트가 JavaScript에 의해 생성됩니다.        |
| 3. XMLHttpRequest 오브젝트는 웹 서버에게 요청을 보냅니다.          |
| 4. 서버는 요청을 처리합니다.                                      |
| 5. 서버가 웹 페이지에게 response를 보냅니다.                      |
| 6. JavaScript는 Respnose를 읽습니다.                             |
| 7. JavaScript는 적절한 작업 (예, 페이지 업데이트)를 수행합니다.    |







{{tag>오션, Javascript AJAX}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구