[AJAX] JS - AJAX (아작스) 소개

목차

1. AJAX 기능
2. AJAX 정의
3. AJAX 예제 - txt 파일 불러오기
4. AJAX 작동원리 (= 작동순서)
5. AJAX 장단점
6. jQuery AJAX

 

AJAX 기능

 

1. 페이지 로드 완료 후 웹서버로부터 데이터 읽을 수 있음.
2. 페이지 새로고침 없이, 웹페이지의 일부분 업데이트 가능.
3. 백그라운드에서 웹서버로 데이터를 보낼 수 있음.

 

 

AJAX 정의

 

1. AJAX (Asynchronous JavaScript And XML) : 비동기식 JS 및 XML
2. 별도의 프로그램 언어가 아님.
3. AJAX는 아래 조합을 이용해 작동

① 브라우저 내장 XMLHttpRequest 객체 (웹 서버에서 데이터를 요청)

② JavaScript 및 HTML DOM (데이터 표시 또는 사용)

AJAX는 오해의 소지가있는 이름임. 왜냐면,
AJAX 응용 프로그램은 XML을 사용하여 데이터를 전송할 수 있지만
일반 텍스트 또는 JSON 텍스트로 데이터를 전송하는 것은 똑같이 일반적이기 때문임.

※참고 : 

• XML(Extensible Markup Language) 
• https://ko.wikipedia.org/wiki/XML
• https://namu.wiki/w/XML

 

 

AJAX 예제 - txt 파일 불러오기

b.php 파일 내용

 

<div id="hz">

<button type="button" onclick="homzzang()">Change Content</button>

</div>

<script>

function homzzang() {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      document.getElementById("hz").innerHTML =

      this.responseText;

    }

  };

  xhttp.open("GET", "a.txt", true);

  xhttp.send();

}

</script>

---

a.txt 파일 내용

 

<h2>홈짱닷컴</h2>

<p id="domain">Homzzang.com</p>

 

※ readyState == 4 :  통신 종료 (= 통신 완료)

※ status == 200 : 통신 성공

 

AJAX 작동원리 (= 작동순서)

 

1. 브라우저 화면 (= 웹 페이지)에서 이벤트가 발생 (예: 페이지 로드, 버튼 클릭 등)

2. XMLHttpRequest 객체는 JS에 의해서 생성.

3. XMLHttpRequest 객체는 웹 서버에 요청을 보냄.

4. 서버가 요청을 처리.

5. 서버가 브라우저 화면 (= 웹 페이지)에 응답을 보냄.

6. JS가 응답을 읽음.

7. JS가 적절한 조치 (예 : 페이지 업데이트)를 수행함.

 

 

AJAX 장단점

Ajax 장점

 

1. 웹페이지 속도향상

2. 서버처리 완료될 때까지 안 기다리고도 처리 가능.

3. 서버에서 Data만 전송하면 되므로 전체 코딩 양 줌.

4. 다양한 UI 가능. (예: 페이지 리로드 없이 수정 가능.)

 

---

Ajax 단점

 

1. 히스토리 관리 안 됨. (보안에 좀 더 신경써야 함.)

2. 연속으로 데이터 요청 시 서버 부하 초래 가능.

3. 사용자가 진행상황 몰라 처리 중 이탈 가능 존재. 

 

 

jQuery AJAX

JS AJAX보다 더 짧은 코드로, 크로스브라우징 가능. 더  자세히 보기

 

※ PHP AJAX

 

아작스 예제 모음

https://www.w3schools.com/js/js_ajax_examples.asp

 

 

 

 

PS. AJAX 관련 좌표

 

• 엘리 님 (11. 비동기 처리의 시작 - 콜백함수 이해) - https://youtu.be/s1vpVCrT8f4
• 모질라 (콜백함수) 강의 - https://developer.mozilla.org/en-US/docs/Glossary/Callback_function
• 위키백과 (콜백함수) 개념  - https://en.wikipedia.org/wiki/Callback_(computer_programming
• JS (콜백함수) 강의 - https://javascript.info/callbacks (영어 버전), https://ko.javascript.info/callbacks (한국어 버전)