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() {
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_info.txt" 파일은 간단한 텍스트 파일이며 다음과 같습니다.
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
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에 의해 수행됩니다.