JOSNP example

CrossDomain Ajax 호출 #1 : jQuery JSONP ajax 호출 이용.

http://stove99.tistory.com/10

개발도구: STS 3.3.0.RELEASE 

다음 project 파일을 import 한다.

jsonp_example.zip

호출 URL : http://localhost:8080/web/client_with_jsonp.html

client_with_jsonp.html 에서는 127.0.0.1:8080 에 접속해서 json 데이터를 가져온다.

중요한 점은 jsonp 를 이용해서 다른 서버의 json 데이터를 가져올때는 json 데이터를 가져오는 서버에서

json 데이터를 그냥 반환하는게 아니라 

callback({json 데이터}) 이렇게 반환해줘야 한다는 점이다.

callback 함수명은 jsonp 데이터를 호출할때 파라미터로 호출해주는 이름이다. ($.getJSON  을 이용한다면)

$.getJSON("http://127.0.0.1:8080/web/server/jsonp.jsp?callback=?", data, function(d){

                    $.each(d, function(k, v){

                        $("#getjson").append("<div>" + k + " : " + v + "</div>");

                    });

                    $("#getjson").show();

                });

$.ajax 를 이용한다면 jsonp 속성값으로 넘겨주는 문자열이다.

$.ajax({

                    url : "http://127.0.0.1:8080/web/server/jsonp.jsp",

                    dataType : "jsonp",

                    data : data,

                    jsonp : "callback",

                    success : function(d){

                        $.each(d, function(k, v){

                            $("#ajax").append("<div>" + k + " : " + v + "</div>");

                        });

                        $("#ajax").show();

                    }

                });

인터넷에서 검색해보니 jsonp 방식은 ajax 를 호출하는 xhr 방식이 아니고, GET 방식으로 다른 서버에 요청해서 값을 받아오는 방식이라서 form 을 submit 할 수 없어서, 던지는 파라미터의 크기에 제한을 받는다.