Rozwiązania 5 powszechnych problemów Ajax

Współczesny twórca stron internetowych, który nie myśli o Ajaksie podczas planowania lub budowania swoich stron internetowych, potencjalnie nie posiada skutecznego narzędzia zwiększającego użyteczność.

Istnieją jednak wyzwania w implementacji funkcjonalności Ajax na stronie internetowej.

W tym artykule omówimy rozwiązania pięciu najczęściej spotykanych wyzwań , z jakimi boryka się deweloper, gdy używają Ajax do ulepszania treści na swojej stronie internetowej.

Chociaż istnieje o wiele więcej do omówienia i badań dotyczących wszystkich pięciu tematów, to post powinien dać początkującym i średnio zaawansowanym deweloperom Ajax kilka solidnych wskazówek dotyczących implementacji funkcjonalności Ajax w bardziej przyjazny dla użytkownika i dostępny sposób .

Problem nr 1: Treść nie jest kompatybilna z poprzednimi wersjami

Ten problem występuje, gdy projektant włączył ulepszenia JavaScript i Ajax do architektury swojej witryny bez tworzenia rezerw dla przeglądarek, które wyłączyły JavaScript.

Nic nie jest nie tak z planowaniem strony internetowej za pomocą JavaScript i Ajax; w rzeczywistości, na dzisiejszym rynku, względy JavaScript powinny być integralną częścią procesu planowania. Ale powinieneś upewnić się, że strona internetowa jest zgodna z poprzednimi wersjami (lub, że pogrąża się z gracją) po uruchomieniu.

Rozwiązanie: Zaimplementuj Ajax jako ulepszenie do już działającej witryny

O ile Ajax może być integralną częścią planowania architektury strony, upewnij się, że wszystkie treści są dostępne za pośrednictwem konwencjonalnych metod po stronie serwera.

Załóżmy, że masz stronę "Informacje o pracownikach", która ma osobny link dla każdego pracownika. Korzystając z technologii po stronie serwera, można wyświetlić zawartość dla konkretnego pracownika na podstawie wartości przekazanej przez ciąg zapytania, na przykład:

employees?view=VP">  Frank Smith - wiceprezesJim Williams - księgowy

Wszystkie powyższe linki wskazują na tę samą stronę, stronę "Pracownicy" , która zmienia się zgodnie ze zmienną w ciągu zapytania. Informacje każdego pracownika będą ładowane z serwera, co może być wykonane na wiele sposobów: za pośrednictwem serwera; poprzez bazę danych; lub nawet przy użyciu XML.

Niezależnie od tego, który link pracownika zostanie kliknięty, pełna strona musiałaby zostać załadowana w celu dostarczenia żądanych informacji.

Tak więc zawartość jest w pełni dostępna, zanim jakiekolwiek ulepszenia Ajax zostaną ułożone warstwami. Następnie przy użyciu JavaScriptu pełne odświeżenie strony mogło zostać przerwane, a zawartość załadowana zamiast tego przez Ajax. Kliknięty link może zostać zidentyfikowany przez identyfikator lub przez sprawdzenie wartości atrybutu HREF w zakotwiczeniu.

Mimo że zawartość jest w pełni dostępna przy wyłączonej obsłudze JavaScript, większość użytkowników zobaczy ulepszoną wersję opartą na Ajax.

Zasada progresywnego ulepszania dla Ajaxa jest dobrze znana, ponieważ jest powszechnie używana do dyskretnych technik JavaScript i jest nieodłącznie związana z CSS, co ilustruje poniższa grafika:

Zbuduj więc swoją witrynę internetową, aby działała bez JavaScript, a następnie dodaj JavaScript jako ulepszenie, tak jak zaznaczysz treść w HTML, a następnie "ulepszysz" ją za pomocą CSS.

Problem nr 2: Wskaźnik ładowania przeglądarki nie jest wyzwalany przez żądania Ajax

Niemal każda przeglądarka ma sposób wizualnego wskazywania użytkownikowi, że zawartość się ładuje. W obecnych przeglądarkach wskaźnik pojawia się na karcie, która ładuje zawartość.

Poniższe zdjęcia pokazują animowany wskaźnik z kilku popularnych przeglądarek.


Wskaźnik ładowania programu Internet Explorer to pełne koło z gradientem, który obraca się podczas ładowania zawartości.


Firefox wyświetla podobną ikonę małych kręgów w różnych odcieniach szarości.


Google Chrome obraca się w półkole.

