• 회원가입
  • 로그인
  • 구글아이디로 로그인

[AJAX] JS - 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보다 더 짧은 코드로, 크로스브라우징 가능.

JQ AJAX 자세히 보기

 

PHP AJAX

 

아작스 예제 모음

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

 

 

 

 

PS.

 

엘리 님 (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 (한국어 버전)

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
DOM JS - CSS - 스타일변경
DOM JS - Animation - 애니메이션 (= 동적효과 = 움직임효과)
DOM JS - Events - 이벤트 2
DOM JS - addEventListener() 메서드 ★★★★★ - 이벤트 걸기 (= addEventListen…
DOM JS - Navigation - 노드탐색 (= 요소탐색) ※ 텍스트노드복사
DOM JS - Node - 노드추가, 노드삭제, 노드변경 (= 노드생성, 노드제거, 노드교체)
DOM JS - Collection - HTML요소집합 (= HTML요소묶음)
BOM JS - Window BOM - 윈도우 브라우저객체모델 (BOM: Browser Object Model)
BOM JS - Window Screen 객체 - 화면객체 (= 스크린객체 = screen객체)
BOM JS - Window Location 객체 - 위치객체 (= 로케이션객체 = Location객체) ※ loc…
BOM JS - Window History 객체 - 이력객체 (= 히스토리객체 = History객체 = 뒤로가기 +…
BOM JS - Window Navigator 객체 - 브라우저객체 (= 네이게이터객체 = Navigator객체 =…
BOM JS - Popup Boxes - 팝업상자 (= 팝업박스 = Alert Box + Confirm box + …
BOM JS - Timing Events ★ - 시간간격 코드실행 (= 타이밍 이벤트 = 시간이벤트 = 일정시간별 …
BOM JS - Cookie (쿠키) 사용법 ★★★ - 쿠키 (설정・생성) / 쿠키 (읽기・얻기・가져오기) / 쿠…
AJAX JS - AJAX (아작스) 소개
AJAX JS - AJAX - XMLHttpRequest() 메서드 ★ - 객체생성 (= 아작스/에이잭스 핵심 = X…
AJAX JS - AJAX - open()/send() 메서드 ★ - 서버에 요청 보내기 (GET방식 vs POST방…
AJAX JS - AJAX - Server Response (서버응답) - 콜백함수 사용 예제
AJAX JS - AJAX - XML 아작스 예제 (= xml 데이터 불러와 표만들기)
4/67
목록
찾아주셔서 감사합니다. Since 2012