nie jestem pewna ..., czy dobrze rozumiem AJAX Opcje

[jolam]

Nie jestem pewna czy dobrze rozumiem co to jest AJAX. Powiedzmy, że mam na stronie tabelkę z kilkoma kolumnami. I chciałabym zmienić jej uporządkowanie bez ponownego wczytania strony. To mogłabym wstawić takie udawane odnośniki przy pomocy onclick i po kliknięciu nastąpiłoby takie odczytanie innej strony w tle (a ta strona miałaby już odpowiednie sortowanie kolumn w tabeli) i dalej przy pomocy jQuery mogłabym podmienić całą tabelę na to co odczyta się z tej strony wywołanej w tle. Czy to o to chodzi, że można po prostu podmieniać elementy strony bez jej ponownego wczytania? Tylko trzeba mieć przygotowane na innych stronach te treści do wczytania albo lepiej generować je według adresu w skrypcie php. Czy tylko o to chodzi?

pozdrawiam Jola

[vokiel]

Generalnie tak, AJAX to jest asynchroniczne wywoływanie przy pomocy JavaScript (i XML wg nazwy). Co prawda samo sortowanie po kolumnach (jeśli nie ma stronicowania) można wygodniej zrobić w samym JavaScript, ale jeśli masz dużo więcej danych i nie chcesz ich pobierać na raz to ajax będzie dobrym rozwiązaniem.

Jeśli już korzystasz z jQuery to zrezygnuj z onClick, to tak na marginesie.

Przygotowujesz sobie skrypt, po stronie serwera, który na podstawie podanych parametrów przygotuje porcję danych do wpisania w tabelkę. Następnie skrypt w jQuery, po stronie przeglądarki, po kliknięciu w wybraną kolumnę wyśle zapytanie ajax do serwera, pobierze dane i wpisze je do tabeli, nadpisując już te istniejące. Minimalne parametry to wybrana kolumna i kierunek sortowania, dodatkowo, jeśli masz stronicowanie to nr strony i ilość rekordów na stronie. Na podstawie tych parametrów skrypt po stronie serwera pobiera tylko tą część danych, która zostanie wyświetlona, pakuje to np do JSON'a (na początku może być gotowy html). Skrypt po stronie przeglądarki pobrane dane parsuje i wpisuje do tabeli.

[bajt]

Jeśli tabelka nie jest ogromna i nie chcesz zmieniać zapytań do bazy możesz skorzystać z jquery.tablesorter.pager.js oraz jquery.tablesorter.js
Przykłady na stronie: http://tablesorter.com/docs/

[jolam]

vokiel a mógłbyś mi napisać jak użyć JSON? Myślałam, że ta tabela którą odbiorę poprzez AJAX to ma być kompletna ze znacznikami HTML? Czy może lepiej pobierać poszczególne komórki tabeli. Ale co dalej? W jQuery mam dodawać znaczniki HTML? Jak jest lepiej? Chyba wydajniejsze jest rozwiązanie pobierania całej tabeli, czy nie? Już nic nie rozumiem.


pozdrawiam najserdeczniej Jola

[vokiel]

Wybór opcji zależy od Ciebie, każda ma swoje plusy i minusy.

Pobieranie gotowego HTML'a powoduje, że musisz pobrać większą ilość danych, ale dzięki temu możesz odebrane dane po prostu wstawić przez funkcję html(). Rozwiązanie to daje więcej pracy skryptowi na serwerze, przez co przy dużym obciążeniu strony może to zacząć być nieefektywne (oczywiście pozostaje wtedy cache, ale to inny temat). Jeśli nie zależy Ci na niwelowaniu obciążenia serwera i/lub ilości transferu, to prawdopodobnie będzie szybciej i łatwiej serwować gotowy html.

Natomiast zwracanie danych w postaci JSON powoduje, że serwer ma mniej pracy, mniej transferu jest zużywane, a w związku z tym ładowanie danych powinno odbywać się szybciej. Jako, że generowanie html'a w przeglądarce nie jest bardzo obciążające, zatem ten sposób, raczej, będzie szybszy.

Użycie JSON'a po stronie serwera sprowadza się w zasadzie do wykorzystania (w przypadku PHP funkcji json_encode ). Wywołanie zapytania ajax w jQuery możesz zrobić dopisując parametr dataTypeString: 'json', lub użyć funkcji .getJSON(). Pobrane w ten sposób dane łatwo się przetwarza (są przykłady w dokumentacji funkcji ajax).