Problem polega na tym, że żądania Ajax nie uruchamiają tego wskaźnika "ładowania" wbudowanego w przeglądarki.

Rozwiązanie: Włóż podobny wskaźnik ładowania w pobliżu zawartości, która ładuje się

Powszechnym rozwiązaniem tego problemu jest włączenie niestandardowego wskaźnika postępu do żądania Ajax. Wiele stron internetowych oferuje bezpłatną grafikę "Ajax loading".


Preloaders.net ma wiele fantazyjnych, dostosowywanych animowanych grafik do wyboru.

Wdrożenie tego niestandardowego grafiku ładującego lub wskaźnika postępu w funkcjonalności Ajax twojej witryny jest po prostu kwestią pokazania i ukrycia go w odpowiednim czasie za pomocą JavaScript.

Twój kod Ajax będzie zawierał linie kodu informujące o tym, czy żądanie jest w toku, czy zakończone. Przy użyciu JavaScriptu możesz wyświetlać animowaną grafikę podczas przetwarzania żądania, a następnie ukryć ją po zakończeniu działania.

Problem nr 3: Użytkownik nie wie, że prośba Ajaxa została zakończona

Jest to związane z poprzednim problemem, ale jest często pomijane, ponieważ programista może założyć, że zniknięcie wskaźnika "ładowania" wystarcza, aby poinformować użytkownika, że ​​zawartość została całkowicie załadowana. Ale w większości przypadków zdecydowanie wskazuje się, że treść została zaktualizowana lub odświeżona.

Rozwiązanie: Użyj wyraźnego komunikatu "Zlecenie zakończone"

Można to zrobić podobnie, jak potwierdza się składanie formularzy. Po przesłaniu linku Digg , strona bardzo wyraźnie informuje, że Twoje zgłoszenie zostało odebrane:

Chociaż ten konkretny wskaźnik nie wskazuje spełnionego żądania Ajax, zasada jest taka sama: pole "Sukces" pojawia się po tym, jak strona, która przesyła formularz, zakończyła ładowanie, a pudełko jest kolorowe i wyraźne.

Podobna grafika lub wskaźnik mogą być używane na końcu żądania Ajax, aby poinformować użytkowników, że treść została zaktualizowana. Zostałoby to wdrożone oprócz, zamiast wskaźnika postępu zaproponowanego dla poprzedniego problemu.

Podobny, ale subtelniejszy sposób wskazania, że ​​obszar treści został zaktualizowany, to żółta technika blaknięcia . Ta metoda jest znana użytkownikom, dyskretna i działa dobrze z treścią ładowaną przez Ajax.

Problem nr 4: Żądania Ajax nie mogą uzyskać dostępu do usług internetowych innych firm

The XMLHttpRequest obiekt, który jest w katalogu głównym wszystkich żądań Ajax, jest ograniczony do wysyłania żądań w tej samej domenie, co strona wysyłająca żądanie. Ale są przypadki, w których chcesz uzyskać dostęp do danych stron trzecich za pośrednictwem żądania Ajax. Wiele serwisów internetowych udostępnia swoje dane za pośrednictwem interfejsu API.

Rozwiązanie: Użyj swojego serwera jako proxy

Rozwiązaniem tego problemu jest wykorzystanie serwera jako serwera pośredniczącego między usługą strony trzeciej a przeglądarką. Chociaż szczegóły tego rozwiązania wykraczają daleko poza zakres tego artykułu, omówimy podstawową zasadę działania.

Ponieważ żądanie Ajax pochodzi z przeglądarki klienta, musi odwoływać się do pliku w innej lokalizacji, ale w tej samej domenie, co źródło żądania.

Twój serwer, w przeciwieństwie do przeglądarki klienta, nie jest w ten sposób ograniczony. Tak więc, gdy wywoływana jest strona na twoim serwerze, działa ona w tle tak jak zwykle, ale z dostępem do dowolnej domeny.

Nie stanowi to żadnego zagrożenia dla bezpieczeństwa użytkownika, ponieważ żądania do usługi zewnętrznej są dokonywane na serwerze. Tak więc po uzyskaniu informacji na poziomie serwera, następnym krokiem w wywołaniu Ajax jest wysłanie odpowiedzi do klienta, która w tym przypadku obejmowałaby dane uzyskane z usługi stron trzecich.

Jeśli chcesz uzyskać więcej szczegółów na temat tej potężnej metody łączenia dostępu do usług sieciowych z niestandardowym Ajaxem, zdecydowanie sprawdź inne zasoby, z których niektóre są wymienione poniżej.

