Ajax w jQuery
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&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ć:
Wrzesień 7th, 2011 - 17:13
jquery to na pewno ogromne uproszczenie jeśli chodzi o js oraz ajax, dobry art, polecamy wykorzystanie jquery
Luty 28th, 2012 - 20:46
Dzięki Ci za art ;] tyle szukałem i szukałem… i czytałem i czytałem i dzięki Tobie dopiero zrozumiałem