Termin Ajax oznacza Asynchronous JavaScript and XML (Asynchronous JavaScript and XML) i wskazuje na technologię wniosków bez przeładowania strony, jeśli wysłać jakieś dane do serwera, odpowiada, gdy strona nie jest aktualizowana. Najprostszym przykładem zapytania Ajax jest wyszukiwanie. Jeśli otworzysz wyszukiwarkę i zaczniesz wpisywać zapytanie, natychmiast pod nim pojawi się monit z monitem, ale strona nie zostanie zaktualizowana. W celu zredukowania rejestracji wywoływania metod Jquery używany jest znak dolara.

Korzyści Ajaxa Ajax

pozwalają na zaoszczędzenie ruchu i korzystanie z niego wygodniej dla użytkownika, ponieważ nie trzeba długo czekać na pełne przeładowanie strony. Programista korzystający z tej metody jest jednak stale zmuszony do śledzenia działań użytkowników i informowania ich o tym, co dzieje się na stronie. Ważne jest, aby zrozumieć, że starsze wersje przeglądarek, w tym tekst, nie obsługują technologii Ajax. Czasami użytkownicy wyłączają użycie JS, więc skrypty mogą przestać działać. Dlatego ważne jest, aby myśleć o alternatywach i nie za dużo, aby mieć nadzieję na tę metodę.

Zastosowanie Ajax i JQuery

Istnienie interaktywnych aplikacji nie byłoby możliwe bez technologii Ajax. Jest używany w Angulara (AngularJS) - framework dla JS. Nie jest konieczne korzystanie z technologii Ajax na całej stronie. Można go używać tylko w przypadku niektórych elementów zaktualizowanej strony. Na przykład w przypadku automatycznego zastępowania, sprawdzania poprawności formularzy iszukaj Biblioteka JQuery to zbiór gotowych rozwiązań napisanych w PHP. Możesz go znaleźć przez "jquery biblioteki Ajax". Istnieje możliwość połączenia przez specjalną usługę Google. Nazywa się Ajax Googleapis. Jquery w tym przypadku łączy się bezpośrednio. Oczywiście przyspiesza to ładowanie strony. Użytkownicy często znajdują mini wersję Jquery, Ajax na Googleapis.com. Ma ścięty funkcjonalny, ale bardziej wygodny dla początkujących. Nazwana mini wersją Jquery, Ajax na Googleapis.com - min.js.

Formaty transmisji danych

Skrót odczytywania XML Ajax to format wymiany danych. Początkowo, kiedy technologia była tworzona, wymiana była tylko za jej pomocą. XML jest bardzo podobny do HTML, ale wszystkie znaczniki muszą być w nim zamknięte. Później w języku JS pojawił się nowy format JSON. Było to tak proste i wygodne, że rozprzestrzeniło się na inne języki i biblioteki. JSON najlepiej nadaje się do przesyłania niewielkiej ilości danych, do 20 tysięcy linii. Łatwiej jest pracować, jest bardziej elastyczny i jasny dla programisty. Przy większej ilości informacji preferowany jest format XML. Na przykład wysyłanie żądań do "wyszukiwania Yandex" jest realizowane przy użyciu tego formatu.

Tworzenie prostego dokumentu w formacie JSON

W JS wszystkie właściwości opisują jeden 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. Zobacz szczegóły obu metod poniżej.
Praca z AjaxMożesz użyć JS bez jQuery. Linia JSON może zostać przekonwertowana na obiekt JS iz powrotem. Zastanówmy się, jak to zrobić na przykładach. Najpierw utwórz dokument i nazwij go, na przykład "man" z rozszerzeniem JSON. Następnie wykonujemy następujące czynności:

Otwórz plik w edytorze kodu, na przykład PhpStorm lub Sublime.

Format JSON ma swoją własną składnię. Najpierw tworzony jest obiekt - wymaga to nawiasów klamrowych.

Nawiasy powinny zawierać klucz i jego znaczenie. Klucze powinny być w podwójnych łapach. 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 "name" i "age". W rezultacie otrzymujemy następujący kod: {imię i nazwisko: Pavel, wiek: 28}.

Jeśli potrzebujesz kilku obiektów, są one umieszczane w tablicy, która wyróżnia się w nawiasach kwadratowych. 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 klucze mogą mieć następujące typy:

linia;

numer;

tablica;

obiekt.

Tablica jest zapisana w nawiasach kwadratowych, obiekty w niej są cytatami i są przepisywane przecinkami. Możesz także dodać dołączony obiekt, taki jak adres. Musi być zamknięty w nawiasach klamrowych. Oto najszybszy sposób na stworzenie najbardziej prostego dokumentu JSON. Dla łatwości użytkowania zakochała się w programistach.

Konwertowanie ciągu znaków na obiekt

