Ajax란 비동기적(Asynchronous)인 웹 어플리케이션을 제작하기위한 웹개발기법으로, 클라이언트 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다.
Asynchronous JavaScript and XML 의 줄임말인데, 요즘은 XML을 사용하지 않고 거의 대부분 json을 사용합니다.
Ajaj 라고 이름을 바꿔야 할까요?
사용자 입장에서는 비동기통신이 화면갱신도 없고 요청과 응답 사이 시간에도 다른 일을 할 수 있어 편리하고 빠른듯한 환경(착각)을 느낄 수 있습니다. 다만 동일출처 정책으로 인해 다른 도메인과 통신이 불가하며 (서버단에서 설정하거나, 브라우저 설정을 변경해 가능) 요청 남발시 서버에 부하가 늘 수 있고, 동적화면구성으로 개발자의 구현이 복잡하다는 단점 등이 있습니다.
기본구조
기본 뼈대는 다음과 같습니다.
type 에서 GET 과 POST 방식을 선택할 수 있고, 성공 시 콜백을 통해 데이터를 처리할 수 있습니다.
$.ajax({ type:"GET", url:"......url", success: function(data) { .... } }); | cs |
예제
예제를 위해 더미데이터를 사용하겠습니다.
mockaroo 라는 곳에서 테스트용 더미데이터를 생성할 수 있습니다.
저는 간단하게 id, name, city 세 개의 키를 두고 500개의 데이터를 생성했습니다.
귀찮으시면 아래 파일을 사용하셔도 됩니다.
MOCK_DATA.jsonurl에 우리가 가지고 있는 json 파일을 넣어 테스트에 성공했습니다.
버튼을 눌러보시면 페이지가 넘어가지 않고 데이터를 받아오는 것을 확인할 수 있으실 겁니다.
오픈API
그럼 이제 오픈 API를 사용해 봅시다.
사용할 데이터는 영화진흥위원회 오픈 API 홈페이지의 박스오피스 데이터입니다.
접속해서 OPEN API - 제공 서비스를 클릭하면 다음과 같은 화면을 볼 수 있고
데이터가 어떻게 이루어졌는지 확인할 수 있습니다.
이 값들을 화면 맨 아래에 있는 링크를 클릭하여 예시를 볼 수 있습니다.
응답 예시에 xml과 json이 있는데, 우리는 역시 json 으로 가져올 예정입니다. 아래 링크를 클릭하면
이렇게 요청한 데이터를 JSON 형식으로 받을 수 있습니다.
다만 미션임파서블:고스트프로토콜로 보아 한참 전의 데이터임을 알 수 있겠네요.
주소창의 쿼리스트링 끝부분에 보면
targetDT 라는 파라미터에 날짜를 넣음을 알 수 있어 이 날짜를 최근으로 바꿔보겠습니다.
날짜를 바꿔 넣으니 현재 상영중인 영화인 토르:라그나로크가 현재 박스오피스 1위로 잘 나오는 것을 확인할 수 있습니다.
보기 힘든 Json 구조를 파싱하여 보기좋게 구조화 시켜줍니다.
우리가 받은 데이터는 3중의 중첩구조임을 알 수 있습니다.
이제 이 박스오피스 데이터를 가져와 보겠습니다.
예제에 쓰였던 코드의 url에 MOCK_DATA.json 대신 우리가 요청했던 url
아래에서 확인해보실 수 있습니다.
위 링크에 접속하실 때 F12 개발자모드를 켜고 Network 탭 클릭 - Preserve log에 체크 - All 을 선택한후 F5를 눌러 새롭게 요청하면
요청한 내역을 볼 수 있는데,
Response Headers 부분에 Content-type을 보면 application/json 이라고 되어있는 것을 확인하실 수 있습니다.
이제 반복문으로 직접 key값을 이용해 영화순위와 제목을 출력해 봅시다.
아까 포맷팅했던 구조를 참고하면 보기 편할 것 같습니다.
result가 결과값 전체를 가지고 있습니다.
result['boxOfficeResult'] 로 value를 빼내면 아래 {"boxofficeType":"주말 박스오피스" ... } 가 나옵니다.
여기서 다시 result['boxOfficeResult'] 안에서 "weeklyBoxOfficeList" key 값을 이용해 value 값으로 들어가야 비로소
빼내고자 하는 영화 개별의 정보들이 등장합니다.
반복문을 통해 순위와 영화 제목만 빼낸 결과입니다.
이제 Ajax를 마음껏 활용해 봅시다!
