Blog webdeveloperski Patryk yarpo Jar

Ajax w jQuery

Autor wiadomości Marzec 7, 2011

Ajax sam w sobie może być trochę kłopotliwy. Choćby fakt specjalnych hacków dla IE6. Może warto zatem wykorzystać jQuery do obsługi Ajaksa?

Postaram się pokazać równoważne przykłady z tymi w artykule o "gołym" obiekcie XMLHttpRequest.

Najprostszy działający kod

Kod PHP (działający po stronie serwera), w pliku 'ajax.php':

<?php echo 'Witaj świecie'; ?>

Kod strony ze skryptem:

<html>
<head>
    <title>Przykład Ajax</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
    function ajaxTest()
    {
        $.ajax({
            url    : 'ajax.php',
            success: function(data) {
                alert(data);
            }
        });
    }
    </script>
</head>
<body><div onclick="ajaxTest()">Kliknij mnie</div></body>
</html>

Chyba trochę przyjemniej prawda :). Domyślnie request wysyłany jest metodą GET,  asynchronicznie. Aby wysłać żądanie synchronicznie, należy dodać flagę:

function ajaxTest()
{
    var result =  $.ajax({
        url   : 'ajax.php',
        async : false // synchronicznie
    }).responseText;
    alert(result);
}

Powyższy kod zwróci taki sam wynik jak poprzedni. Jedyną różnicą będzie sposób wykonania żądania. Pamiętaj, aby używać żądań synchronicznych tylko kiedy jest to naprawdę potrzebne. Najczęściej nie jest.

Dziwne kody?

Jak widzisz, używając frameworków operujesz na wyższym poziomie abstrakcji. Nie ma już 200 i 4. Teraz po prostu przypisujesz odpowiednią funkcję jako callback dla `success'. Chyba przyjaźniejsze, prawda?

Możliwe scenariusze:

  • success - gdy wszystko pójdzie dobrze
  • error - gdy pojawi się błąd
  • complete - wywoływana po error/success

więcej przeczytasz w dokumentacji jQuery.

Przesyłanie danych na serwer

W tym wypadku znowu mamy bardzo przyjemną warstwę abstrakcji. Niezależnie od tego, czy używamy GET czy POST zmienne przekazujemy zawsze tak samo:

function ajaxTest()
{
    $.ajax({
        url : 'ajax.php',
        data: 'n=2&amp;k=3',
        type: 'POST',
        success: function(data) {
            alert(data);
        }
    });
}

Podobnie jak w analogicznym  przypadku dla obiektu XMLHttpRequest zmieniamy kod PHP.

<?php echo 'Wynik: ' . (intval($_POST['n']) + intval($_POST['k'])); ?>

Przekazanie obiektu jako danych

jQuery pozwala na ułatwienie sobie życia i zamiast przekazywania nieczytelnego i podatnego na błędy ciągu znaków, można podać odpowiedni obiekt:

function ajaxTest()
{
    $.ajax({
        url : 'ajax.php',
        data: {n : 2, k : 3},
        type: 'POST',
        success: function(data) {
            alert(data);
        }
    });
}

Czy tylko mi taka wersja podoba się bardziej? 😉

Warto poczytać:

Komentarze (4) Trackbacks (0)
  1. jquery to na pewno ogromne uproszczenie jeśli chodzi o js oraz ajax, dobry art, polecamy wykorzystanie jquery

  2. Dzięki Ci za art ;] tyle szukałem i szukałem… i czytałem i czytałem i dzięki Tobie dopiero zrozumiałem 😉

  3. jquery ma bardzo duże możliwości, co dzień poznaje jakieś nowe tricki, jednak jednego nie rozumiem. Jak zrobić by to co dostanę w odpowiedzi po wykonaniu pliku wskazanego w $ajax url:…. w odpowiedzi success : function (output) { wstawić wartości pól jakie sprawdziłem w wywołanym pliku… }

    W przypadku jednego pola – nie ma problemu, odpowiedź success wstawiam do pola, jednak jesli chcę wstawić wartości do kilku pól to pojawia się już problem 🙁
    Mozna to jakoś obejść ?

  4. Przekazuj wynik jako JSON, albo XML

    Wtedy możesz operować na polach. Zamiast
    $(‘#jakisDiv’).html(output);

    robiłbyś:
    $(‘#jakisDiv_1’).html(output.pole1);
    $(‘#jakisDiv_2’).html(output.pole2);

    O JSON-ie lub XML-u możesz przeczytać tu:
    http://www.yarpo.pl/2011/03/06/json-jako-format-wymiany-danych/
    http://www.yarpo.pl/2011/06/05/xml-format-wymiany-danych-w-ajaksie/


Leave a comment

 

Brak trackbacków.