Ajax JQuery: użycie i funkcje

Termin Ajax jest dekodowany jako Asynchroniczny Javascript i XML (asynchroniczny JavaScript i XML) i odnosi się do technologii budowania zapytań bez ponownego ładowania strony: jeśli wyślesz trochę danych na serwer, odpowiada i strona nie jest aktualizowana. Najprostszym przykładem żądania Ajax jest wyszukiwanie. Jeśli otworzysz wyszukiwarkę i zaczniesz wpisywać zapytanie, wskazówki pojawią się natychmiast pod tym wierszem, ale strona się nie odświeży. W przypadku skróconego nagrywania połączeń metod Jquery używany jest znak dolara.

Korzyści z Ajax

Ajax pozwala zaoszczędzić ruch, a jego użycie jest wygodniejsze dla użytkownika, ponieważ nie trzeba długo czekać na pełne przeładowanie strony. Jednak programista używający tej metody jest zmuszony do ciągłego monitorowania działań użytkowników i zachęcania ich do zrozumienia, co dzieje się na stronie. Ważne jest, aby zrozumieć, że stare wersje przeglądarek, w tym tekst, nie obsługują technologii Ajax. Czasami użytkownicy wyłączają korzystanie z JS, ponieważ skrypty mogą przestać działać. Dlatego ważne jest, aby myśleć o alternatywach i nie polegać wyłącznie na tej metodzie.

Ajax i aplikacja jQuery

Istnienie interaktywnych aplikacji nie byłoby możliwe bez technologii Ajax. Jest używany w pracy Angular (AngularJS) - framework dla JS. Korzystanie z technologii Ajax na całej stronie jest opcjonalne. Może być używany tylko w przypadku niektórych elementów aktualizowanej strony. Na przykład dla autokorekty, formularza sprawdzania poprawności i wyszukiwania.

Biblioteka jQuery to zbiór gotowych rozwiązań napisanych w JS. Możesz go znaleźć za pomocą zapytania "Ajax libs Jquery". Istnieje wariant jego połączenia za pośrednictwem specjalnej usługi Google. Nazywa się Ajax Googleapis. Jquery w tym przypadku łączy się bezpośrednio. Oczywiście przyspiesza to ładowanie strony. Najczęściej użytkownicy znajdują mini wersję Jquery Ajax na Googleapis.com. Ma zmniejszoną funkcjonalność, ale jest wygodniejsza dla początkujących. Wersja mini Ajax Jquery na Googleapis.com nazywa się - min.js.

Formaty przesyłania danych

XML w dekodowaniu skrótów Ajax jest formatem wymiany danych. Początkowo, kiedy technologia została stworzona po raz pierwszy, wymiana odbyła się tylko przy jej pomocy. XML jest bardzo podobny do HTML, ale w nim wszystkie znaczniki muszą być zamknięte. Później pojawił się nowy format w języku JS - JSON. Było to tak proste i wygodne, że rozprzestrzeniło się na inne języki i biblioteki. JSON lepiej nadaje się do przesyłania niewielkiej ilości danych, do 20 tysięcy linii. Łatwiej z nim pracować, jest bardziej elastyczny i zrozumiały dla programisty. Więcej informacji, użyj XML. Na przykład wysyłanie żądań do wyszukiwania Yandex jest realizowane przy użyciu tego formatu.

Tworzenie najprostszego dokumentu JSON

W JS wszystkie właściwości opisują pojedynczy globalny obiekt okna, czyli okno przeglądarki. Wszystkie biblioteki opisują funkcje (metody) i właściwości tego obiektu. JSON jest oddzielną klasą, która dziedziczy po obiekcie i ma dwie własne metody: parsowanie i stringify. Omówimy obie metody bardziej szczegółowo poniżej.

Możesz pracować z Ajaxem z JS bez używania jQuery. Ciąg JSON można przekonwertować na obiekt JS i na odwrót. Zastanów się, jak to zrobić z przykładami. Najpierw utwórz dokument i nazwij go, na przykład "man" z rozszerzeniem JSON. Następnie wykonujemy kolejno następujące czynności:

