소개

앱에서 외부 서버의 데이터를 취하고 싶은 경우의 JSONP편.

JSONP란?

일반적으로 다른 도메인에 대해 Ajax 통신을 시도하면 화가납니다.
이것을 크로스 도메인 제약이라고 한다.

XMLHttpRequest cannot load http://exampleexample.com/. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://example.com/' is therefore not allowed access.

그래도 외부 서버의 데이터를 가져오는 것이 필수적이므로,

http://example.com/jsonp_project/JsonpServlet?callback=displayCustomer

위와 같은 URL로 액세스했을 때,callback 매개 변수의 값을 서버 측에서 받고,

displayCustomer([{"age":16,"name":"テスト太郎"}])

같은 자바 스크립트 함수를 호출하는 형식으로 서버 측에서 JSON 데이터를 반환합니다.displayCustomer 가 클라이언트 측에서 호출하려는 JavaScript의 함수 이름입니다.
이 함수명은 임의로 하고, callback 파라미터로서 설정하면 된다.
받은 데이터

<script>
  displayCustomer([{"age":16,"name":"テスト太郎"}])
</script>

느낌으로 화면 측에 추가하고, 클라이언트 측에서 정의하고 있는 JavaScript의 함수(이 경우 displayCustomer)를 실행하는 것으로, 외부의 데이터를 취득한 후의 처리를 실행한다고 하는 것이 JSONP.

script 태그가 외부의 소스를 읽어들이는 것을 이용하고 있다.

절차

서버측에서 JSON 형식으로 데이터를 반환하도록 한다.
이번에는 서블릿에서 적당하게 만든 데이터를 JSON으로 반환하도록 구현.
실제로 데이터베이스에서 데이터를 검색하고

서블릿

@WebServlet(name = "JsonpServlet", urlPatterns = {"/JsonpServlet"})
public class JsonpServlet extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");

        // URLからcallbackパラメーターに設定されている値を取得
        String callback = request.getParameter("callback");

        Customer[] customers = {
            new Customer("テスト太郎", 16)
        };

        // JSONにエンコード
        String jsonText = JSON.encode(customers);

        String responseData = "";
        if(callback == null || "".equals(callback)){
            responseData = jsonText;
        }else{
            // ここで関数名(JSON)の形式でレスポンスを返すように設定
            responseData = callback + "(" + jsonText + ")";
        }

        response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        out.print(responseData);
    }
}

화면에는 버튼이 있고, 그것을 누르면 JS의 함수를 실행할 뿐.

html

<ons-page>
    <ons-toolbar>
        <div class="center">AjaxJSON</div>
    </ons-toolbar>

    <div style="text-align: center">
        <br>
        <ons-button onclick="addScript()">
            JSONP
        </ons-button>

        <div id="ajax"></div>
    </div>
</ons-page>

callback 파라미터에 클라이언트측에서 호출하고 싶은 JS 함수의 이름을 지정.

js

// ボタンが押された時にデータを受け取ってscriptタグとして画面に追加
function addScript(){
    var script = document.createElement('script');
    script.src = 'http://example.com/jsonp_project/JsonpServlet?callback=displayCustomer';
    document.body.appendChild(script);
}

// 上記で「関数名(JSON)」の形式でスクリプトが追加され、これが呼ばれる
function displayCustomer(data){
    for(i = 0; i < data.length; i++){
        $("#ajax").append("<div>" + data[i].name + "</div>");
    }
}

실행 결과

버튼을 누르면 버튼 아래에 취득한 데이터가 표시됩니다.

요약

기상 정보 API 과 같은 JSONP를 제공하고 있는 곳이 있으므로, 그러한 곳의 API를 이용하거나, 서버측에서 좋은 느낌으로 돌려주도록 하면 좋다고 생각했습니다.