Ciąg JS jest często przekształcany w obiekt JSON. Warto zwrócić uwagę, że w kodzie przy przenoszeniu liniikoniec powinien być ostry, inaczej JS nie zrozumie, że to koniec. Kod JS będzie wyglądał tak: Musisz upewnić się, że klucze są w podwójnych cudzysłowach, w przeciwnym razie wystąpi błąd. Mamy prostą linię. Może pochodzić z dowolnego serwera. Aby upewnić się, że jest to linia, to może być wyświetlona na konsoli dodając zespół kodu „console.log (JSON)” Teraz konwertować obiekt String Aby to zrobić, należy najpierw zadeklarować zmienną i nazywamy ją specjalna klasa parse:.. Var jsonObj = JSON.parse (). Następnie przenieść opcję. do pracy z formatem JSON w JS jest specjalna klasa o tej samej nazwie. Tak, można konwertować obiekt String. Jeśli z jakiegoś powodu nie można przekonwertować, zauważy. na potwierdzenie, że wszystko jest zrobione poprawnie, obie zmienne mogą być wyświetlane na konsoli, w pierwszym przypadku, gdy wyjście konsola poprosi wartości po przerwie, gdyż uważa liczbę JS ciąć znak. To nie jest błąd, ale piękno kodu zbędnych przerw pożądane do czyszczenia.

Konwertowanie obiektu na ciąg

Można wykonać działanie odwrotne i przekształcić obiekt w ciąg znaków. Aby to zrobić, ogłaszamy zmienną i ponownie używamy klasy JSON, dodając ją przez punkt, ale wybierz inną metodę - stringify: var ObjtoStr = JSON.stringify (). Następnie przekazujemy żądany parametr. To polecenie wykonuje odwrotną transformację. Ta opcja może przekazać wszystko, czego potrzebujemy, na przykład tylko nazwę. Aby to zrobić, klucz trzeba umieścić w nawiasach kwadratowych. Możesz więc pracować z JSON z JS.

Wniosek o przeniesienie do serwera

Zwróćmy się teraz do Ajax i wysłać ten wniosekserwer 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 zapytania wygląda następująco: var XHR = XMLHttpRequest (). Nie będziemy wysyłać opcji do tej pory. Teraz skonfiguruj to żądanie. Aby to zrobić, piszemy: xhr.open (). W metodzie otwartej skonfigurujemy adres. Aby to zrobić, dodaj słowo "GET" w nawiasach. Następny przecinek w apostrofach piszących adres hosta gdzie wysłać żądanie. Na końcu linii dodać nazwę obiektu, tj Pobierz plik -. W tym przypadku „man.json”

synchroniczne i asynchroniczne żądanie

Trzeci wariant, który jest wymagany, aby wysłać żądanie - określenie, czy będzie to jednoczesny albo nie. Nazwał asynchroniczny i posiada dwa znaczenia. „Fałszywy wniosek jest składany jednocześnie i prawda - w tym przypadku będzie to asynchroniczny Jeżeli wniosek jest synchroniczna, skrypt czeka na odpowiedź Jeżeli odpowiedź zajmuje drugie, obok linii kodu nie jest obrobytsya zapytania Jednoczesne będą wykonywane w oddzielnym.. strumieniowo i kontynuować wykonanie polecenia script W naszym przypadku będzie miała pierwszą wartość, ponieważ sprawdzić inaczej odpowiedzi trzeba zrobić po wypadku i przypisać funkcję, która jest wykonywany tak szybko, jak żądanie pochodzi Następnie dodać jedną linię kodu:... xhr.send () teraz. Poproszony przyjść kod może to być kod „200”, co oznacza, że ​​serwer jest dostępny „404” - nie znaleziono dokument „300” - przekierowanie i „500”. - błąd serwera Aby dowiedzieć czy wystąpił błąd, który należy porównaćkod "200". Aby to zrobić, należy dodać następującą linię kodu: if (xhr.status = 200!) I czerpać wartości w konsoli. Jeśli wszystko jest dobrze, będzie działał oddział innego, który stwierdził console Dodaj czyli „OK”. Więc wysłał żądanie do serwera za pomocą JS i nauczył się Ajax z JS. Stworzyliśmy XMLHttpRequest, określoną metodą synchronizacji ścieżki lub asynchrony i dostałem wynik.

JQuery, Ajax

Doświadczeni programiści czystych JS użytkowania i użyć niektóre biblioteki - często w jQuery. Prośba JS Ajax jQuery utworzyć wiele łatwiej, dlatego stało się tak popularne. Spróbujemy ulepszyć skrypt z tą biblioteką. Najpierw musisz pobrać JQuery. Występuje w kilku wersjach. Możesz połączyć bibliotekę za pomocą usługi Google Code. Istnieje opcja dla programistów, w której można komentować i przenosić linię. Kolejna wersja jest minimalna. Znajduje się on pod adresem: ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js. Ma to sens, aby ta biblioteka łączyła się z działającym serwerem. Dodaj bibliotekę za pomocą następującego kodu za pośrednictwem usługi Google Code:& lt; script src = „//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">W tym kodzie, na przykład przy użyciu wersji 310. Aby działać poprawnie trzeba dodać rzeczywistą wersję. Ważne jest, aby adres zaczyna się od „//ajax.googleapis.com/ajax/libs/jquery”. Następnie należy utworzyć nowy plik w bibliotece html i podłączyć poprzez określenie adresu jego lokalizacja w tagu script i umieszczenie go w głowę. Następnie zaczynamy pisać sam skrypt. Zacznijmy od następującego wiersza: $ (document) .ready (). Gdy dokument będzie gotowy, zostanie wywołanyfunkcja zagnieżdżona: (function () {}). Jest to konieczne, aby załadować model DOM, z którego pracujemy, czyli wszystko w tagu body. Jeśli tego nie zrobisz, skrypt zostanie przetworzony przed uruchomieniem modelu DOM.

