AJAX란?
대화식 웹 애플리케이션 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.
Asynchronous Javascript and XML - 비동기적인 자바스크립트와 XML
- 표현정보를 위한 HTML과 CSS
- 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
- 웹서버와 비동기적으로 데이터 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest
AJAX의 장단점
장점
- 페이지 이동이 없이 빠른 속도로 화면 전환할 수 있다.
- 서버 처리를 기다리지 않고 비동기 요청이 가능하다.
- 수신하는 데이터양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수 있다.
단점
- Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
- 지원하는 문자 세트가 한정되어 있다.
- 디버깅이 용이하지 않다.
웹 브라우저
Ajax 지원
- MS IE5 이상 - 오페라 8.0 이상
- 오페라 모바일 8.0 이상 - 구글 크롬
Ajax 미지원
- 오페라 7 이하
- MS IE 4.0 이하
- 텍스트 기반 브라우저 lynx, w3m
- 시각장애인을 위한 브라우저
- 1997년 이전 브라우저
활용사례
- 검색어 자동완성
- 회원가입 폼에서의 아이디 중복 체크
- 페이스북이나 구글의 알림 서비스(숫자)
크로스 도메인 문제
기본적으로 Ajax 요청은 도메인이 같은 호스트로만 요청이 가능하고, 도메인이 다른 호스트에 요청하게 되면 콘텐츠를 받아올 수 없다. 예를 들어 aaa.com이라는 호스트에서 http://bbb.com/rss.xml 을 AJAX 요청해서 받아 올 수는 없다. 이를 해결할 수 있는 4가지 방법이 있다.
- 프락시 방식
- 호출되는 호스트에서 허용하는 헤더를 넣는 방식
- script 태그를 동적으로 생성하는 방식
플리커 API 활용 예제
HTML
<div id="result" style="width:800px;height:60px;overflow-y:auto;border:1px solid #000000;padding:10px;margin:0 auto;margin-bottom:10px;"></div>
<div style="display:none;width:800px;height:20px;margin:0 auto;" id="loading">Loading.</div>
<ul id="list"></ul>
Javascript
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
// 타이머
var timer = null;
// 로딩 시작 처리
function startLoading() {
$("#loading").show();
timer = setInterval(function() {
$("#loading").append(".");
},100);
}
// 로딩 끝 처리
function stopLoading() {
$("#loading").hide();
clearInterval(timer);
timer = null;
}
// 로딩 시작하기
startLoading();
// Ajax 불러오기
$.ajax({
url: "http://api.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=d7cf8651384b2e99038ecf497b440421&format=json&nojsoncallback=1&auth_token=72157627258910199-5bc337cbd1122195&api_sig=9de8ad17087c2026f670fb26478c48bb",
type: "get",
dataType: "json", // 리턴받을 데이터의 타입 - text, xml 등...
data: { // 파라미터
},
success: function(data) { // 성공했을 때의 처리 콜백함수
$("#result").append("success<br />");
$(data.photos.photo).each(function() {
// 박스 만들기
var html = "<div style='float:left;margin:0 10px 10px 0;'><img src='http://farm"+this.farm+".static.flickr.com/"+this.server+"/"+this.id+"_"+this.secret+"_s.jpg' /></div>";
$("#list").append(html);
// 박스에 클릭이벤트 정의
$("#list").children(":last-child").click(function() {
// 페이드 아웃 효과 후 삭제
$(this).fadeOut(function() {
$(this).remove();
});
});
});
},
complete: function() { // ajax 전송이 완료 됐을 때의 콜백함수
stopLoading();
$("#result").append("complete<br />");
},
error: function() { // 에러가 발생했을 때의 콜백함수
$("#result").append("error<br />");
}
});
</script>