Ostatnie wpisy na blogu

Cross domain AJAX, czyli zapytania AJAX na inną domenę

22 października 2014/4 komentarze/w Java Script / jQuery /Autor Łukasz Socha

Co to jest AJAX chyba nie muszę mówić. Aktualnie są wykorzystywany na wielu stronach. Czasem jest potrzeba pobrania danych z zewnętrznej domeny i tu możesz natrafić na drobny problem…

Typowe zapytanie AJAX może wyglądać tak:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JSONP</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<script>
    loadPosts();
    function loadPosts() {
        $.ajax({
            url: 'http://blog.racymind.pl/?json=get_recent_posts&count=3',
            data: 'GET',
            dataType: 'json',
            timeout: 3000,
            isLocal: false,
            success: function (data) {
                console.log(data);
            },
            error: function (errorThrown) {
                console.log(errorThrown);
            }
        });
    }
</script>
</body>
</html>

Gdy wgram plik w domenie blog.racymind.pl jest wszystko w porządku, ale gdy wgram go na lukasz-socha.pl wyskoczy błąd:

Na szczęście można to łatwo obejść. Wystarczy wykorzystać zamiast formatu JSON format JSONP:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JSONP</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<script>
    loadPosts();
    function loadPosts() {
        $.ajax({
            url: 'http://blog.racymind.pl/?json=get_recent_posts&count=3',
            data: 'GET',
            dataType: 'jsonp',
            timeout: 3000,
            isLocal: false,
            success: function (data) {
                console.log(data);
            },
            error: function (errorThrown) {
                console.log(errorThrown);
            }
        });
    }
</script>
</body>
</html>

Na powiedzenie jeszcze zrzut ekranu:

Print Friendly, PDF & Email