1. Otwórz plik w edytorze kodu, na przykład PhpStorm lub Sublime.
2. Format JSON ma swoją własną składnię. Najpierw tworzy się obiekt - potrzebuje nawiasów klamrowych.
3. Klucz i jego wartość muszą znajdować się w nawiasach. Klucze muszą być w podwójnych cudzysłowach. W standardowym JS podczas tworzenia obiektu klucz zapisywany jest bez cudzysłowów. Na przykład dla obiektu "man" w formacie JSON należy utworzyć klucze "nazwa" (nazwa) i "wiek" (wiek). W rezultacie otrzymujemy następujący kod: {"name": "Pavel", "age": 28}.

Jeśli potrzebujesz kilku obiektów, są one umieszczane w tablicy, która jest wyróżniona nawiasami kwadratowymi. Należy pamiętać, że format JSON nie obsługuje komentarzy. W dowolnej formie będzie to błąd. Ale nie ma dla nich specjalnej potrzeby.

Same kluczowe wartości mogą być następujących typów:

• ciąg;
• liczba;
• tablica;
• obiekt.

Tablica jest zapisana w nawiasach kwadratowych, obiekty w niej zawarte są ujęte w cudzysłowy i rozdzielone przecinkami. Możesz także dodać dołączony obiekt, taki jak adres. Musi być zamknięty w nawiasach klamrowych. Tak szybko powstaje najprostszy dokument JSON. Dla wygody użytkowania i zakochał się w programistach.

Konwersja ciągu do obiektu

Ciąg w JS często musi zostać przekonwertowany na obiekt JSON. Należy zauważyć, że w kodzie, gdy linia łamie się na końcu, powinno być ukośnikiem, w przeciwnym razie JS nie zrozumie, że to koniec. Kod w JS będzie wyglądał następująco:

Konieczne jest zapewnienie, że klucze są w podwójnych cudzysłowach, w przeciwnym razie wystąpi błąd. Mamy najprostszy ciąg. Może pochodzić z dowolnego serwera. Aby upewnić się, że jest to ciąg znaków, możesz wyprowadzić go na konsolę, dodając do kodu polecenie "console.log (json)". Teraz przekonwertuj ciąg znaków na obiekt. Aby to zrobić, najpierw deklarujemy zmienną i wywołujemy dla niej specjalny test klasy: var jsonObj = JSON.parse (). Następnie przekazujemy parametr. Aby pracować z formatem JSON w JS, istnieje specjalna klasa o tej samej nazwie. W ten sposób możesz przekonwertować ciąg znaków na obiekt. Jeśli z jakiegoś powodu konwersja nie będzie możliwa, pojawi się ostrzeżenie. Aby potwierdzić, że wszystko zostało wykonane poprawnie, obie zmienne mogą być wyświetlane w konsoli. W pierwszym przypadku, gdy wyświetlasz ciąg w konsoli, spacje pojawią się po wartościach, ponieważ JS policzy ich liczbę przed znakiem ukośnika. To nie jest błąd, ale dla urody kodu wskazane jest usunięcie dodatkowych spacji.

Konwertuj obiekt na ciąg znaków

Możesz zrobić odwrotnie i przekonwertować obiekt na ciąg znaków. Aby to zrobić, deklarujemy zmienną i ponownie używamy klasy JSON, dodając ją przez kropkę, ale wybierz inną metodę - stringify: var ObjtoStr = JSON.stringify (). Następnie przenosimy niezbędny parametr. To polecenie wykonuje odwrotną transformację. Ten parametr może przenieść wszystko, czego potrzebujemy, na przykład tylko nazwę. Aby to zrobić, pożądany klucz musi być ujęty w nawiasy kwadratowe. Możesz więc pracować z JSONem z JS.

Wyślij zapytanie do serwera

Teraz przejdźmy do Ajax i wyślij to żądanie na serwer. Najpierw musisz utworzyć obiekt XMLHttpRequest. Ta klasa jest odpowiedzialna za wysłanie żądania i pozwala utworzyć go bez ponownego ładowania strony. JSON będzie użyty, ale nazwa klasy się nie zmieniła: XML. Kod do wysłania żądania to: var xhr = XMLHttpRequest (). Nie wyślemy jeszcze opcji. Teraz skonfiguruj to zapytanie. Aby to zrobić, napisz: xhr.open (). Metoda otwarta skonfiguruje adres. Aby to zrobić, dodaj słowo "GET" w nawiasach. Dalej, oddzielone przecinkiem w pojedynczych cudzysłowach, zapisujemy adres hosta, do którego wysyłamy żądanie. Na końcu linii dodaj nazwę obiektu, czyli plik do pobrania - w naszym przypadku jest to "man.json".

