AJAX 기능
1. 페이지 로드 완료 후 웹서버로부터 데이터 읽을 수 있음.2. 페이지 새로고침 없이, 웹페이지의 일부분 업데이트 가능. 3. 백그라운드에서 웹서버로 데이터를 보낼 수 있음.
AJAX 정의
1. AJAX (A synchronous J avaScript A nd X ML) : 비동기식 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
VIDEO
VIDEO
VIDEO
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 (한국어 버전)
주소 복사
랜덤 이동