Korzystając z tej witryny, wyrażasz zgodę na Politykę prywatności.
Akceptuję
Magazyn T3Magazyn T3Magazyn T3
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Czytasz: Poznajemy Ajax
Podziel się
Powiadomienie Pokaż więcej
Aa
Magazyn T3Magazyn T3
Aa
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Szukaj
  • Newsy
  • Testy
  • Gaming
  • Moto
  • Kultura
  • Publikacje
  • Magazyn
  • Kontakt i współpraca
Zaobserwuj
  • Advertise
© 2007-2023
Magazyn T3 > Wszystkie > Internet Maker > Poznajemy Ajax
Internet Maker

Poznajemy Ajax

Micha Kornacki
Micha Kornacki Opublikowany 14/09/2011
Podziel się
7 minut(y) czytania

Strony dynamicznie wymieniające dane z serwerem od kilku lat zdobywają coraz większą popularność. Przyjrzyjmy się jak działają teraz i co będą potrafiły po wejściu HTML-a 5.

W miejscach, w których chcemy wymienić krótkie informacje między serwerem a przeglądarką, przeładowywanie całej witryny nie ma sensu. Niestety HTML4 i XHTML nie pozwalają na dodanie komentarza bezpośrednio do bazy danych albo pobranie krótkiej listy z serwera on borrow 1000 dollars. Od dłuższego czasu często stosuje się do tego AJAX.

Czym jest AJAX?

Aby wymienić część danych potrzebnych jest kilka elementów. Strona, napisana w zwykłym HTML-u, posłuży za interfejs. Znajdą się na niej pola formularzy i miejsca, w których zostaną zwrócone wyniki. Plik XML na serwerze będzie działał jak prosta baza danych. Warto tu zauważyć, że może on być dynamicznie generowany przez dowolny skrypt lub program. Dane zostaną przekazane za pomocą obiektu XMLHttpRequest (XHR), który mimo że nie wchodzi w skład żadnej specyfikacji zatwierdzonej przez W3C to jest obsługiwany przez nowoczesne przeglądarki. W3C pracuje jednak nad jego standaryzacją i przedstawiła już szkice specyfikacji. Do połączenia tych wszystkich składników wykorzystamy JavaScript.

Gdzie tu popularny AJAX? Mogłoby się wydawać, że nigdzie, gdyż AJAX (Asynchronous JavaScript and XML) nie jest żadną konkretną technologią taką jak JavaScript, PHP czy HTML. To zbiór istniejących wcześniej rozwiązań umożliwiających interakcję użytkownika z serwerem bez przeładowywania strony. Nie jest nawet konieczne stosowanie znajdujących się w skrócie JavaScriptu (można go zastąpić np. VBScriptem) i XML-a (zamiast niego często stosowany jest JSON). My jednak przyjrzymy się działaniu AJAX-u z wykorzystaniem technologii zgodnych z jego nazwą.

- Reklama -

Skrypt od podstaw

W przykładzie wykonamy samodzielnie, zupełnie od podstaw, standardowy element kojarzony z AJAX-em: dynamiczne podpowiedzi do wpisywanego w formularz tekstu. Po wpisaniu każdego kolejnego znaku w pole formularza uruchomi się skrypt, który pobierze listę znanych imion i wyświetli propozycje pod formularzem.

Po stronie serwera działa zwykle skrypt w PHP, {link_wew 3423}Pythonie{/link_wew} lub innym języku, który generuje dane wysyłane jako XML, zapisuje otrzymane informacje w bazie danych lub przetwarza je w inny sposób. My wykorzystamy statyczny plik XML zawierający zestaw imion, z którego będziemy pobierać informacje.

- Reklama -

Uwaga! Dołączony przykład zawiera szereg złych rozwiązań ? skrypty wczytywane są przed główną treścią, w kodzie HTML został umieszczony aktywator funkcji, nie ma żadnej obsługi błędów, a dane są pobierane po każdym wciśnięciu klawisza. To rozwiązanie ma charakter demonstracyjny i ma obrazować zasadę działania. Przed praktycznym zastosowaniem należy zoptymalizować skrypt. Alternatywnie można skorzystać z jednego z frameworków, które mają wbudowaną obsługę AJAX-u (np. $.ajax() w jQuery).

Jak połączyć stronę z serwerem?

Do wymiany danych należy wykorzystać obiekt XMLHttpRequest. Niezależnie od stosowanego języka posiada on kilka metod, z których wykorzystamy open i send oraz pole responseXML, w którym znajdzie się odpowiedź serwera (patrz załączony plik).

Pierwsze co musimy zrobić, to określenie w jaki sposób komunikujemy się z serwerem (metody GET, POST, HEAD, PUT, DELETE), pod jakim adresem znajdzie się odpowiedź (adres statycznego pliku lub skryptu, który zwróci w odpowiedzi poprawny dokument XML) oraz typ transmisji (synchroniczna/asynchroniczna). W przypadku transmisji asynchronicznej skrypt będzie wykonywał się nadal bez oczekiwania na odpowiedź. My nie chcemy tego, gdyż potrzebne są nam zwrócone dane.

Po wykonaniu metody send serwer zwróci odpowiedź. Jako argument możemy podać łańcuch znaków, który ma być do niego przekazany. W przypadku statycznego pliku nie ma to jednak sensu, gdyż dopiero skrypt po stronie serwera byłby w stanie go zinterpretować.

Kto ma to policzyć?

