MTD blog

Jquery to bardzo rozbudowana bilbioteka javascriptowa, która daje nam szerokie możliwości manipulowania dokumentami html a także jest świetnym frameworkiem ajaxowym o czym będzie mowa w niniejszym artykule.

Opisywanie samego API nie ma raczej głębszego sensu, więc postaram się skupić na możliwościach ajaxa w jquery.
API udostępnia mam kilka metod dzięki którym możemy wywołać żadanie ajaxa są to load(), get(), getJSON(), getSCRIPT(), post(), i ajax().

Ja zajme się tą najbardziej rozbudowaną czyli jQuery.ajax().

Najprostsze wywołanie metody ajax() wygląda mniej więcej tak…

1
2
3
4
5
6
7
8
9
10
11
12

 
$(document).ready(function(){
//--ready function start--
    $.ajax({
               type: "POST",
               url: "data.php",
               success: function(html){
                                $("#info").html(html);         
                            }
             });
//--end ready function--
});

…za pomocą metody post pobieramy dane ze skryptu data.php i umieszczamy je
w elemencie o id=”info”. W parametrze success mamy funkcję, która zwraca nasze dane.

Metoda ajax ma jeszcze kilka przydatnych parametrów, które pomoga nam dostosować ją do swoich potrzeb.

Warto w każdym żądaniu dopisać parametr
error:, który jest funkcją, gdzie możemy dodać informację o wystąpieniu będu

Poza tym możemy dadać jeszcze parametry:

beforeSend, który jest także funkcją służącą do modyfikowania zapytania przed wysłaniem. Możemy w niej wstawić np. własne nagłówki, można też użyć jej do zmodyfikowania naszej stronki wyświetlając np. napis “Loading” lub animowanego gifa, zawartość zostanie wyświetlona zanim zostanie wykonane żądanie, a po wykonaniu żądania powinna zniknąć.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 
$(document).ready(function(){
//--ready function start--
   $.ajax({
               type: 	"POST",
               url: 	"data.php",
               beforeSend: function(html){
                                $("#info").html("Loading...");         
                            },
               success: function(html){
                                $("#info").html(html);         
                            },
               error:	function(html){
                                $("#info").html("Wystąpił bład");         
                            },
               complete:   function(html){
                                alert("Żądanie zostało zakończone");
                            }
             });
//--end ready function--
});

…ponadto jeszcze jeden parametr który może się nam przydać to complete. Jest to funkcja, która zostanie wywołana po zakończeniu żądania bez względu na to czy zakończyło się ono sukcesem czy wystąpił błąd.

Metoda jQuery.ajax() posiada jeszcze więcej parametrów, które pomogą nam dostosować nasze żądanie.

data: - przesyła dane do serwera, dzięki czemu możemy zmodyfikować dane wysyłane przez skrypt php np. “param1=1&param2=2″,

timeout: - ustawia czas, po którym żadanie jest kończone jeśli ustawiony czas został przekroczony zostaje uruchomiona funkcja error,

dataType - ustawia typ zwracanych danych np. dataType: “script”,

async: - ustawiając na false otrzymujemy żądanie synchroniczne, możemy to wykorzystać do deponowania zwróconych danych w zmiennych w taki oto sposób.

1
2
3
4
5

 
var html = $.ajax({
                         url: "some.php",
                         async: false
                   }).responseText;

To najbardziej moim zdaniem przydatne parametry jakie przyjmuje metoda jQuery.ajax()
pozostałe można znaleźć w dokumentacji

Osoby nie znające jQuery zachęcam do zapoznania się ta biblioteką nie tylko ze względu na ajaxa, ale także JUI (Jquery User Interface), który cały czasz się rozwija i ma coraz większe możliwości.

Powiązane wpisy:

• Autocompleter w Jquery
• Auto uzupełnianie tekstu
• Export do CSV
• Szyfrowanie danych
• Wyszukiwarka z Zend_Search

admin Js ajax, ajax jquery, jquery