[jQuery] AJAX 사용법

AJAX

Asyncronous Javascript And Xml

비동기 자바스크립트 방법

 

AJAX engine을 통해서 client가 request를 보내면 data가 수신된다.

Round-Trip 방식의 Web에서는 웹페이지에 변화가 있을 때 강제로 갱신되어

무조건 처음부터 끝까지 문서를 다시 렌더링하는 것과 달리

AJAX통신을 이용하면 왔다갔다하는 데이터가 적고, 웹페이지가 갱신되지 않아 훨씬 효율적이다.

 

영화진흥위원회가 제공하는 open API를 이용해서 AJAX를 jQuery로 호출하려고 한다.

먼저 open API란 다음과 같다.

API는 응용프로그램이나 서비스를 개발하는데 필요한 운영체제(OS)나 라이브러리 등의 특정 기능을 추상화하여 사용하기 쉽도록 만든 인터페이스로 Single UNIX Specification, Windows API 등을 말합니다.

Open API는 Web 2.0 API, 통신망 서비스 API 등 주로 인터넷이나 통신망과 관련된 자원의 API를 의미하는 것으로, 여러 사람들이 공동으로 사용할 필요가 있는 자원에 대하여 이 자원의 사용을 개방하고, 사용자들이 자원에 대한 전문적인 지식이 없어도 쉽게 사용할 수 있도록 기능을 추상화하여 표준화한 인터페이스를 말합니다.

출처 경기데이터드림(https://data.gg.go.kr/portal/intro/develop/searchBulletinPage.do)

 

영화진흥위원회 오픈API 서비스에 들어가서 일별 박스오피스 서비스를 이용했다.

영화진흥위원회 오픈API

일별 박스오피스 서비스를 들어가면 사용방법에 대한 안내가 있다.

먼저 기본 url과 요청 parameter값이 필요하다.

기본 요청 url은 xml을 이용할지 json을 이용할지에 따라서 마지막 확장자만 달라지고 사이트의 내용을 그대로 사용하면 된다.

json을 이용하기 때문에 사용할 기본 url은 다음과 같다.

http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json

 

그리고 요청파라미터 중 key값과 targetDt가 필수로 요구된다.

요청 파라미터를 작성하는 방식은 기본 url뒤에 ?를 붙이고 '변수=값' 형태로 작성한다.

여러 변수를 이어서 작성할때는 &기호를 이용한다.

 

키값은 보안의 문제로 이 사이트의에 회원가입 후 로그인을 해야지만 발급받을 수 있다.

 

로그인 후 키 발급/관리에 들어가서

키 발급받기를 누르면 다음의 창이 나온다

각자의 사용목적에 맞게 작성하고 약관에 동의하면 발급받을 수 있다.

 

그러면 받을 키값을 복사해와서 파라미터를 작성할 수 있다.

일별박스오피스는 집계가 완료된 하루 전의 날짜까지 조회할 수 있다.

2022년 1월 1일의 박스오피스를 조회하려면 키값을 포함한 요청 파라미터는 다음과 같다.

?key=abc본인의키값abc&targetDt=20220101

 

앞의 기본url에 요청 parameter를 합치면 url이 완성된다!

브라우저에 url을 입력하면 정보를 받을 수 있다.

크롬을 사용한다면 크롬 웹스토어에서 formatter라는 플러그인프로그램을 설치하면 정보를 보기 좋게 표시할 수 있다.

이 프로그램을 설치하면 

이렇게 정렬된 데이터를 볼 수 있다.

 

이제 Open API정보를 받아오는 것에 성공했으니 jQuery에서 호출할 차례이다.

jQuery에서 AJAX를 이용하려면 ajax()메소드를 이용한다.

$.ajax({
        async : true,
        url : 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json',
        data :{
            key : 'abc키값키값키값abc',
            targetDt : 20220101,
        },
        method : 'GET',

        timeout : 3000,
        dataType : "json",

        success : function (result){
            alert('성공')
            console.log(result)
        },
        error : function (){
            alert('실패')
        }
   })

• async : 요청이 동기인지 비동기인지 여부를 나타낸다. 기본값은 true로, true이면 비동기로 동작하게 된다.
• url : 요청을 보내는 url을 지정한다.
• data : 서버로 보내는 정보를 적는다. 요청 parameter를 javascript 객체형태로 적어준다.
• method : 호출 방식을 뜻한다. 사이트에서 GET방식을 이용하라고 했기때문에 GET을 적어준다.
• time : 응답을 기다릴 시간을 지정한다. 단위는 천분의 일초이 ms(밀리세컨드)이고, 지정한 시간이 지나도 response가 오지 않으면 호출이 실패했다고 간주한다.
• dataType : 서버에서 받는 정보의 데이터 타입을 입력한다. json으로 받기 때문에 json을 적어주었다
  json 문자열은 javascript에서 처리하기 힘드므로 javascript객체로 변화해서 받기 위함이다.

이외에도 다른 속성이 있다.

jQuery ajax() Method

 

 

마지막에 success : function(result) {}와

error : function() {}이 있다.

success는 호출에 성공하면 result로 결과를 전달하고 function안의 동작을 하게 되고,

호출에 실패하면 error 뒤 function이 작동하게 된다.