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

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

 

Javascript

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다