관리 메뉴

千日夢의 Tistory

Ajax 크로스 도메인(Cross Domain) 호출 문제 해결법 (Using JQuery) 본문

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” ^^;;
 

참고 : http://www.fbloggs.com/2010/07/09/how-to-access-cross-domain-data-with-ajax-using-jsonp-jquery-and-php/

JQuery Ajax API Document : http://api.jquery.com/jQuery.Ajax/

 

0 Comments
댓글쓰기 폼