Tworzenie formularza

Jako przykład, Jquery, Ajax utworzy formularz. Aby to zrobić, utwórz element div za pomocą klasy formularza i dodaj go do typu danych wejściowych "tekst" oraz atrybutu nazwy o wartości "nazwa". Następnie dodaj kolejne wejście z tekstem "tekst" i nazwą "adres". Każde wejście przypisze identyfikator. Możesz użyć wartości atrybutów nazwy jako identyfikatora. Dodaj wskazówkę dla obu wejść, prosząc użytkownika o wprowadzenie nazwy i adresu. Jeśli chcesz, możesz dodać kolejną linię dla wieku. Teraz musisz zrobić przycisk, aby wysłać formularz. Wewnątrz znacznika przycisku wpisujemy słowo "wyślij" i dodajemy identyfikator btn. Dodaj separatory - tagi br - dla każdej linii i sprawdź, co się stało. Możesz dodać wcięcia zewnętrzne, wpisując je w znaczniku stylu, ale jest to opcjonalne. Podczas gdy formularz nie działa. Dla jego funkcjonowania przycisk musi być powiązany ze zdarzeniem, ponieważ dane zostaną wysłane po naciśnięciu. Aby to zrobić, wybierz przycisk na selektorze i wprowadź wydarzenie "kliknij": $ ("# btn"). ("Kliknij"). Teraz ta funkcja zostanie wykonana po kliknięciu. Używamy metody on, która podpisuje określoną funkcję zdarzenia click dla elementu. Oznacza to, że po kliknięciu przycisku zadziała. Sprawdź, czy wszystko działa z wyjściem konsoli. Nie ma wielu sposobów, aby wysłać zapytanie do Jquery, Ajax. Możesz użyć get, post lub po prostu Ajax. Ponieważ te dane mogąBędziemy używać metody Jquery, postu Ajax, aby coś zmienić.

Wstęp wartości pól formularza

W tym etapie musimy uzyskać wartość wszystkich pól formularza. W Jquery, Ajax istnieją dwa sposoby, aby to zrobić. Możesz użyć tej funkcji lub zrobić bez niej. W przypadku pierwszej opcji napisać następujący kod: var name = $ ('# Nazwa'). Następnie dodaj ten sam wiersz adresu i wiek. Mamy linki do elementów, a nie te najważniejsze. Teraz używamy metody JQuery, postu Ajax. Aby to zrobić, napisz: $ .post (). Teraz należy dostosować metodę. Akceptuje adres url, na który zostanie wysłany formularz. W tym celu użyjemy walidatora. Aby to zrobić, napisz nawiasy "/validator.php". Dodawanie inny wymiar - dane samego: 'name =' dane var = + name.val () + 'i wzmacniacz, adres =' + address.val () + 'i wzmacniacz, wiek =' + age.val (). Teraz mamy dane uzyskane przez Jquery'ego, Ajax. Pozostaje tylko dodać funkcję wywołania zwrotnego, która zostanie wywołana, gdy odpowiedź pochodzi z serwera. Musi określić następujące parametry: dane serwera, opis stanu i czy żądanie zostało wykonane. Wyprowadzamy parametr danych do konsoli, aby sprawdzić, czy wszystko działa. Ważne jest również, aby uznać, że żądanie Ajax zawsze odbywa się w Unicode jako kodowanie dokumentu powinien być UTF-8. Jeśli witryna na inny serwer i kodowania, a Ajax wykonywane w Unicode, serwer zwróci znaki i linia musiał przekodować. Aby tego uniknąć, pożądane jest robienie wszystkiego w utf-8.

Praca z PHP

Teraz używamy Jquery, Ajax PHP. Tworzymy nowy plik i nazywamy go validator.php. Wywołaj nasze dane. W tym celu piszemy: $ array = $ post. Teraz czerpać jakąkolwiek formatu danych JSON: echo json_encode ($ array). Sprawdź, jakFormularz działa poprzez wypełnienie pól i wysłanie żądania do serwera. Jeśli wszystko zostanie wykonane poprawnie, otrzymamy obiekt o podanych parametrach. Mamy dane, teraz muszą je przetwarzać i pisać. Piszemy: if (isset ($ post ['name']) & amp; (isset ($ post ['age']) & amp; (isset ($ post ['address'].) Oznacza to, że Zmienna tam jest, następnie dodajemy warunek: else {$ array ['status'] = 'error'} Sprawdź, czy wszystko działa. Jeśli są błędy w kodzie, szukamy i naprawiamy je. w momencie transferu na serwer można używać nie tylko języka programowania PHP, ale także innych języków serwera.