Ajax Success to narzędzie do pobierania danych z serwera przeglądarki internetowej bez konieczności ponownego ładowania całej strony. W swojej pracy wykorzystuje obiekt XMLHttpRequest z javascript, aby wysyłać i odbierać informacje na serwerze asynchronicznie w tle, bez interwencji użytkownika. Metoda stała się tak popularna, że nie ma prawie żadnej innej aplikacji, która nie używa Ajax. Przykłady niektórych dużych aplikacji internetowych Ajax napędzany sukcesem, to: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr i innych.
Funkcje różnych przeglądarek
Ajax oznacza: A jest synchroniczny, javascript, A nd X ml. Jak widać z procesu wyznaczania wykorzystuje JavaScript, albo raczej skrypt o nazwie jquery.js. jQuery to biblioteka javascript. Plik waży tylko 96 KB, napisany w JavaScript i funkcje zwane jquery.js, co upraszcza programowanie JavaScript, zapewniających możliwości cross-przeglądarki selekcji i przetwarzania elementów DOM, obsługę zdarzeń, zapytania Ajax sukcesem i animacji.
jQuery jest bardzo popularny. W maju 2015 r. Plik jest używany przez 642% wszystkich witryn. Wśród bibliotek jQuery i frameworków udział w rynku jQuery wynosi 952%. Innymi słowy, większość współczesnych programistów pracuje w jQuery, a nie w surowym javascript. Zalety jQuery:
Obsługa wielu przeglądarek. Że sam kod jQuery działa w różnych przeglądarkach: Chrome, Firefox, IE, Safari i Opera. Z drugiej strony, w celu zapewnienia wsparcia cross-przeglądarki w przeglądarce surowego javascript powinien sprawdzić i wydawania odpowiednich kodów w różnych przeglądarek (zwłaszcza IE) realizuje funkcje inaczej.
Wybór i manipulowanie elementami DOM. "Zapytanie" odnosi się do wyboru elementów DOM w dokumencie internetowym w celu dalszej manipulacji.
Wydajny przełącznik funkcji wybierania komórek opartych na nazwach znaczników HTML, na przykład, atrybut id HTML, CSS #Debugowanie .error nazwy klasy, w przypadku błędu Ajax sukcesu.
wydarzenia przetwórczego
jQuery javascript ułatwia obsługę zdarzenia i ma efektów specjalnych i animacji, adaptować programowania aby pokazać /ukryć, fade in /zejścia, slide-in /wyciągane i niestandardowe animacje. Ajax Success zapewnia prosty interfejs Ajax do wysyłania asynchronicznych żądań HTTP GET /POST i przetwarzania odpowiedzi.
z jQuery można napisać kilka linijek kodu, aby zastąpić kilkanaście kod JavaScript i działa na wszystkich przeglądarkach bez potrzeby oddzielnego badania dla każdego z nich. Wsparcie cross-browser szczególnie ważne dla produkcji, dzięki czemu użytkownik może sprawdzić swoje kody javascript we wszystkich przeglądarkach. Jquery, Ajax Success korzysta z ponad 60% stron internetowych. Do pracy w procesie zakłada się, że użytkownik jest zaznajomiony z HTML5 CSS 3 i JavaScript są niezbędne warunki dla przejścia do jQuery.
Za pomocą jQuery
JQuery ma dwie wersje. Druga wersja IE nie obsługuje proces instalowania i konfigurowania:
Pobierz bibliotekę jQuery z serwisu.
Skopiuj plik javascript (na przykład jquery-1.xx.x.min.js) do katalogu głównego dokumentu, z reguły w podkatalogu "js". "Min.js" to mini-wersja przeznaczona do produkcji, która usuwa dodatkowe spacje i komentarze, aby szybko zmniejszyć rozmiar pliku do pobrania.
Do testowania i badania stosowane są kody«.Js» wersja.
Uwzględnij w dokumencie HTML. W HTML4 /XHTML1.0 musisz dołączyć atrybut type = "text /javascript" do otwierającego tagu.
Zamiast tego, zamiast obsługiwać serwer jquery.js, użytkownik może korzystać z jednej z sieci CDN (sieć dystrybucji treści) do obsługi. Pozwoli to zaoszczędzić część ruchu sieciowego i prawdopodobnie zapewni szybszą odpowiedź. Ponadto pobieranie pliku jquery.js zostanie zapisane w pamięci podręcznej w celu ponownego użycia:
CDN jQuery.com;
CDN Google;
Microsoft CDN.
Niektórzy użytkownicy wolą umieszczać javascript bezpośrednio przed końcem body () zamiast partycji dla lepszej szybkości, również ładować CSS przed javascripts, ponieważ często odnosi się to do CSS.
Selektory skryptów i operacje
Selektor Jquery, Ajax Success - najważniejsza funkcja jQuery - ma specjalną składnię $ (). Może przyjąć nazwę tagu, atrybut id (z prefiksem #) lub nazwę klasy (z prefiksem punktu). W rzeczywistości obsługuje wszystkie selektory CSS. W porównaniu do funkcji selektora w javascript, JQuery jest bardzo prosty i do klasy powyżej. Dołącza procedurę obsługi zdarzeń, która będzie działać po zbudowaniu drzewa DOM. Zdarzenie "" różni się od zdarzenia javascript "", które nie czeka na pobranie zewnętrznych linków, takich jak obrazy. Kody te są umieszczane w sekcji przed utworzeniem elementów, które mają się odwoływać. Jest to typowa praktyka jQuery: $ (document) .ready (handler) readyonloadready () Przykładem jest selektor i operacje jQuery.
Żądanie JQuery odnosi się do wyboru elementów w HTML - dokumentu do dalszej manipulacji.
Na przykład:
$ (dokument) wybieraobecny dokument.
$ (p) wybiera wszystko.
Elementy (selektor znaczników).
$ (# hello) i $ (wiadomość #) wybiera jedną pozycję z atrybutem id = "hello" (ID-Selector).
$ (. Czerwony) Wybiera wszystkie elementy, które mają atrybut class = "czerwony" (Selekcja klas).
W rzeczywistości $ () jest skrótem (pseudonimem) dla głównej funkcji jQuery ().
Metody zarządzania treścią elementów
Użytkownik może użyć szeregu funkcji dla "Line" i "To", ponieważ większość funkcji zwraca element, który jest w użyciu. W wielu metodach, takich jak html, jQuery używa tej samej nazwy metody zarówno dla pobierającego, jak i ustawiającego, rozróżniając jej argumenty. Na przykład html) zwraca innerHTML bez argumentów. Gotowy dokument jest powszechnie używany w jQuery, który zapewnia skróconą pozycję zapisaną jako $ (function () {}). Rodzaje zarządzania treścią dla wybranego elementu:
html () - pobierz innerHTML;
html (value) - set innerHTML;
append (value) - dodaje innerHTML na koniec;
prepend (value) - add before innerHTML;
before (element) - dodaj element przed bieżącym elementem;
after (element) - dodaj element za bieżącym elementem;
addClass (wartość), removeClass (wartość), toggleClass (wartość) - dodawanie, usuwanie lub przełączanie wartości klasy atrybutów.
JQuery tworzy automatyczną funkcję cykliczną "Linia?" I "na?", Na przykład, $ ("p") wybiera wszystkie elementy. $ ('p'). append () stosuje append () do każdego z wybranych elementów w niejawnej pętli.
Użytkownik może również użyć jawnej pętli przez .each (function () {}) (Line? To?) Jeśli musi zastosować wiele operacji do wybranych elementów. Inside .each - $ (this) oznacza element podczas pracy.
Przykład przetwarzania zdarzeń
W tym przykładziepokazuje, jak zaprogramować obsługę zdarzeń dla działań użytkownika. Większość kodów jQuery ma do czynienia z programami obsługi zdarzeń dla wybranych elementów.
Przykład ilustruje selektor jQuery i wbudowane funkcje.
Procedura:
Wybierz źródło za pomocą odpowiedniego selektora jQuery.
Zdefiniuj zdarzenie, na przykład kliknięcie myszą, typ klucza.
Napisz program obsługi zdarzeń i dołącz do źródła.
Możesz dołączyć procedurę obsługi zdarzeń do javascript, na przykład kliknąć, przesunąć kursor myszy i przesłać do elementu za pomocą metod jQuery.
Wewnątrz funkcji $ (this) odnosi się do bieżącego obiektu. Chociaż $ (p) zwraca elementy w tablicy, możesz użyć tej samej składni, aby powiązać obsługę zdarzeń z KAŻDYMI elementami. Poprzednio obsługa zdarzeń javascript była umieszczana w znacznikach HTML. Obecnie należy pozostawić je poza znacznikami HTML i pogrupować je w sekcji, aby uzyskać lepszy projekt MVC.
Kod żądania i odpowiedzi AJAX
Kontynuacja procesu:
W celu sprawdzenia danych funkcja sukcesu Ajax, uruchom skrypt serwera WWW, na przykład Apache: $ (: submit) selektor wybiera wszystkie $ (: tekst [name = "message"]) select można użyć $ .ajax (), aby wysłać Zapytanie Ajax:
ajax () przyjmuje asocjacyjną tablicę jako argument (pary klucz-wartość);
typ określa metodę żądania, na przykład: get lub post, dla Ajax po sukcesie;
url domyślnie określa adres URL akcji, bieżący dokument;
Dane udostępniają ciąg zapytania w formularzutablica asocjacyjna;
.done () odsyła po otrzymaniu odpowiedzi na kod stanu 200 (OK). Argument wymaga funkcji odpowiedzi HTTP;
.fail () odsyła odpowiedź, gdy odbierana jest odpowiedź na kod statusu NO 200 (OK);
. Always () odsyła po zakończeniu .done i .fail. Jako argument akceptuje funkcję no-arg.
podstawy rozszerzenia javascript
jQuery to rozszerzenie javascript, które jest łatwe do zrozumienia, jeśli użytkownik ma javascript. Po prostu musi śledzić niektóre operacje jQuery za pomocą narzędzi Firebug lub Web Developer. Interfejs API jQuery jest dostępny na stronie programisty. W jQuery operacje są umieszczane w handlerunder, który jest uruchamiany po utworzeniu drzewa DOM, ale przed załadowaniem zewnętrznych zasobów, takich jak obrazy, równoważne umieszczeniu skryptów jQuery bezpośrednio przed zamykającym tagiem. Jest to bardziej wydajne niż obsługa javascript. Ponadto możesz użyć kilku do zarejestrowania kilku programów obsługi, które będą wykonywane w kolejności, w jakiej zostały zarejestrowane. javascript może być użyty tylko raz: $ (document) .ready (handler) onloadwindow.onload = handler.ready () window.onload = handler Przyjmuje argument, który jest najczęściej anonimową funkcją lub określoną funkcją. Funkcja nie ma argumentów.
Jest tak powszechnie używany, że istnieje skrót. $ (Document) .ready (handler) $ (handler).
Iteracja za pomocą wybranych elementów
Selektor jQuery może wybrać elementy zerowe lub DOM. Wybrane elementy są zawijane wewnątrz obiektu, na przykład ,itd. Możesz wykonać iterację dla każdego z tych elementów:
Implicit iteration za pomocą funkcji append () dla każdego z wybranych elementów w niejawnej pętli.
Jawna iteracja za pomocą .each (funkcja).
$ (this).
Załóżmy, że użytkownik chce zastosować serię operacji do każdego z wybranych elementów, może użyć iteracji z wybranymi elementami. Przyjmuje argument jako argument, który może być anonimowy, rozwiązany lub funkcja zmiennej. Wewnątrz funkcji możesz użyć łącza do elementu w pracy: .each (function) .each () $ (this). Ponadto $ (this) odnosi się do kontrolowanego obiektu jQuery, może również użyć tego, który odwołuje się do używanego elementu DOM. To jest: $ (this)=== this I może stosować metody JQuery, takie jak .append (), .html () do $ (this), ale nie to. Z drugiej strony może zastosować DOM tę operację, na przykład this.id.substring (05), co oznacza pierwsze pięć znaków atrybutu atrybutu DOM w procesie.
Pisanie Ajax za pomocą jQuery
Domyślne żądanie Ajax jest asynchroniczne. Innymi słowy, .ajax () zostanie zwolniony, skrypt nie będzie czekać na odpowiedź, ale przejdzie do poniższej instrukcji, aby nie blokować ani nie zamykać ekranu. Użytkownik może napisać Ajax Success Json przy użyciu nieprzetworzonego javascript. Jednak jQuery ułatwia to ustawienie wartości $ .Ajax lub $ .ajax URL. Te ustawienia są przedmiotem par klucz-wartość. Często używane klucze: adres URL żądania, który można umieścić poza ustawieniami ostatniego formularza.
Wpisz - GET lub POST.
Sukces danych Ajax - pyta parametry (nazwa = parywartości) i wyrażone jako obiekt, na przykład {nazwa: "peter", msg: "cześć"} lub ciąg zapytania "name = peter & msg = hello".
Typ danych to oczekiwany typ danych odpowiedzi, taki jak tekst, xml, json, skrypt lub html.
Nagłówki to obiekt dla par klucz-wartość nagłówka zapytania.
Kontrola serwera dla żądania Ajax Success php ma nagłówek "X-Requested-With: XMLHttpRequest". Program serwera może sprawdzić, czy Ajax pojawia się poprzez ten nagłówek, na przykład w PHP.
Problemy z bezpieczeństwem
Aby zapobiec atakom XSS (Cross-Site Scripting), obiekt XMLHttpRequest może żądać danych z serwera źródłowego obsługującego stronę. Podczas pobierania skryptu należy zachować ostrożność. Element HTML $ pobiera dane z serwera i umieszcza zwrócony kod HTML w uzgodnionym elemencie. Jest to najprostsza metoda Ajax do pobierania danych z serwera. Oto przykład dla żądania funkcji Ajax Success na serwerze HTTP dla zwykłego tekstu. W tym przykładzie używamy Ajax do wysyłania żądania POST asynchronicznie, aby zażądać pliku tekstowego.
To jest tekst odpowiedzi na żądanie Ajax:
Ten przykład działa pod serwerem HTTP (na przykład Apache), ponieważ wysyła żądanie HTTP, które będzie używane jako wypełniacz dla tekstu odpowiedzi. Zawiera również hiperłącze do uruchomienia zapytania Ajax (przez loadAjaxText ()). Żądanie Ajax z parametrami POST dla serwera PHP-HTTP, aby uzyskać dynamiczną odpowiedź.
Kod HTML klienta zawiera dwa "c" odpowiednio dla wejścia i wyjścia. Zawiera również hiperłącze do uruchomienia żądania php Ajax Success (za pośrednictwem javascript loadText ()).
Uzyskano wyniki skryptuProces asynchronicznej wymiany danych z serwera WWW za pomocą javascriptu potwierdza, że nawet bez aktualizacji strony aplikacji WWW, działają one szybko i sprawnie. Aplikacje, sieć Web stosuje model żądania lub odpowiedzi z serwera HTML, uzyskując pełną stronę. W rezultacie użytkownik otrzymuje wynik po kliknięciu przycisku i oczekiwaniu na odpowiedź serwera, ponownie naciskając i czekając na odpowiedź. Ajax wykonuje operacje żądania /odpowiedzi, nie wymaga od użytkowników czekania na odpowiedzi z serwera.