Żądanie synchroniczne i asynchroniczne

Trzeci parametr potrzebny do wysłania żądania to ustalenie, czy będzie on synchroniczny, czy też nie. Jest to asynchroniczne i ma dwie wartości: false - żądanie jest synchroniczne i prawdziwe - w tym przypadku będzie to asynchroniczne. Jeśli żądanie jest synchroniczne, skrypt czeka na odpowiedź. Jeśli odpowiedź zajmuje sekundę, następny wiersz kodu nie zostanie przetworzony. Żądanie synchroniczne zostanie wykonane w osobnym wątku, a skrypt będzie kontynuował wykonywanie poleceń. W naszym przypadku będziemy potrzebować pierwszej wartości, ponieważ w przeciwnym razie kontrola odpowiedzi będzie musiała zostać wykonana przez zdarzenie i przypisać funkcję, która zostanie wykonana zaraz po otrzymaniu żądania.

Następnie dodaj kolejną linię kodu: xhr.send (). Teraz, w odpowiedzi na żądanie, kod powinien nadejść. Może to być kod "200", co oznacza, że ​​serwer jest dostępny, "404" - dokument nie został znaleziony, "300" - przekierowanie i "500" - błąd z serwera. Aby dowiedzieć się, czy wystąpił błąd, musisz porównać kod z "200". Aby to zrobić, dodaj następujący wiersz do kodu: if (xhr.status! = 200) i wyprowadź wartość do konsoli. Jeśli wszystko jest w porządku, gałąź else zacznie działać, do której dodamy dane wyjściowe do konsoli z wartością "OK". Dlatego wysłaliśmy żądanie do serwera za pomocą JS i dowiedzieliśmy się, jak działa Ajax z JS. Stworzyliśmy XMLHttpRequest, podaliśmy metodę, ścieżkę, synchronizację lub asynchronię i otrzymaliśmy wynik.

Jquery ajax

Doświadczeni programiści nie używają czystego JS do pracy, ale korzystają z dowolnej biblioteki - najczęściej jQuery. Żądania Ajax JS w jQuery są dużo łatwiejsze do stworzenia, dlatego stały się tak popularne. Spróbujmy ulepszyć skrypt za pomocą tej biblioteki. Najpierw musisz pobrać jQuery. Występuje w kilku wersjach. Możesz połączyć bibliotekę za pośrednictwem usługi Google Code. Istnieje opcja dla programistów, gdzie istnieje możliwość komentowania i łamania linii. Kolejna wersja jest minimalna. Znajduje się pod adresem: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Ma sens podłączenie tej biblioteki na działającym serwerze. Możesz dodać bibliotekę przy użyciu następującego kodu za pośrednictwem usługi Google Code:

Ten kod używa wersji 3.1.0 jako przykładu. Aby działać poprawnie, musisz dodać aktualną wersję. Ważne jest, aby adres zaczynał się od "//ajax.googleapis.com/ajax/libs/jquery" .Następnie tworzymy nowy plik w formacie html i podłączamy bibliotekę, podając adres jej lokalizacji w tagu skryptu i umieszczając go w nagłówku. Skrypt uruchamiamy w tym wierszu: $ (document) .ready (). Gdy dokument jest gotowy, funkcja zagnieżdżona zostanie wywołana: (function () {}) Jest to konieczne, aby załadować model DOM, z którym pracujemy , czyli wszystko, co znajduje się w znaczniku body, jeśli to nie zostanie zrobione, skrypt zostanie przetworzony przed załadowaniem modelu DOM.

Tworzenie formularza

Jako przykład Ajax jQuery, utwórz formularz. Aby to zrobić, utwórz element div z klasą formularza i dodaj dane wejściowe z tekstem "text" i atrybutem name o wartości "name". Następnie dodajemy kolejne dane wejściowe, z tekstem "tekst" i nazwą "adres". Każde wejście ma przypisany identyfikator. Jako identyfikator możesz użyć wartości atrybutów nazwy. Dodaj wskazówkę dla obu danych wejściowych z ofertą dla użytkownika, aby wprowadzić nazwę i adres. Opcjonalnie możesz dodać kolejną linię dla wieku. Teraz pozostaje przycisk do wysłania formularza. Wewnątrz znacznika przycisku wpisujemy słowo "wyślij" i dodajemy identyfikator btn. Dodajemy ograniczniki - znaczniki br - w każdej linii i sprawdzamy, co mamy.

