Web(HTML,CSS,Script)
Ajax 크로스 도메인(Cross Domain) 호출 문제 해결법 (Using JQuery)
천일몽
2013. 11. 25. 09:37
본 소스가 왜 필요하고 어떻게 구현되는지는 소스 보면 쉽게 이해가 가실것으로 판단하여 설명은 달지 않겠습니다.
호출 페이지(HTML)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
loadData();
});
function loadData()
{
try
{
$.ajax({
url: "http://[테스트 도메인]/json_test.php"
, crossdomain: true
, dataType: "jsonp"
, jsonp: "callback"
, jsonpCallback: "jsonpCallback"
, type: 'GET'
, data: post
, contentType: "application/json; charset=utf-8"
, error: function (jqXHR, textStatus, errorThrown)
{
alert("Error : " + textStatus + " / " + errorThrown);
}
, success: function (msg, textStatus, jqXHR)
{
// Callback함수 이용 추천
$("#txtResult").text(JSON.stringify(msg));
}
});
} catch (e) {
alert("Error!!");
}
}
function jsonpCallback(msg)
{
//var data = eval(msg);
alert(msg["callback"] + " / " + JSON.stringify(msg));
}
</script>
</head>
<body>
<div id="txtResult" name="txtResult">
Result Text String
</div>
</body>
</html>
피호출 페이지(PHP / json_test.php)
<?php
header("content-type: application/json");
$callback = $_GET["callback"];
$json_data = array();
$json_data["get"] = $_GET;
$json_data["data"]["a"] = "A";
$json_data["data"]["b"] = "B";
$json_data["data"]["c"] = "C";
$json_data["data"]["d"] = "D";
$json_data["data"]["e"] = "E";
echo $callback . "(". json_encode($json_data) . ")";
?>결과
{"get":{"callback":"jsonpCallback","_":"1385021410367"},"data":{"a":"A","b":"B","c":"C","d":"D","e":"E"}}
주의사항
JSON.stringify 함수는 IE8 부터 지원되며, 브라우져 버전이 IE8이더라도 문서 모드가 “Internet Explorer 8 표준”이상에서만 정상 작동하며, “Internet Explorer 8 호환모드”또는 Internet Explorer 7” 이하에서는 작동되지 않습니다.
크롬 등에서는 정상 작동합니다. 문제는 “Internet Explorer” ^^;;
- JSON.stringify 관련 참고 MSDN : http://msdn.microsoft.com/ko-kr/library/ie/cc836459(v=vs.94).aspx
- 지원되지 않는 “Internet Explorer”에 대한 해결 방법
- 참고 주소 : http://javascript.crockford.com/jsmin.html
-
다운로드 : json2.js
JQuery Ajax API Document : http://api.jquery.com/jQuery.Ajax/