Odpowiedź w formie dokumentu XML trafia do pola responseXML obiektu XMLHttpRequest. W tym miejscu możemy już swobodnie na nim operować po stronie przeglądarki klienta, co odciąża serwer. W przykładowym skrypcie sprawdzamy czy któreś z pobranych imion zaczyna się tak jak wpisany w pole formularza ciąg znaków. Pasujące imiona są dopisywane do wyniku, a na końcu wyświetlane.

Alternatywny sposób do przedstawionego polegałby na przesłaniu skryptowi na serwerze wpisanego początku imienia (jako argument metody send). Serwer sprawdziłby w bazie danych znane imiona, wygenerował dokument XML i przesłał go do użytkownika. To wszystko wymaga obliczeń po stronie serwera, które przy wielu użytkownikach lub dużej komplikacji zadań mogą być czasochłonne. Jest to jeden z powodów dla których warto przenieść obliczenia na komputer użytkownika, który zwykle posiada dużo niewykorzystanych zasobów. Z drugiej strony, jeśli łączymy się np. z telefonu, to skomplikowane obliczenia mogą być przeniesione na serwer. Taki podział prac sprawdza się, jeśli wąskim gardłem nie jest sama transmisja danych, ale ich obróbka.

Wysyłanie danych

W podobny sposób moglibyśmy wysłać dane na serwer, na przykład podczas dodawania komentarza. Również w tym przypadku określamy metodę, adres i pozostałe opcje żądania za pomocą metody open. Następnie korzystając z metody send przekazujemy ciąg znaków, który zostanie zinterpretowany przez serwer. W przypadku żadąń HTTP do określenia nagłówka służy metoda setRequestHeader. Należy zwrócić uwagę, że nie da się w ten sposób utworzyć statycznego pliku na serwerze ? zawsze niezbędny jest skrypt lub program działający po jego stronie.

Z powodów bezpieczeństwa niemożliwe jest również komunikowanie się skryptów między kilkoma serwerami. Oznacza to, że strona i pobierany plik muszą znajdować się w tej samej domenie (lub, tak jak w naszym przykładzie, na jednym komputerze).

Co dalej?

W standardzie HTML5 jeszcze więcej obliczeń będzie można wykonywać po stronie klienta. Dzięki API nazwanemu Web SQL Database utworzymy bazę danych (metoda window.openDatabase) bez angażowania do pracy serwera i wykorzystując jedynie zasoby komputera użytkownika wykonamy transakcje znane z SQL-a (metody transaction i executeSql). Oczywiście możliwe będzie również przeglądanie tabel zwróconych jako wyniki zapytań (SQLResultSet, SQLResultRowList).

Taka baza będzie mogła być lokalną kopią na której działać będzie użytkownik bez angażowania serwera, co do tej pory było niemożliwe bez tworzenia rozbudowanych interpreterów, a w związku z tym nie było stosowane. Niestety, mimo że obecne przeglądarki potrafią już obsłużyć HTML5, to wciąż nie został on ustandaryzowany, więc zachowanie API może się jeszcze zmienić i nie wszędzie będzie działać tak samo.

Może cię także zainteresować

Pozycjonowanie strony internetowej a reklamy w Internecie – czym się różnią?

Jak szybko i łatwo stworzyć stronę mobilną

Strona na WordPressie? Grunt to dobry hosting

Jak zabezpieczyć swoje zdjęcia w chmurze

Jak usunąć historię swojej aktywności z Facebooka?

TAGI: AJAX
Micha Kornacki 19/12/2022 14/09/2011
Podziel się tym artykułem
Facebook Twitter Whatsapp Whatsapp LinkedIn Reddit Telegram Email Skopiuj link Drukuj
Podziel się
Autor: Micha Kornacki
Get a $500 loan with bad or no credit
Poprzedni artykuł TEST: Nitrotek Sword
Następny artykuł Microsoft pokazał Windows 8

Ostatnie newsy

Akcesoria Belkin do iPhone 15, Apple Watch Series 9 i AirPods Pro
Newsy 22/09/2023
Resident Evil 4 – dodatek Separate Ways już dostępny
Gaming Newsy 22/09/2023
Nextbase z ofertą dla rodziców i nie tylko
Moto Newsy 21/09/2023
TEKKEN 8 – weź udział w zamkniętej becie
Gaming Newsy 20/09/2023

Reklama

//

Stylowy, rzetelny, inteligentny – Magazyn T3. Jesteśmy wiodącym magazynem lifestyle’owym, dostępnym co miesiąc w druku i cały czas dla Was online, skupionym na nowych technologiach.

NASZE SERWISY

DOM, OGRÓD I WNĘTRZA BudujemyDom.pl | WybieramyDom.pl | CoZaIle.pl | Informator Budownictwa | ZielonyOgródek.pl | CzasNaWnetrze.pl | Ekobudowanie.pl

 

MUZYKA I DŹWIĘK Audio.com.pl | MagazynGitarzysta.pl | MagazynPerkusista.pl | EstradaiStudio.pl | LiveSound.pl

 

ELEKTRONIKA I AUTOMATYKA ElektronikaB2B.pl | AutomatykaB2B.pl | Elektronika Praktyczna | Elportal.pl | Świat Radio
FOTOGRAFIA, EDUKACJA I HI-TECH DigitalCameraPolska.pl | Fotopolis.pl | MagazynT3.pl | MlodyTechnik.pl
ZDROWIE I RODZINA KtoCieWyleczy.pl

Magazyn T3Magazyn T3
Zaobserwuj
© 2007-2023
Witaj z powrotem!

Zaloguj się

Zapomniałeś hasła?