post_ico1

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

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:

AJAX bez JSONP

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:

AJAX z JSONP

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...
  • Guest

    Mmm, taki haczyk :)

  • Mmm, taki myk :)

  • Lolek

    Nieco trudniej jest z metoda POST ;-)

    • Hmm, z POSTem chyba nie sprawdzałem. Możesz rozwinąć? :)