Artykuł

google google
maj 20 2010
0

Ajax, XML i JSON w jQuery

Jakiś czas, we wpisie poświęconym wprowadzeniu do jQuery, przedstawiłem w jaki sposób można za pomocą tego bardzo przyjaznego frameworka JavaScript operować na strukturze strony. Dziś chciałbym rozszerzyć te informacje przede wszystkim o obsługę żądań typu Ajax. Nauczymy się przy okazji w jaki sposób można odczytać zwrócony za pomocą żądania obiekt XML lub obiekt JSON.

Jedną z bardzo przydatnych funkcjonalności jQuery jest wbudowana obsługa asynchronicznych żądań HTTP nazywanych popularnie Ajax. Aby skorzystać z Ajaxa w jQuery wystarczy wypełnić następującą konstrukcję:

$.ajax({ 
// instrukcje
});

Niestety sam taki zapis na nie wiele się zda... Ale zaraz dowiemy się co tym zrobić aby stworzyć coś pożytecznego.

Podstawowe opcje

Zajmiemy się teraz opisem podstawowych opcji, jakie możemy ustawić dla każdego żądania Ajax. Opcje zapisujemy w sposób następujący:

$.ajax({ 
	opcja1: 'wartosc1',
	opcja2: 'wartosc2'
});

Każda z opcji składa się z klucza będącego odpowiednim słowem kluczowym jQuery oraz wartości zdefiniowanej przez nas, lub będącej jedną z góry narzuconych możliwości (wszystko zależy od wybranej opcji). Np. wartość url zawsze ustawiamy samemu, ale już opcja type przyjmuje jedną z dwóch z góry ustalonych wartości czyli albo POST albo GET.

async

Opcja domyślnie ustawiona na true. W takiej sytuacji wszystkie żądania wysyłane są asynchronicznie (tzn. przeglądarka nie jest blokowana w czasie wysyłania żądania). Aby uniemożliwić użytkownikowi interakcję ze stroną w tym czasie, możemy wartość zmienić na false, może to jednak grozić nie stabilnością. Zdecydowanie lepiej jest po prostu wyłączyć określone elementy strony za pomocą skryptu. Lub skorzystać np. z wtyczki BlockUI.

cache

Opcja ta umożliwia włączenie cachowania dla żądań Ajax. Jest ona domyślnie ustawiona na true (wyjątek stanowią typy danych: script oraz jsonp). Z własnej praktyki ustawiam ją raczej na false. Wartość true powodowała u mnie problemy z niektórymi stronami.

contentType

Opcja pozwala na ustalenie typu danych wysyłanych do strony na serwerze. Domyślna wartość ContentType to application/x-www-form-urlencoded. Więcej różnych typów danych, możemy znaleźć tutaj.

data

Jest to obiekt łub łańcuch tekstowy zawierający dane przesyłane do serwera. Jeśli korzystamy z łańcucha tekstowego, możemy w tym przypadku skorzystać również z konstrukcji klucz-wartość np.

$.ajax({ 
	data: {cmd: 'main', id: 1}
});

dataType

Typ danych zwracanych przez stronę serwera. Domyślnie jQuery stara się odgadnąć typ danych, możemy mu jednak pomóc ustawiając tą opcję na jedną z wartości:

  • xml
  • json
  • script
  • html

timeout

Jeśli chcemy ustalić kiedy skrypt ma zwrócić błąd związany z przekroczeniem czasu odpowiedzi, to musimy skorzystać właśnie z tej opcji. Jej wartości należy podać w milisekundach.

type

O opcji type napisałem już wyżej i dla przypomnienia ustala ona typ żądania. Czyli albo POST, albo GET. Domyślną wartością, jest ta druga.

url

Określa adres strony, z którą ma się połączyć nasz skrypt. Może to być zasób lokalny np. index.php, czy default.aspx, ale może być to również strona w odrębnej lokalizacji.

Funkcje zwrotne

Poznaliśmy już ramową strukturę żądania Ajax i najważniejsze opcje. Jesteśmy w tej chwili wysłać nawet sensowne rzeczy do naszej strony na serwerze. Jednak pojawia się problem, wyślemy coś, serwer odpowie zgodnie z naszym poleceniem, ale my nie będziemy wiedzieć co z tym zrobić. I tu pojawiają się funkcje zwrotne (z ang. callback functions), które będą w stanie rozprawić się z nadaną przez serwer odpowiedzią.

