목차
- AJAX 기능
- AJAX 정의
- AJAX 예제 - txt 파일 불러오기
- AJAX 작동원리 (= 작동순서)
- AJAX 장단점
- 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 관련 좌표