Dalsze czytanie:

• Użyj wywołań serwera proxy dla połączeń międzydomenowych XMLHttpRequest
• Ajax Cross Ajax: szybkie podsumowanie
• Wykonywanie kwerend AJAX między domenami za pomocą jQuery

Problem nr 5: głębokie linkowanie jest niedostępne

Jest to trudniejszy problem, ale może nie być wymagany w zależności od typu witryny lub aplikacji. Problem występuje, gdy zawartość jest ładowana przez Ajax, a następnie "stan" witryny jest zmieniany bez adresu URL, który wskazuje na stronę, której dotyczy problem.

Jeśli użytkownik powróci na stronę za pośrednictwem zakładki lub udostępni łącze przyjacielowi, zaktualizowana zawartość nie zostanie automatycznie wyświetlona. Strona internetowa powróci do pierwotnego stanu. Strony internetowe Flash miały ten sam problem: nie pozwalały użytkownikom na link do niczego poza początkowym ekranem.

Rozwiązanie: Użyj wewnętrznych kotwic stron

Aby upewnić się, że określony "stan" na stronie internetowej opartej na Ajaksie jest możliwy do połączenia i bookmarkable, możesz użyć wewnętrznych odsyłaczy do stron, które modyfikują adres URL, ale nie odświeżają strony ani nie wpływają na jej pionową pozycję.

Ten prosty kod pokazuje, jak to zrobić:

var currentAnchor = document.location;currentAnchor = String(currentAnchor);currentAnchor = currentAnchor.split("#");if (currentAnchor.length > 1) {currentAnchor = currentAnchor[1];} else {currentAnchor = currentAnchor[0];}switch(currentAnchor) {case "section1":// load content for section 1break;case "section2":// load content for section 2break;case "section3":// load content for section 3break;default:// load content for section 1break;}

Powyższe nie jest działającym fragmentem kodu, ale teoretycznym przykładem ilustrującym główne kroki.

Pierwsze dwa wiersze kodu umieszczają bieżącą lokalizację strony (URL) w zmiennej. Następnie lokalizacja jest przekształcana na ciąg znaków, abyśmy mogli nim manipulować.

Następnie dzielimy łańcuch na dwie części za pomocą symbolu kotwicy (#), a następnie sprawdzamy, czy tablica utworzona z podziału jest większa niż jeden element. Więcej niż jeden element oznacza, że ​​URL ma kotwicę.

Jeśli URL ma tylko jedną część, oznacza to, że nie ma kotwicy. Kolejna instrukcja "switch" ładuje zawartość zgodnie z wartością zakotwiczenia. Instrukcja switch ma opcję "default" w przypadku, gdy nie ma kotwicy, która byłaby taka sama, jak ładowanie strony w jej oryginalnym stanie.

Co więcej, zastosowalibyśmy kod, aby poradzić sobie z linkami, które bezpośrednio kierują do określonej treści poprzez wewnętrzne kotwice. Łącze wskazujące na "content2" załaduje zawartość do "content2", a ciąg "# content2" zostanie dołączony do bieżącego adresu URL.

Spowoduje to zmianę adresu URL poprzez dodanie wewnętrznej kotwicy, bez zmiany widoku strony, ale z zachowaniem identyfikatora wskazującego pożądany stan strony.

To wyjaśnienie jest tylko teorią. Ta koncepcja działa i działa bardzo dobrze. Ale nie wyjaśniłem wszystkich możliwości, wad i innych subtelności budowania strony lub strony w ten sposób.

Skorzystaj z poniższych linków, aby uzyskać bardziej wyczerpującą dyskusję na temat lub sam z nim eksperymentować. Należy również pamiętać, że można to przetestować za pomocą zawartości, która zmienia się samym kodem JavaScript i nie musi wykorzystywać Ajax.

Dalsze czytanie:

• Głębokie połączenie dla AJAX
• AJAX: jak obsługiwać zakładki i tylne przyciski
• Naprawianie przycisku Wstecz i włączanie tworzenia zakładek dla aplikacji AJAX

Ten post został napisany wyłącznie dla Webdesigner Depot przez Louisa Lazarisa, niezależnego pisarza i programistę. Louis ucieka Imponujące sieci , gdzie publikuje artykuły i samouczki dotyczące projektowania stron internetowych. Możesz śledzić Louisa na Twitterze lub skontaktuj się z nim poprzez jego stronę internetową .

Czy znasz jakieś rozwiązania tych lub innych wyzwań Ajax? Podziel się swoimi komentarzami poniżej ...