AJAX 소개
AJAX는 다음을 할 수 있기 때문에 개발자의 꿈입니다.
- 웹 서버에서 데이터 읽기 - 페이지가 로드된 후
- 페이지를 새로고침하지 않고 웹페이지 업데이트
- 웹 서버에 데이터 보내기 - 백그라운드에서
AJAX 예제
Let AJAX change this text
AJAX 예제 설명
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>
</html>
HTML 페이지에는 <div> 섹션과 <button>이 있습니다.
<div> 섹션은 서버의 정보를 표시하는 데 사용됩니다.
<버튼>은 기능을 호출합니다(클릭된 경우).
이 함수는 웹 서버에서 데이터를 요청하고 표시합니다.
함수 loadDoc()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
AJAX란 무엇입니까?
AJAX = 동기 JavaScript A 및 X ML .
AJAX는 프로그래밍 언어가 아닙니다.
AJAX는 다음 조합을 사용합니다.
- 브라우저 내장
XMLHttpRequest객체(웹 서버에서 데이터를 요청하기 위해) - JavaScript 및 HTML DOM(데이터 표시 또는 사용)
AJAX는 오해의 소지가 있는 이름입니다. AJAX 애플리케이션은 XML을 사용하여 데이터를 전송할 수 있지만 데이터를 일반 텍스트 또는 JSON 텍스트로 전송하는 것도 마찬가지로 일반적입니다.
AJAX를 사용하면 배후에서 웹 서버와 데이터를 교환하여 웹 페이지를 비동기식으로 업데이트할 수 있습니다. 즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있습니다.
AJAX 작동 방식
- 1. 웹페이지에서 이벤트 발생(페이지 로딩, 버튼 클릭)
- 2. XMLHttpRequest 객체는 JavaScript에 의해 생성됩니다.
- 3. XMLHttpRequest 객체는 웹 서버에 요청을 보냅니다.
- 4. 서버가 요청을 처리합니다.
- 5. 서버는 웹 페이지에 응답을 다시 보냅니다.
- 6. 응답은 JavaScript에서 읽습니다.
- 7. 페이지 업데이트와 같은 적절한 조치는 JavaScript에 의해 수행됩니다.
최신 브라우저(Fetch API)
최신 브라우저는 XMLHttpRequest 객체 대신 Fetch API를 사용할 수 있습니다.
Fetch API 인터페이스를 사용하면 웹 브라우저가 웹 서버에 HTTP 요청을 할 수 있습니다.
XMLHttpRequest 개체를 사용하면 Fetch가 더 간단한 방법으로 동일한 작업을 수행할 수 있습니다.