본문 바로가기

Javascript

Javascript AJAX

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