complete(XMLHttpRequest, textStatus)

Funkcja ta jest wywoływana po zakończeniu żądania, kiedy to funkcje success i error zostały już wykonane. Zasadniczo jeśli zaimplementujemy tamte dwie funkcje, to nie jest ona konieczna. Chyba, że chcemy żeby określone czynności były wykonywane niezależnie od funkcji sukcesu czy błędu. Wewnątrz funkcji możemy skorzystać z obiektu XMLHttpRequest oraz z tekstu statusu.

$.ajax({ 
	complete(XMLHttpRequest, textStatus) {
		// polecenia
	}
});

error(XMLHttpRequest, textStatus, errorThrown)

Funkcja wywoływana kiedy w komunikacji pomiędzy skryptem, a serwerem pojawi się błąd. Może ona zaistnieć np. w sytuacji kiedy mamy stronę otwartą przez jakiś czas, a w tym momencie serwer padnie. Skrypt w takim przypadku nie będzie wstanie wysłać i odebrać danych i wywoła funkcję błędu error. Funkcja ta, przyjmuje trzy parametry. Dwa pierwsze znane są już z funkcji complete, a trzeci stanowi obiekt zawierający dane rzuconego wyjątku.

$.ajax({ 
	error(XMLHttpRequest, textStatus, errorThrown) {
		// polecenia
	}
});

success(data, textStatus, XMLHttpRequest)

Funkcja ta jest wywoływana w sytuacji kiedy nasze zapytanie odniesie sukces i zwrócone zostaną dane (widoczny tutaj nowy parametr data). Dane będą mieć postać określoną za pomocą opcji dataType. W najprostszym przypadku, będzie to zwykły string. Jednak jeśli zechcemy inaczej, to nie ma problemu, żeby w tym miejscu pojawił się obiekt zawierajacy XML, czy łańcuch JSON.

$.ajax({ 
	success(data, textStatus, XMLHttpRequest) {
		// polecenia
	}
});

Odbiór różnych formatów danych

Script

Mamy następujący kod:

$.ajax({
    url: 'index.php',
    cache: false,
    data: {cmd: 'getdata'},
    success: function(sData, sTextStatus, oXMLHttpRequest){
        alert(sData);
    },
	error: function(oXMLHttpRequest, sTextStatus, oErrorThrown) {
		// polecenia
	}  
});

Żądanie to jest bardzo proste. Wysyłamy komendę getdata do pliku index.php za pomocą żądania GET (jak pamiętamy jest ono domyślnie). Zwrócony typ danych będzie można odczytać jako string (domyślny typ dla opcji dataType to script). Dlatego wynik tego działania możemy np. wyświetlić na ekran za pomocą funkcji alert. W przykładzie została również umieszczona funkcja błędu - dla porządku. Wyłączone zostało również cachowanie wyników.

JSON

JSON jest prostym i lekkim formatem wymiany danych (obejrzyj przykłady) i co ważne jest bardzo dobrze wspierany przez jQuery.

W przypadku łańcuchów JSON warto zwrócić uwagę na następujące elementy:

  • Cały łańcuch JSON powinien być objęty nawiasami klamrowymi
  • Łańcuch JSON składa się z par kluczy i wartości oddzielonych dwukropkiem
  • Wartość może być tablicą, stringiem, ewentualnie liczbą
  • Elementy tablicy umieszczamy w nawiasach kwadratowych, stringi w cudzysłowach, liczby bez
  • Wartość kluczowa powinna być stringiem pisanym bez odstępów i polskich znaków

Aby teraz przetestować nowy format danych, zbudujmy string JSON następującej postaci:

{"errorcode": 0, "errordesc": "opis_bledu", "articlescount": 5}

Pierwszy parametr, obrazuje kod błędu będacy wartością numeryczną. 0 oznacza sukces, wszystkie inne wartości to błąd. Parametr errordesc zawiera opis błędu (jeśli taki wystąpił). Trzeci parametr, to liczba artykułów. Warto zawsze wysyłać JSONa w takiej samej postaci aby uniknąć potencjalnych problemów. Stringi i tablice zawszę mogą być puste, a liczby równe 0.

