Ajax에 대해서(jQuery를 이용한 플리커 API 처리)

Aug 5, 2013

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>
See Also