AJAX
- 페이지 로드 후 웹서버에서 데이터를 읽음
- 페이지를 다시 로드하지 않고 웹페이지 업데이트가 가능
- 뒷단에 있는 웹서버로 데이터 전송
AJAX Example
원하는 정보를 로드 할 수 있는 버튼을 생성한다
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
ajax_info.txt 파일에서 원하는 정보를 가져와 페이지에 보여줄 수 있도록 로드한다
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란 Asynchronous JavaScript And XML.의 약자이다.
프로래밍 언어가 아니며 웹서버에서 데이터를 요청하기 위한 XMLHttpRequest object 와, 데이터 사용이나 디스플레이를 위한 JavaScript나 HTML DOM의 결합이라고 볼 수 있다.
1. 웹 페이지에서 이벤트 발생
2. XMLHttpRequest object 가 자바스크립트로 생성
3. XMLHttpRequest object 가 웹서버로 요청을 전송
4. 서버가 요청을 처리
5. 서버가 웹페이지로 response back
6. response가 자바스크립트로 읽힌다
7. 자바스크립트로 action
The XMLHttpRequest Object
'Javascript' 카테고리의 다른 글
Javascript Browser BOM (0) | 2020.07.29 |
---|---|
Javascript Form & HTML DOM (0) | 2020.07.28 |
Javascript (0) | 2020.07.27 |