Teraz możemy już przygotować kod jQuery, który będzie odbierał naszego JSONa:

$.ajax({
    url: 'index.php',
    cache: false,
    data: {cmd: 'getarticlescount'},
    dataType: 'json',
    success: function(oJsonObject, sTextStatus, oXMLHttpRequest){
        if(0 != oJsonObject.errorcode){
			alert(oJsonObject.errordesc);
		} else {
			alert(oJsonObject.articlescount);
		}
    },
	error: function(oXMLHttpRequest, sTextStatus, oErrorThrown) {
		// polecenia
	}  
});

Zwrócony string JSONa do skryptu JavaScript staje się automatycznie obiektem. Dostęp do kolejnych kluczy, uzyskujemy za pomocą kropki. Na początku widoczne jest ważne sprawdzenie, czy kod błędu jest różny od 0 (0 oznacza sukces). Jeśli jest on różny od zera, to musimy wyświetlić komunikat błędu, zwrócony przez serwer. W przeciwnym przypadku, możemy wyświetlić cel naszego zapytania, czyli liczbę artykułów.

XML

XML jest jednym z popularniejszych środków do wymiany danych. Jest on szczególnie przydatny do przechowywania danych uporządkowanych w hierarchicznej strukturze drzewiastej, ale tak naprawdę można go wykorzystywać na dziesiątki różnych sposobów - wszystko w rękach programistów:)

Załóżmy zatem, że mamy taki prosty XML, przechowujący dane na temat artykułów:

<?xml version="1.0" encoding="utf-8"?>
<root>
	<errorcode>0</errorcode>
	<errordesc></errordesc>
	<articles>
		<article>
			<articleid>1</articleid>
			<articletitle>Tytuł 1</articletitle>
		</article>
		<article>
			<articleid>2</articleid>
			<articletitle>Tytuł 2</articletitle>
		</article>
	</articles>
</root>

Mamy też odpowiedni kod JavaScript, który pobierze ten XML z serwera:

$.ajax({
    url: 'index.php',
    cache: false,
    data: {cmd: 'getarticlesdata'},
    dataType: 'xml',
    success: function(oXmlObject, sTextStatus, oXMLHttpRequest){
        if(0 != parseInt($(oXmlObject).find('errorcode').text())){
			alert($(oXmlObject).find('errordesc').text());
		} else {
			var sString = 'Lista artykułów: ';
			$(oXmlObject).find('article').each(function(){
				sString += '<br />id: ' + $(this).find('articleid').text() + 
					' tytuł: ' + $(this).find('articletitle').text();
			});
			alert(sString);
		}
    },
	error: function(oXMLHttpRequest, sTextStatus, oErrorThrown) {
		// polecenia
	}  
});

Narodził nam się bardzo ładny kod. Nasz XML który powraca, staje się podobnie jak JSON obiektem i możemy z niego wydobywać elementy w podobny jak sposób jak na zwykłej stronie. Wygodnie jest jednak korzystać z przedstawionej funkcji find do odnajdywania elementu, a następnie z funkcji text do sczytania jego wartości. Na początku sprawdzamy kod błędu. Ale ponieważ jest to XML i wszystkie wartości nie jako są stringami, powinniśmy wartość kodu błędu sparsować do inta. Jeśli jest błąd to wyświetlamy opis błędu.

W przeciwnym przypadku, wylistujemy dane wszystkich artykułów. Możemy to zrobić za pomocą funkcji each. Wewnątrz funkcji each, która notabene działa jak normalny ludzki foreach, za pomocą this, możemy się dostać do aktualnej gałęzi (noda). W naszym przypadku do aktualnego artykułu. Tym sposobem, możemy pobrać w znany już nam sposób id takiego artykułu oraz jego tytuł (linie 12-13). Sklejamy piękny string i na końcu wyświetlamy alertem piękne podsumowanie.

Tekst powstał w oparciu o dokumentację jak i własną praktykę.

Data ostatniej modyfikacji: 24.10.2016, 10:51.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus