[jsonp] jsonp 적용 방법, jsonp 예제
다른 도메인 주소로부터 json 데이터를 받기 위한 방법 중의 하나.
js 단에서 다른 도메인의 url 을 ajax로 호출하고 그 결과 데이터인 json 데이터를 콜백함수의 첫번째 인자(아규먼트)로 전달받는 방식이다.
이쪽만 작업하면 되는 일이 아니고 대상이 되는 다른 도메인에서 jsonp 형태로 API를 제공해야 한다.
■ 일반적인 json 데이터의 아웃풋 내용 예시
|
{‘key1′:’value1’, ‘key2′:’value1’, ‘key3′:’value1’}
|
■ jsonp 를 적용한 json 데이터의 아웃풋 내용 예시
|
jQuery22406444848349974217_1634705610458({‘key1′:’value1’, ‘key2′:’value1’, ‘key3′:’value1’})
|
■ jsonp_test.jsp
원래는 다른 도메인에서 제공하는 API 페이지라고 생각하면 된다.
테스트를 위해 WAS는 localhost 포트 8080 으로 띄웠음.
|
<%@page language=“java”%><%@
page contentType=“text/html; charset=UTF-8”%><%
response.setContentType(“text/html; charset=UTF-8”);
boolean useJsonp = false;
String callback = request.getParameter(“callback”);
if (callback != null && callback.length() > 0) {
useJsonp = true;
}
String result = “{‘key1′:’value1’, ‘key2′:’value1’, ‘key3′:’value1’}”;
if (useJsonp) {
result = callback + “(“ + result + “)”;
}
// 만약 callback 파라미터가 “jQuery22406444848349974217_1634705610458” 인 경우
// 아웃풋 내용은 jQuery22406444848349974217_1634705610458({‘key1′:’value1’, ‘key2′:’value1’, ‘key3′:’value1’}) 이다.
// 즉 json을 첫번째 인자(아규먼트)로 삼는 jQuery22406444848349974217_1634705610458 함수를 실행하는 효과가 있다.
out.print(result);
%>
|
■ test1.html
WAS나 웹서버 거치지 않고 크롬 브라우저로 바로 실행하면 됨.
페이지 로드하자 마자 ajax를 통해 jsonp_test.jsp 페이지를 호출.
|
<!DOCTYPE html>
<html lang=“ko”>
<meta charset=“UTF-8” />
<script src=“https://code.jquery.com/jquery-2.2.4.min.js“></script>
<script type=“text/javascript”>
window.onload = function() {
$.ajax({
url : “http://localhost:8080/jsonp_test.jsp“,
dataType : “jsonp”,
jsonp : “callback”,
success : function(_data) {
var keyArr = Object.keys(_data);
if (keyArr != null && keyArr.length > 0) {
var oneKey = “”;
var keyCount = keyArr.length;
for (var i=0; i<keyCount; i++) {
oneKey = keyArr[i];
if (oneKey == null || oneKey == “”) {
continue;
}
$(“#div_result”).append(oneKey + ” : “ + _data[oneKey] + “<br>”);
}
}
}
});
}
</script>
<body>
<div id=“div_result”>
</div>
</body>
</html>
|
■ ajax 호출 내용
아래 스크린샷은 test1.html 의 js 온로드 단에서 http://localhost:8080/jsonp_test.jsp 주소를 대상으로 ajax 호출한 내용을 피들러에서 확인한 결과임.
“callback” 이라는 파라미터 값으로 “jQuery22406444848349974217_1634705610458” 문자열이 넘어감.
■ test1.html 의 실행결과
ajax 콜백함수 첫번째 인자(아규먼트)로 json 객체를 넘겨받게 됨.
정상 데이터인지 확인하기 위해 json 객체를 텍스트 형태로 만들어서 div 영역에 출력했음.
참고사이트 : https://stove99.tistory.com/10