Możesz dodać wcięcia zewnętrzne, pisząc je do znacznika stylu, ale jest to opcjonalne. Podczas gdy formularz nie działa. Do jego działania musisz powiązać zdarzenie z przyciskiem, ponieważ dane zostaną wysłane dokładnie po naciśnięciu. Aby to zrobić, wybierz przycisk na selektorze i wprowadź wydarzenie "kliknij": $ ("# btn"). ("Kliknij"). Teraz po kliknięciu ta funkcja zostanie wykonana. Używamy metody on, która podpisuje określoną funkcję na zdarzeniu kliknięcia jakiegoś elementu. Oznacza to, że po kliknięciu przycisku zadziała. Sprawdzamy, czy wszystko działa za pomocą wyjścia do konsoli. Metody wysyłania żądań w jQuery Ajax nie są zbyt liczne. Możesz użyć get, post lub po prostu Ajax. Ponieważ dane te mogą coś zmienić, użyjemy metody posta Ajax Jquery.

Uzyskiwanie wartości pól formularza

W następnym kroku musimy uzyskać wartości wszystkich pól formularza. W jQuery Ajax istnieją dwie opcje, jak to zrobić. Możesz użyć tej funkcji lub zrobić bez niej. W przypadku pierwszej opcji wpisujemy następujący kod: var name = $ ("# name"). Następnie dodajemy podobne linie dla adresu i wieku. Otrzymaliśmy odniesienia do elementów, a nie same wartości. Teraz używamy metody posta Ajax Jquery. Aby to zrobić, piszemy: $ .post (). Teraz musisz skonfigurować metodę. Zajmuje adres url, na który zostanie wysłany formularz. W tym celu użyjemy walidatora. Aby to zrobić, w nawiasach piszemy "/validator.php".

Dodaj jeszcze jeden parametr - same dane: var data = 'name =' + name.val () + '& address =' ​​+ address.val () + '& age =' + age.val (). Teraz mamy dane uzyskane przez metodę Ajax Jquery. Pozostaje tylko dodać funkcję wywołania zwrotnego, która zostanie wywołana, gdy odpowiedź pochodzi z serwera. Musi zarejestrować następujące parametry: dane serwera, opis statusu i czy żądanie zostało wykonane. Wyświetlamy parametr danych w konsoli, aby sprawdzić, czy wszystko działa. Ważne jest również wzięcie pod uwagę, że żądanie Ajax jest zawsze wykonywane w Unicode, ponieważ kodowanie dokumentu musi być utf-8. Jeśli witryna i serwer są w innym kodowaniu, a Ajax jest wykonywany w Unicode, serwer zwróci hieroglify, a ciąg będzie musiał zostać przekodowany. Aby tego uniknąć, wskazane jest zrobienie wszystkiego w utf-8.

Pracuj z PHP

Teraz użyj Ajax jQuery z PHP. Utwórz nowy plik i nazwij go validator.php. Pokażmy nasze dane. W tym celu piszemy: $ array = $ post. Teraz wypisz wszystkie dane w formacie JSON: echo JSON_encode ($ array). Sprawdzamy, jak działa formularz, wypełniając pola i wysyłając zapytanie do serwera. Jeśli wszystko zostanie wykonane poprawnie, otrzymamy obiekt o określonych parametrach. Otrzymaliśmy dane, teraz trzeba je przetworzyć i zarejestrować. Piszemy: if (isset ($ post ['name']) && (isset ($ post ['age']) && (isset ($ post ['address'])) Isset oznacza, że ​​taka zmienna istnieje. Następnie dodaj warunek : else {$ array ['status'] = 'error'} Sprawdzamy, czy wszystko działa. Jeśli wystąpią błędy w kodzie, szukamy i naprawiamy je. Dzięki asynchronicznej transmisji żądania użytkownik może wprowadzić dodatkowe informacje w momencie, gdy transmisja jest włączona Możesz używać nie tylko języka programowania PHP, ale także innych języków serwera.