Jquery ajax zamieszcza przykładowe parametry danych. Ustawianie adresu URL żądania

jQuery.ajax() - wysyła żądanie do serwera bez ponownego ładowania strony. Jest to metoda niskiego poziomu, która ma duża ilość ustawienia. Leży u podstaw działania wszystkich ajaxów, które często są łatwiejsze do zrozumienia i użycia, ale nadal zapewniają ograniczoną funkcjonalność w porównaniu z tą metodą.

$.ajax() zwraca obiekt XMLHttpRequest. W większości przypadków nie będziesz musiał pracować bezpośrednio z tym obiektem, ale jest on nadal dostępny w przypadku konieczności ręcznego przerwania żądania.

Do funkcji $.ajax() przekazywany jest obiekt składający się z par klucz/wartość, które służą do inicjowania żądania i zarządzania nim.

Żądanie Ajax ma dwa zastosowania:

jQuery.ajax(url [, ustawienia ])

Jedyną różnicą w stosunku do poprzedniej wersji metody jest to, że właściwość url jest tutaj częścią ustawień, a nie osobnym parametrem.

Lista ustawień

akceptuje (domyślnie: zależy od typu danych)
Typ: obiekt.
Po złożeniu żądania nagłówki wskazują dozwolone typy zawartości oczekiwane od serwera. Wartości tych typów zostaną pobrane z parametru Accepts. Na przykład poniższy przykład określa prawidłowe typy niestandardowe:

$.ajax((akceptuje: ( mycustomtype: "application/x-some-custom-type" ), konwertery: ( "text mycustomtype": funkcja (wynik) (zwróć nowy wynik; ) ), dataType: "mycustomtype" ));

$. ajax ((

akceptuje: (

mycustomtype: „aplikacja/x-some-type-custom”

konwertery: (

„text mójtypniestandardowy”: funkcja (wynik) (

zwróć nowy wynik;

typ danych: „mycustomtype”

} ) ;

async (domyślnie: prawda)
Typ: logiczny.
Domyślnie wszystkie żądania wysyłane są asynchronicznie (czyli po wysłaniu żądania do serwera strona nie przestaje działać w oczekiwaniu na odpowiedź). Jeśli chcesz wysyłać żądania synchronicznie, ustaw tę opcję na wartość false. Nie można wykonywać żądań międzydomenowych ani „jsonp”. tryb synchroniczny. Należy pamiętać, że żądania synchroniczne mogą blokować przeglądarkę podczas wykonywania żądania.

przed wysłaniem (jqXHR, ustawienia)
Typ: funkcja.
Zawiera funkcję, która zostanie wywołana bezpośrednio przed wysłaniem żądania ajax do serwera. Funkcja ta może być przydatna przy modyfikacji obiektu jqXHR (we wcześniejszych wersjach biblioteki (do 1.5) zamiast jqXHR używany był XMLHttpRequest). Na przykład możesz zmienić/określić niezbędne nagłówki itp. Obiekt jqXHR zostanie przekazany do funkcji jako pierwszy argument. Drugi argument to ustawienia żądania.
beforeSend odnosi się do zdarzeń ajax. Dlatego jeśli określona w nim funkcja zwróci false, żądanie ajax zostanie anulowane.Począwszy od jQuery-1.5, beforeSend jest wywoływane niezależnie od typu żądania.

pamięć podręczna (domyślnie: prawda, fałsz dla typu danych „script” i „jsonp”)
Typ: logiczny.
jeśli chcesz, aby przeglądarka nie buforowała wysyłanego żądania, ustaw ten parametr na false. Należy pamiętać, że jeśli parametr ma wartość false, do adresu URL zostanie dodana linia „_=”.

ukończone(jqXHR, stan tekstu)
Typ: funkcja.
Funkcja wykonywana za każdym razem, gdy kończy się żądanie AJAX (po zakończeniu sukcesu i błędu). Do funkcji przekazywane są dwa parametry: jqXHR (we wcześniejszych wersjach biblioteki (do 1.5) zamiast jqXHR używany jest XMLHttpRequest) oraz status wykonania żądania (wartość stringu: „success”, „notmodified”, „error”, „przekroczenie limitu czasu”, „przerwanie” lub „błąd parsera”).
Począwszy od jQuery-1.5, do całego parametru można przekazywać tablicę funkcji, a nie tylko jedną funkcję. Wszystkie funkcje zostaną wywołane w kolejności, w jakiej zostały określone w tej tablicy.

zawartość
Typ: obiekt.
Parametr pojawił się w jQuery-1.5, jest określony przez obiekt w formacie (string:wyrażenie regularne) i określa, w jaki sposób jQuery będzie analizować odpowiedź z serwera, w zależności od jej typu.

Typ zawartości
Typ: wartość logiczna lub ciąg.
Podczas wysyłania żądania do serwera dane przesyłane są w formacie określonym w contentType. Wartość domyślna to „application/x-www-form-urlencoded; charset=UTF-8’, który jest odpowiedni w większości przypadków. Jeśli wyraźnie określisz ten parametr, zostanie on wysłany na serwer (nawet jeśli nie zostały tam przesłane żadne dane).
W jQuery-1.6 możesz przekazać false, aby nie ustawiać tytułu.

kontekst
Typ: obiekt.
Obiekt, który po zakończeniu żądania stanie się kontekstem (wartość przekazywana do tej zmiennej). Na przykład, jeśli jako kontekst określisz element DOM, wszystkie procedury obsługi żądań ajax zostaną również wykonane w kontekście tego elementu DOM. W w tym przykładzie słowo kluczowe będzie to zawierać document.body:

$.ajax((url: "test.html", kontekst: dokument.body )).done(function() ( $(this).addClass("gotowe"); ));

$. ajax ((

adres URL: "test.html" ,

kontekst: dokument. ciało

) ) . gotowe(funkcja()(

$(to). addClass("gotowe");

} ) ;

konwertery (domyślnie: („*text”: window.String, „text html”: true, „text json”: jQuery.parseJSON, „text xml”: jQuery.parseXML))
Typ: obiekt.
Parametr pojawił się w jQuery-1.5. Określa, które funkcje zostaną użyte do konwersji wartości z jednego typu na inny.

crossDomain (domyślnie: false dla tej samej domeny, true dla żądań między domenami)
Typ: logiczny.
Ta opcja została wprowadzona w jQuery 1.5. Jeśli chcesz wykonać żądanie między domenami (na przykład JSONP) w tej samej domenie, ustaw ustawienie crossDomain na true. Umożliwia to np. przekierowanie serwera na inną domenę.

dane
Typ: obiekt, ciąg znaków lub tablica.
Dane, które zostaną przesłane na serwer. Jeśli dane nie są ciągiem, są konwertowane na ciąg zapytania. Na prośby typu Otrzymać dane są dołączone do adresu URL. Obiekt musi składać się z par klucz/wartość. Jeśli wartością jest tablica, to jQuery porządkuje wartości w zależności od tradycyjnego ustawienia. Domyślnie, na przykład (foo:["bar1", "bar2"]) staje się &foo=bar1&foo=bar2 .

dataFilter(dane, typ)
Typ: funkcja.
Funkcja, która będzie wstępnie przetwarzać dane przesyłane przez serwer, tj. powinien działać jak filtr i zwracać oczyszczony ciąg. Do tej funkcji przekazywane są dwa parametry: wspomniane dane i wartość parametru typ danych. Funkcja określona w dataFilter musi zwracać przetworzone dane.

dataType (domyślnie: wykrywany automatycznie (xml, json, script lub html))
Typ: ciąg.
Typ danych, w jakim oczekiwana jest odpowiedź z serwera. Jeśli nie jest ustawiony, jQuery spróbuje określić to automatycznie, korzystając z MIME otrzymanego z serwera.

błąd
Typ: funkcja
Funkcja, która zostanie wywołana, jeśli żądanie wysłane do serwera nie powiedzie się. Wyposażony jest w trzy parametry: jqXHR (do czasu użycia XMLHttpRequest w wersji 1.5), ciąg znaków opisujący błąd, który wystąpił, a także obiekt wyjątku, jeśli taki wystąpił. Możliwe wartości drugiego argumentu to „timeout”, „error”, „notmodified” i „parsererror” (w nieoczekiwanych przypadkach może zostać zwrócona wartość null). Od wersji jQuery-1.5 ten parametr może akceptować pojedynczą funkcję lub tablicę funkcji.
Zdarzenie błędu nie występuje, gdy typ danych jest równy skryptowi lub JSONP.

globalny (domyślnie: prawda)
Typ: logiczny.
Odpowiedzialny za działanie globalnych zdarzeń żądań ajax (na przykład ajaxStart lub ajaxStop). Jeśli ustawisz ten parametr na false , zdarzenia globalne dla tego żądania nie zostaną wywołane.

nagłówki
Typ: obiekt.
Parametr pojawił się w jQuery 1.5. Tutaj możesz określić dodatkowe nagłówki żądań. Wartości dla tego ustawienia zostaną wprowadzone przed wywołaniem funkcji beforeSend, gdzie będzie można dokonać ostatecznych zmian w nagłówkach.

jeśliZmodyfikowano
Typ: logiczny.
Gdy to ustawienie jest ustawione na true , żądanie zostanie wykonane ze statusem „pomyślne” tylko wtedy, gdy odpowiedź z serwera będzie się różnić od poprzedniej. jQuery sprawdza ten fakt, patrząc na nagłówek Last-Modified. Od jQuery-1.4 oprócz Last-Modified sprawdzany jest także 'etag' (oba są dostarczane przez serwer i są niezbędne, aby powiadomić przeglądarkę, że żądane dane z serwera nie zostały zmienione w stosunku do poprzedniego żądania) .

jestLokalny
Typ: logiczny.
Opcja ta została wprowadzona w jQuery 1.5.1. Umożliwia ustawienie statusu źródła strony na lokalne (tak jakby było włączone protokół pliku), nawet jeśli jQuery rozpoznał to inaczej. Biblioteka decyduje o tym, że strona działa lokalnie w przypadku protokołów: plikowy, *-rozszerzenie i widget.Wartość parametru isLocal zaleca się ustawić globalnie - przy pomocy funkcji $.ajaxSetup(), a nie w ustawieniach poszczególnych żądań ajax.

jsonp
Typ: ciąg znaków lub wartość logiczna.
Definiuje nazwę parametru dodawanego do adresu URL żądania JSONP (domyślnie używane jest „callback”). Na przykład ustawienie (jsonp:"onJSONPLoad") jest konwertowane na część adresu URL ciągu "onJSONPLoad=?" . Od wersji 1.5 określenie false w tym parametrze uniemożliwia dodanie do adresu URL dodatkowy parametr. W takim przypadku musisz ustawić wartość ustawienia jsonpCallback. Na przykład: (jsonp:false, jsonpCallback:"callbackName") .

jsonpOddzwonienie
Typ: ciąg znaków lub funkcja.
Definiuje nazwę funkcji, która zostanie wywołana, gdy serwer odpowie na żądanie Jsonp. Domyślnie jQuery generuje dla tej funkcji niestandardową nazwę, co jest preferowaną opcją upraszczającą pracę biblioteki. Jeden z powodów, dla którego warto wskazać własną funkcję przetwarzanie żądania jsonp ma na celu poprawę buforowania żądań GET.
Począwszy od jQuery-1.5, w tym parametrze można określić funkcję, aby samodzielnie obsłużyć odpowiedź serwera. W takim przypadku określona funkcja musi zwracać dane otrzymane z serwera (w formacie określoną funkcję będą one dostępne w pierwszym parametrze).

metoda (domyślnie: „GET”)
Typ: ciąg.
Parametr pojawił się w jQuery-1.9.0. Pozwala określić typ żądania do serwera („POST”, „GET”, „PUT”)

Typ MIME
Typ: ciąg.
Parametr pojawił się w jQuery-1.5.1. W tym polu możesz określić typ danych w jakim oczekiwana jest odpowiedź z serwera zamiast XHR

hasło
Typ: ciąg.
Hasło do uwierzytelnienia na serwerze, jeśli jest wymagane.

ProcessData (domyślnie true)
Typ: logiczny.
Domyślnie dane przesyłane do serwera są konwertowane z obiektu na ciąg zapytania (format adresu URL: fName1=wartość1&fName2=wartość2&...) i wysyłane jako "application/x-www-form-urlencoded" . Jeśli chcesz wysłać dokument DOM lub inne dane, których nie można przekonwertować, ustaw opcję ProcessData na false .

skryptCharset
Typ: ciąg.
Dotyczy tylko Żądania Ajax GET, typ danych może mieć wartość „jsonp” lub „script”. Jeśli serwer w domenie strony trzeciej używa kodowania innego niż Twoje, musisz określić kodowanie serwera strony trzeciej.

Kod statusu
Typ: obiekt.
Parametr pojawił się w jQuery-1.5.0. Zbiór par, w których kody wykonania żądania są powiązane z funkcjami, które zostaną wywołane. Przykładowo dla kodu 404 (strony nie istnieją) możesz wyświetlić na ekranie komunikat:

$.ajax((kod statusu: ( 404: funkcja() ( alert("nie znaleziono strony"); ) ) ));

$. ajax ((

Kod statusu: (

404 : funkcja () (

alert („nie znaleziono strony”);

} ) ;

Jeśli żądanie się powiodło, to jako parametr funkcja anonimowa przyjmie te same parametry, co funkcje obsługi dla pomyślnej realizacji żądania (określone w parametrze sukcesu), a w przypadku błędu te same parametry, co w przypadku błędu Funkcje.

sukces(dane, stan tekstu, jqXHR)
Typ: funkcja, tablica.
Funkcja, która zostanie wywołana, jeśli żądanie skierowane do serwera zakończy się pomyślnie. Przyjmuje 3 argumenty:

dane przesyłane przez serwer i wstępnie przetwarzane;
string ze statusem wykonania (textStatus);
obiekt jqXHR (w wersjach wcześniejszych niż 1.5 zamiast jqXHR używany jest obiekt XMLHttpRequest). Od wersji jQuery 1.5 zamiast pojedynczej funkcji ten parametr może akceptować tablicę funkcji.

koniec czasu
Typ: liczba.
Czas oczekiwania na odpowiedź z serwera w milisekundach. Przepisuje ustawienia globalne ten sam parametr w $.ajaxSetup(). W przypadku przekroczenia tego czasu żądanie zostanie zakończone błędem i nastąpi zdarzenie błędu, które będzie miało status „timeout”.
Czas liczony jest od momentu wywołania funkcji $.ajax. Może się zdarzyć, że w tym momencie będzie uruchomionych kilka innych żądań i przeglądarka opóźni realizację bieżącego żądania. W takim przypadku może upłynąć limit czasu, mimo że w rzeczywistości żądanie nie zostało jeszcze rozpoczęte.
W jQuery 1.4 i wcześniejszych wersjach, gdy obiekt XMLHttpRequest upłynie, przejdzie on w stan błędu i dostęp do jego pól może spowodować wyjątek. W przeglądarce Firefox 3.0 lub nowszej żądania skryptowe i JSONP nie zostaną przerwane po przekroczeniu limitu czasu. Zostaną one zrealizowane nawet po upływie tego czasu.

tradycyjny
Typ: logiczny.
Ustaw ten parametr na true, aby użyć tradycyjnych opcji konwersji (serializacji).

wpisz (domyślnie: „GET”)
Typ: ciąg.
Podobny do parametru metody. Parametr jest używany w jQuery w wersjach wcześniejszych niż 1.9.0

url (domyślnie: adres bieżącej strony)
Typ: ciąg.
Określa adres, na który zostanie wysłane żądanie.

nazwa użytkownika
Typ: ciąg.
Nazwa użytkownika do uwierzytelnienia na serwerze, jeśli jest to wymagane.

xhr (domyślnie: ActiveXObject w IE, XMLHttpRequest w innych przeglądarkach)
Typ: funkcja.
Funkcja udostępniająca obiekt XMLHttpRequest. Domyślnie dla przeglądarek IE obiektem tym jest ActiveXObject, a w pozostałych przypadkach XMLHttpRequest. Dzięki tej opcji możesz zaimplementować własną wersję tego obiektu.

Pola xhr
Typ: obiekt.
Parametr pojawił się w jQuery-1.5.1 Zestaw par (nazwa: wartość) służących do zmiany/dodania wartości odpowiednich pól obiektu XMLHttpRequest. Na przykład możesz ustawić jego właściwość withCredentials na true podczas wykonywania żądania między domenami:

$.ajax((url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ));

$. ajax ((

adres URL: a_cross_domain_url,

Pola xhr :(

z poświadczeniami: prawda

} ) ;

Jak wspomniano powyżej, $.ajax() jest najbardziej podstawową metodą, a wszystkie kolejne metody są po prostu opakowaniami. Bardzo często nie ma potrzeby wywoływania tej funkcji, ponieważ jest więcej alternatyw wysoki poziom, takie jak , i . Są łatwiejsze do zrozumienia i użycia, chociaż $.ajax() jest rozwiązaniem bardziej elastycznym.

Najprostszym przypadkiem użycia byłoby wywołanie $.ajax() bez określania parametrów:

$. ajaks();

Obsługa zdarzeń

Ustawienia beforeSend, error, dataFilter, Success i Complete umożliwiają ustawienie procedur obsługi zdarzeń występujących w pewne momenty wykonanie każdego żądania ajax.

beforeSend następuje bezpośrednio przed wysłaniem żądania do serwera;
błąd występuje, jeśli żądanie nie powiedzie się;
dataFilter występuje, gdy dane docierają z serwera. Umożliwia przetwarzanie „surowych” danych przesyłanych przez serwer;
sukces ma miejsce, jeśli żądanie zakończy się pomyślnie;
Complete występuje po zakończeniu żądania.

alert("Dane zostały wysłane pomyślnie." );

} ) ;

Uwaga! Omówione powyżej ustawienia .success(), .error() i .complete() zostały dodane do jQuery-1.5 jako dodatek do standardowych metod .done(), .fail() i .then() dla odroczonego obiektu, które można użyć do ustawienia procedur obsługi, jednak począwszy od jQuery-1.8 te trzy metody staną się przestarzałe.

Funkcja $.ajax() dowiaduje się o rodzaju danych wysyłanych przez serwer z samego serwera (poprzez MIME). Ponadto istnieje możliwość osobistego wskazania (doprecyzowania), w jaki sposób dane te należy interpretować. Odbywa się to za pomocą parametru dataType. Możliwe wartości tego parametru:

„xml” – powstały dokument XML będzie dostępny w formularz tekstowy. Można z nim pracować za pomocą standardowych narzędzi jQuery (a także z dokumentem HTML).
„html” – powstały HTML będzie dostępny w formie tekstowej. Jeśli zawiera skrypty w tagach, to zostaną one automatycznie wykonane dopiero po umieszczeniu tekstu HTML w DOM.
„skrypt” - odebrane dane zostaną wykonane w formacie JavaScript. Zmienne, które zazwyczaj zawierają odpowiedź z serwera, będą zawierać obiekt jqXHR.
„json”, „jsonp” - otrzymane dane zostaną wstępnie skonwertowane na obiekt javascript. Jeśli analizowanie nie powiedzie się (co może się zdarzyć, jeśli plik json zawiera błędy), zostanie zgłoszony wyjątek błędu analizy pliku. Jeśli serwer, do którego uzyskujesz dostęp, znajduje się w innej domenie, zamiast json należy użyć jsonp.
„tekst” – otrzymane dane będą dostępne w postaci zwykłego tekstu, bez wstępnego przetwarzania.

Domyślnie żądanie do serwera realizowane jest metodą HTTP GET. W razie potrzeby złóż wniosek Metoda POST, musisz określić odpowiednią wartość w ustawieniu typu. Dane przesłane metodą POST zostaną skonwertowane do formatu UTF-8, jeśli są w innym kodowaniu, zgodnie z wymaganiami standardu W3C XMLHTTPRequest.

Parametr danych można określić albo jako ciąg znaków w formacie klucz1=wartość1&klucz2=wartość2 (format przesyłania danych w adresie URL), albo jako obiekt ze zbiorem par (nazwa:wartość) - (klucz1: „wartość1”, klucz2: „wartość2”). W tym drugim przypadku przed wysłaniem danych jQuery dokonuje konwersji dany przedmiot do łańcucha za pomocą $.param(). Jednak tę konwersję można odwrócić, ustawiając ustawienie ProcessData na wartość false. Konwersja na ciąg znaków jest niepożądana np. w przypadku wysyłania obiektu xml na serwer. W takim przypadku zaleca się zmianę ustawienia contentType

adres URL: "test.php" ,

sukces: funkcja (dane) (

alert("Otrzymane dane: " + dane ) ;

} ) ;

Wysyła żądanie do serwera bez ponownego ładowania strony. Jest to metoda niskiego poziomu z wieloma ustawieniami. Leży u podstaw działania wszystkich innych metod ajax. Ma dwie możliwości użycia:

url — adres żądania.
ustawienia - w tym parametrze możesz określić ustawienia dla tego żądania. Określane przy użyciu obiektu w formacie (nazwa:wartość, nazwa:wartość...) . Żadne ustawienia nie są wymagane. Ustawienia domyślne można ustawić za pomocą metody $.ajaxSetup().

Lista ustawień

↓ nazwa :typ (wartość domyślna)

Po złożeniu żądania nagłówki wskazują dozwolone typy zawartości oczekiwane od serwera. Wartości tych typów zostaną pobrane z parametru Accepts.

Domyślnie wszystkie żądania bez przeładowania strony odbywają się asynchronicznie (czyli po wysłaniu żądania do serwera strona nie przestaje działać w oczekiwaniu na odpowiedź). Jeśli chcesz wykonać żądanie synchronicznie, ustaw parametr na false . Żądań międzydomenowych i „jsonp” nie można wykonywać w trybie synchronicznym.

Należy pamiętać, że wykonywanie żądań w trybie synchronicznym może skutkować zablokowaniem strony do czasu całkowitego zakończenia żądania.

Pole to zawiera funkcję, która zostanie wywołana bezpośrednio przed wysłaniem żądania ajax do serwera. Funkcja ta może być przydatna przy modyfikacji obiektu jqXHR (we wcześniejszych wersjach biblioteki (do 1.5) zamiast jqXHR używany był XMLHttpRequest). Na przykład możesz zmienić/określić niezbędne nagłówki itp. Obiekt jqXHR zostanie przekazany do funkcji jako pierwszy argument. Drugi argument to ustawienia żądania.

W tym polu możesz określić dodatkowe nagłówki żądań. Zmiany te zostaną wprowadzone przed wywołaniem beforeSend, w którym można dokonać ostatecznej edycji nagłówka.

Gdy to ustawienie jest ustawione na true , żądanie zostanie wykonane ze statusem „pomyślne” tylko wtedy, gdy odpowiedź z serwera będzie się różnić od poprzedniej. jQuery sprawdza ten fakt, patrząc na nagłówek Last-Modified. Od jQuery-1.4 oprócz Last-Modified sprawdzany jest także "etag" (oba są dostarczane przez serwer i są niezbędne, aby powiadomić przeglądarkę, że żądane dane z serwera nie zostały zmienione w stosunku do poprzedniego żądania) .

Umożliwia ustawienie statusu źródła strony na lokalny (tak jakby było to za pośrednictwem protokołu pliku), nawet jeśli jQuery rozpozna to w inny sposób. Biblioteka decyduje, że strona działa lokalnie w przypadku następujących protokołów: plikowy, *-rozszerzenie i widget.

Zalecane jest ustawienie wartości parametru jestLokalny globalnie - za pomocą funkcji $.ajaxSetup(), a nie w ustawieniach poszczególnych żądań ajax.

Definiuje nazwę parametru, który jest dodawany do adresu URL podczas żądania jsonp (domyślnie używane jest „callback” - „http://siteName.ru?callback=…”).

Od wersji jQuery-1.5 ustawienie tego parametru na false uniemożliwi dodanie dodatkowego parametru do adresu URL. W takim przypadku należy jawnie ustawić wartość właściwości jsonpCallback. Na przykład: (jsonp:false, jsonpCallback:"callbackName") .

Definiuje nazwę funkcji, która zostanie wywołana, gdy serwer odpowie na żądanie jsonp. Domyślnie jQuery generuje dla tej funkcji niestandardową nazwę, co jest preferowaną opcją upraszczającą pracę biblioteki. Jednym z powodów, dla których warto określić własną funkcję przetwarzania żądań jsonp, jest usprawnienie buforowania żądań GET.

Począwszy od jQuery-1.5, w tym parametrze można określić funkcję, aby samodzielnie obsłużyć odpowiedź serwera. W tym przypadku określona funkcja musi zwracać dane odebrane z serwera (w podanej funkcji będzie ona dostępna w pierwszym parametrze).

Domyślnie wszystkie dane przesyłane do serwera są wstępnie konwertowane na ciąg znaków (format adresu URL: fName1=wartość1&fName2=wartość2&...) odpowiadający "application/x-www-form-urlencoded". Jeżeli zachodzi potrzeba przesłania danych, które nie mogą zostać poddane takiemu przetwarzaniu (np. dokument DOM), to należy wyłączyć opcję ProcessData.

Ten parametr jest używany w przypadku żądań ajax między domenami typu GET, typ danych może mieć wartość „jsonp” lub „script”. Określa kodowanie, w jakim zostanie wykonane żądanie międzydomenowe. Jest to konieczne, jeśli serwer w domenie zagranicznej używa kodowania innego niż kodowanie na serwerze domeny rodzimej.

(To ustawienie zostało wprowadzone w jQuery-1.5) zestaw par, w których kody wykonania żądania są powiązane z funkcjami, które zostaną wywołane. Przykładowo dla kodu 404 (strony nie istnieją) możesz wyświetlić na ekranie komunikat:

$.ajax ((kod statusu: ( 404 : funkcja () ( alert ( "Nie znaleziono strony" ) ; ) ) ) ;

Funkcje, które odpowiadają na kody sukcesu żądań, otrzymają te same argumenty, co funkcje obsługi żądań zakończone sukcesem (określone w parametrze sukcesu), a funkcje odpowiadające na kody błędów będą takie same, jak funkcje błędów.

Funkcja, która zostanie wywołana, jeśli żądanie skierowane do serwera zakończy się pomyślnie. Przekazane zostaną trzy parametry: dane przesłane przez serwer i już wstępnie przetworzone (co jest różne dla różnych typów danych). Drugi parametr to string ze statusem wykonania. Trzeci parametr zawiera obiekt jqXHR (we wcześniejszych wersjach biblioteki (do 1.5) zamiast jqXHR używany był XMLHttpRequest). Od wersji jQuery-1.5 zamiast pojedynczej funkcji parametr ten może przyjmować tablicę funkcji.

Czas oczekiwania na odpowiedź z serwera. Ustawiane w milisekundach. W przypadku przekroczenia tego czasu żądanie zostanie zakończone błędem i nastąpi zdarzenie błędu (patrz opis powyżej), które będzie miało status „timeout”.

Czas liczony jest od momentu wywołania funkcji $.ajax. Może się zdarzyć, że w tym momencie będzie uruchomionych kilka innych żądań i przeglądarka opóźni realizację bieżącego żądania. W tym przypadku koniec czasu może zostać ukończone, chociaż w rzeczywistości żądanie nie zostało jeszcze rozpoczęte.

W jQuery 1.4 i wcześniejszych wersjach, gdy obiekt XMLHttpRequest upłynie, przejdzie on w stan błędu i dostęp do jego pól może spowodować wyjątek. W przeglądarce Firefox 3.0 lub nowszej żądania skryptowe i JSONP nie zostaną przerwane po przekroczeniu limitu czasu. Zostaną one zrealizowane nawet po upływie tego czasu.

Funkcja udostępniająca obiekt XMLHttpRequest. Domyślnie dla przeglądarek IE obiektem tym jest ActiveXObject, a w pozostałych przypadkach XMLHttpRequest. Dzięki tej opcji możesz zaimplementować własną wersję tego obiektu.

(To ustawienie zostało wprowadzone w jQuery-1.5.1) Zestaw par (nazwa:wartość) służących do zmiany/dodania wartości odpowiednich pól obiektu XMLHttpRequest. Na przykład możesz ustawić jego właściwość withCredentials na true podczas wykonywania żądania między domenami:

$.ajax (( url: a_cross_domain_url, xhrFields: ( withCredentials: true ) ) );

W jQuery 1.5 właściwość withCredentials nie jest obsługiwana przez natywny XMLHttpRequest i będzie ignorowana w żądaniach międzydomenowych. Zostało to naprawione we wszystkich kolejnych wersjach biblioteki.

Obsługa zdarzeń

Ustawienia beforeSend, error, dataFilter, Success i Complete (ich opis znajduje się w poprzedniej sekcji) pozwalają na ustawienie procedur obsługi zdarzeń, które występują w określonych momentach wykonania każdego żądania ajax.

przedWyślij następuje bezpośrednio przed wysłaniem żądania do serwera. błąd występuje, gdy żądanie nie powiedzie się. filtr danych występuje, gdy dane przychodzą z serwera. Umożliwia przetwarzanie „surowych” danych przesyłanych przez serwer. powodzenie następuje po pomyślnym zakończeniu żądania. kompletny następuje po zakończeniu żądania.

Prosty przykład użycia. Po pomyślnym zakończeniu żądania wyświetlimy komunikat:

$.ajax ((url: „ajax/test.html” , sukces: funkcja () ( alert („Wykonano ładowanie.” ) ; ) ) );

Począwszy od jQuery-1.5, metoda $.ajax() zwraca obiekt jqXHR, który między innymi implementuje interfejs odroczony, który pozwala określić dodatkowe procedury obsługi wykonania. Oprócz standardowych metod .done(), .fail() i .then() dla odroczonego obiektu, za pomocą których można zainstalować procedury obsługi, jqXHR implementuje .success(), .error() i .complete() . Odbywa się to w celu zachowania zgodności ze zwykłymi nazwami metod, za pomocą których instalowane są programy obsługi wykonujące żądania ajax. Jednak od wersji jQuery-1.8 te trzy metody staną się przestarzałe.

Niektóre typy żądań, takie jak żądania jsonp lub żądania GET między domenami, nie obsługują obiektów XMLHttpRequest. W tym przypadku XMLHttpRequest i textStatus przekazane do procedur obsługi będą zawierać wartość unknown .

Wewnątrz procedur obsługi zmienna this będzie zawierać wartość parametru kontekst. Jeżeli nie zostało to ustawione, będzie zawierać obiekt ustawień.

parametr typu danych

„xml”— powstały dokument XML będzie dostępny w formie tekstowej. Można z nim pracować za pomocą standardowych narzędzi jQuery (a także z dokumentem HTML). „html”— wynikowy kod HTML będzie dostępny w formie tekstowej. Jeśli zawiera skrypty w tagach, to zostaną one automatycznie wykonane dopiero po umieszczeniu tekstu HTML w DOM. "scenariusz"— otrzymane dane zostaną wykonane jako JavaScript. Zmienne, które zazwyczaj zawierają odpowiedź z serwera, będą zawierać obiekt jqXHR. „json”, „jsonp”— otrzymane dane zostaną wstępnie przekonwertowane na obiekt javascript. Jeśli analizowanie nie powiedzie się (co może się zdarzyć, jeśli plik json zawiera błędy), zostanie zgłoszony wyjątek błędu analizy pliku. Jeśli serwer, do którego uzyskujesz dostęp, znajduje się w innej domenie, zamiast json należy użyć jsonp. Możesz dowiedzieć się więcej o json i jsonp w Wikipedii. "tekst"— otrzymane dane będą dostępne w postaci zwykłego tekstu, bez wstępnego przetwarzania.

Notatka 1: Gdy żądanie zostanie wysłane do domeny innej firmy (co jest możliwe tylko przy typie danych równym jsonp lub skrypcie), procedury obsługi błędów i zdarzenia globalne nie zostaną uruchomione.

Uwaga 2: Typ danych określony w dataType nie może kolidować z informacjami MIME dostarczonymi przez serwer. Na przykład dane XML muszą być reprezentowane przez serwer jako tekst/xml lub aplikacja/xml. Jeśli to się nie powiedzie, jquery spróbuje przekonwertować otrzymane dane na określony typ (więcej na ten temat w dziale Konwertery).

Wysyłanie danych na serwer

Domyślnie żądanie do serwera realizowane jest metodą HTTP GET. Jeśli chcesz wysłać żądanie metodą POST, musisz podać odpowiednią wartość w ustawieniu typu. Dane przesłane metodą POST zostaną skonwertowane do formatu UTF-8, jeśli są w innym kodowaniu, zgodnie z wymaganiami standardu W3C XMLHTTPRequest.

Parametr danych można określić albo jako ciąg znaków w formacie klucz1=wartość1&klucz2=wartość2 (format przesyłania danych w adresie URL), albo jako obiekt ze zbiorem par (nazwa:wartość) - (klucz1: „wartość1”, klucz2: „wartość2”). W tym drugim przypadku jQuery przed wysłaniem danych konwertuje podany obiekt na string za pomocą $.param() . Jednak tę konwersję można odwrócić, ustawiając ustawienie ProcessData na false . Konwersja na ciąg znaków jest niepożądana np. w przypadku wysyłania obiektu xml na serwer. W takim przypadku zaleca się zmianę ustawienia contentType z application/x-www-form-urlencoded na bardziej odpowiedni typ MIME.

Komentarz: Większość przeglądarek nie zezwala na żądania Ajax dotyczące zasobów z domenami, subdomenami i protokołami innymi niż bieżący. Jednak to ograniczenie nie dotyczy żądań jsonp i skryptów.

Odbieranie danych z serwera

Dane odebrane z serwera mogą być dostarczone w formie stringu lub obiektu, w zależności od wartości parametru dataType (patrz dataType powyżej). Dane te są zawsze dostępne w pierwszym parametrze procedury obsługi żądania ajax:

$.ajax (( url: "jakiś.php" , sukces: funkcja (dane) ( alert ( "Dane zysku: " + dane ) ; ) ) );

Dla typów tekstowych i xml dane wysyłane przez serwer będą dostępne także w jqXHR, czyli odpowiednio w jego polach respondText lub respondXML.

Zaawansowane ustawienia

Używając parametru global, możesz wyłączyć wykonywanie procedur obsługi zdarzeń (.ajaxSend(), .ajaxError() itp.) dla poszczególnych żądań. Może to być przydatne na przykład, jeśli animacja ładowania jest uruchamiana/zatrzymywana w tych procedurach obsługi. Następnie, jeśli niektóre żądania są wykonywane bardzo często i szybko, przydatne będzie dla nich wyłączenie wykonywania procedur obsługi. W przypadku żądań skryptów międzydomenowych i żądań jsonp parametr global jest automatycznie wyłączany.

Jeśli do wysłania żądania do serwera wymagane są dane uwierzytelniające (login/hasło), możesz je określić w ustawieniach nazwy użytkownika i hasła żądania ajax.

Aby wykonać żądanie do serwera, potrzeba określony czas. Jeżeli w tym czasie serwer nie wyśle odpowiedzi, żądanie kończy się błędem (status „timeout”). Czas oczekiwania na odpowiedź z serwera można zmienić ustawiając wymaganą wartość (w milisekundach) w ustawieniu limitu czasu.

Może się zdarzyć, że kodowanie hosta różni się od kodowania pliku javascript żądanego w żądaniu ajax. W takich przypadkach konieczne jest określenie kodowania tego ostatniego w ustawieniu scriptCharset.

W większości przypadków żądanie Ajax następuje asynchronicznie, jednak w niektórych przypadkach może zaistnieć konieczność wykonania żądania sekwencyjnie (gdy dalsze wykonanie skryptu nie jest możliwe bez otrzymania odpowiedzi z serwera). Możesz sprawić, że żądanie będzie synchroniczne, jeśli wyłączysz ustawienie asynchronizacji. Warto jednak pamiętać, że w tym przypadku strona zawiesi się w oczekiwaniu na odpowiedź z serwera.

Przykłady użycia

Najprostszym przypadkiem użycia byłoby wywołanie $.ajax() bez określania parametrów:

$.ajax(); // żądanie GET zostanie wysłane do serwera na adres URL bieżącej strony bez podawania jakichkolwiek parametrów.

Jeśli chcesz załadować i uruchomić plik js, możesz to zrobić w ten sposób:

$.ajax ((typ: „GET”, adres URL: „test.js”, typ danych: „skrypt” ) );

Wyślijmy do serwera żądanie POST, podając dwa parametry i powiadamiając użytkownika o pomyślnym wykonaniu żądania:

$.ajax ((typ: "POST", adres URL: "some.php", dane: "name=John&location=Boston" , sukces: funkcja (msg) ( alert ("Dane dotarły: " + msg) ; ) ) ) ;

Zaktualizujmy zawartość żądanej strony HTML:

$.ajax ((url: "test.html" , pamięć podręczna: fałsz , sukces: funkcja (html) ( $("#results" ) .append (html) ; ) ) );

Zróbmy to żądanie synchroniczne do serwera. Podczas wykonywania żądania strona nie będzie reagować na działania użytkownika:

// zapisz dane wysłane z serwera do zmiennej HTML var html = $.ajax (( url: "some.php" , async: false ) ) .responseText ;

Jako parametr wyślemy na serwer obiekt xml. Aby przesłać go poprawnie należy anulować wstępną konwersję parametrów (processData:false). Określimy niestandardową funkcję handleResponse jako procedurę obsługi pomyślnego zakończenia żądania:

var xmlDocument = [utwórz dokument XML] ; $.ajax ((url: "page.php" , ProcessData: false , data: xmlDocument, Success: handleResponse ) );

Zaawansowane podejście

Począwszy od jQuery 1.5, istnieją trzy nowe wskazówki, które pozwalają na jeszcze głębsze wykorzystanie $.ajax(). Pierwszy z nich (Prefiltry) pozwala na wykonanie dodatkowych manipulacji bezpośrednio przed wysłaniem żądania. Dzięki drugiemu podejściu (Konwertery) możesz powiedzieć jQuery, jak konwertować dane otrzymane z serwera, jeśli nie pasują one do oczekiwanego formatu. Trzecie podejście (Transporty) to najniższy poziom, który pozwala na samodzielne zorganizowanie żądania do serwera.

Filtry wstępne

To podejście polega na skonfigurowaniu procedury obsługi, która jest wywoływana przed wykonaniem każdego żądania ajax. Ta procedura obsługi poprzedza wykonanie wszelkich innych procedur obsługi ajax. Instaluje się go za pomocą funkcji $.ajaxPrefilter():

$.ajaxPrefilter (funkcja (opcje, oryginalne opcje, jqXHR) ( ) ) ;

Gdzie
opcje— ustawienia bieżącego żądania,
oryginalne opcje- Ustawienia domyślne,
jqXHR— jqXHR obiekt tego żądania.

Filtry wstępne są wygodne w obsłudze ustawień niestandardowych (czyli nowych ustawień nieznanych bibliotece określonej w żądaniu). Na przykład możesz wprowadzić własne ustawienie abortOnRetry , które po włączeniu zresetuje oczekujące żądania, jeśli pod tym samym adresem URL zostanie odebrane następujące żądanie:

var bieżące żądania = ( ) ; $.ajaxPrefilter (funkcja (opcje, oryginalneOpcje, jqXHR) ( if (options.abortOnRetry) ( if (currentRequests[opcje.url ]) ( currentRequests[opcje.url ] .abort () ; ) currentRequests[opcje.url ] = jqXHR ;) ) );

Jest wygodny w przetwarzaniu i istniejące ustawienia. Na przykład w ten sposób możesz zmienić żądanie między domenami na żądanie przekierowane przez serwer domeny:

$.ajaxPrefilter (funkcja (opcje) ( if (options.crossDomain) ( options.url = "http://mydomain.net/proxy/" + encodeURIComponent(opcje.url ) ; options.crossDomain = false ; ) ) ;

Ponadto możesz określić wartości dataType, na których będzie działał filtr wstępny. Możesz więc na przykład określić typy json i skryptów:

$.ajaxPrefilter ( "skrypt json" , funkcja (opcje, oryginalne opcje, jqXHR) ( // Zmień opcje, sprawdź podstawowe ustawienia(oryginalne opcje) i obiekt jqXHR) ) ;

Na koniec możesz zmienić wartość dataType, aby zwrócić żądaną wartość:

$.ajaxPrefilter (funkcja (opcje) ( // zmień typ danych na skrypt, jeśli adres URL spełnia określone warunki if (isActuallyScript(options.url) ) (zwróć „skrypt” ; ) ) ;

Takie podejście gwarantuje nie tylko, że żądanie zmieni typ na skrypt, ale także, że zostaną wykonane również inne procedury obsługi filtra wstępnego określające ten typ w pierwszym parametrze.

Konwertery

Zasada ta polega na zainstalowaniu procedury obsługi, która będzie działać, jeśli typ danych określony w ustawieniach nie jest zgodny z typem danych przesłanym przez serwer.

Konwertery to ustawienie ajax, więc można je ustawić globalnie:

// w ten sposób możesz ustawić procedurę obsługi, która będzie działać, jeśli // zamiast typu mydatatype określonego w dataType zostaną odebrane dane typu tekst $.ajaxSetup (( konwertery: ( "text mydatatype" : funkcja ( textValue ) ( if (valid(textValue ) ) ( // przetwarzanie przesłanego tekstu return mydatatypeValue; ) else ( // jeśli dane przesłane przez serwer nie odpowiadają oczekiwaniom, // możesz zgłosić wyjątek. rzut wyjątkuObject; ) ) ) ) ;

Konwertery pomogą Ci przy wprowadzaniu własnego (niestandardowego) typu danych. Należy pamiętać, że nazwy takiego typu danych należy używać wyłącznie małe litery! Żądanie dotyczące typu danych „mydatatype”, o którym mowa powyżej, mogłoby wyglądać następująco:

$.ajax (url, (typ danych: "mydatatype" ) ) ;

Zwroty: jqXHR

Wykonuje asynchroniczne żądanie HTTP (Ajax).

dodana wersja: 1.5 jQuery.ajax(url [, ustawienia])
adres URL
Typ: ciąg
Adres URL, na który zostanie wysłane żądanie Ajax

ustawienia
Typ: Obiekt
Zestaw parametrów klucz/wartość, które konfigurują żądanie Ajax. Wszystkie ustawienia są opcjonalne. Domyślnie ustawienia pobierane są z pliku . Poniżej jest pełna lista wszystkie ustawienia.
dodana wersja: 1.0 jQuery.ajax(ustawienia)
ustawienia
Typ: Obiekt
Zestaw parametrów klucz/wartość, które konfigurują żądanie Ajax. Wszystkie ustawienia są opcjonalne. Domyślnie ustawienia pobierane są z pliku .

ustawienia:

Ustawienia	Typ danych
akceptuje Wartość domyślna: Zależy od typu danych Podczas tworzenia żądania Ajax nagłówki wskazują dozwolone typy treści oczekiwane od serwera. Wartości tych typów zostaną pobrane z parametru Accepts. Jeśli zajdzie potrzeba zmiany, lepiej zrobić to za pomocą metody $.ajaxSetup().	obiekt
asynchroniczny Wartość domyślna: prawda Domyślnie wszystkie żądania wysyłane są asynchronicznie (wartość tego parametru to true). Jeśli potrzebujesz żądań synchronicznych, ustaw parametr async na false. Żądania międzydomenowe i typ danych: „jsonp” nie są wykonywane synchronicznie. Należy pamiętać, że żądania synchroniczne mogą blokować przeglądarkę podczas wykonywania żądania.	logiczny
beforeSend(jqXHR jqXHR, obiekt ustawień) Funkcja, która zostanie wywołana bezpośrednio przed wysłaniem żądania ajax do serwera. Można go wykorzystać do modyfikacji obiektu jqXHR (we wcześniejszych wersjach, przed jQuery 1.4.x, używano XMLHttpRequest). Można go również używać do zmiany nagłówków itp. Jako argumenty przekazuje się obiekt typu jqXHR i obiekt ustawień. Zwrócenie wartości false w funkcji beforeSend spowoduje anulowanie żądania ajax. Od wersji jQuery 1.5 funkcja beforeSend zostanie uruchomiona niezależnie od typu żądania.	funkcjonować
Pamięć podręczna Wartość domyślna: true, false dla typów danych „script” i „jsonp”. Jeśli fałszywe, żądana strona nie będzie buforowana przez przeglądarkę.	logiczny
ukończony(jqXHR jqXHR, ciąg tekstowyStatus) Funkcja, która zostanie wywołana po zakończeniu żądania ajax (uruchamia się po zakończeniu funkcji obsługi sukcesu i błędów). Funkcja przyjmuje dwa argumenty: obiekt typu jqXHR (we wcześniejszych wersjach, przed jQuery 1.4.x stosowano XMLHttpRequest) oraz ciąg znaków charakteryzujący status żądania („success”, „notmodified”, „error”, „timeout ", "przerwanie" lub "błąd parsera"). Począwszy od wersji jQuery 1.5, Complete może akceptować szereg funkcji.	funkcja lub tablica
zawartość Parametr podawany jest w formacie (string:wyrażenie regularne) i określa, w jaki sposób jQuery będzie analizować odpowiedź z serwera, w zależności od jej typu. (dodano w wersji 1.5)	obiekt
Typ zawartości Wartość domyślna: „application/x-www-form-urlencoded; charset=UTF-8” Podczas wysyłania żądania Ajax dane są przesyłane w formie określonej w tym parametrze. Wartość domyślna to „application/x-www-form-urlencoded; charset=UTF-8”. Jeśli samodzielnie ustawisz wartość, zostanie ona wysłana na serwer. Jeśli kodowanie nie zostanie określone, użyte zostanie domyślne kodowanie ustawione na serwerze.	linia
kontekst Obiekt, który po zakończeniu żądania stanie się kontekstem (wartość przekazywana do tej zmiennej). Na przykład, jeśli jako kontekst określisz element DOM, wszystkie procedury obsługi żądań ajax zostaną również wykonane w kontekście tego elementu DOM. W tym przykładzie słowo kluczowe this będzie zawierać document.body: $.ajax((url: "test.html", kontekst: dokument.treść, sukces: funkcja())( $(this).addClass("gotowe"); ) ));	obiekt
konwertery Domyślnie: („*text”: window.String, „text html”: true, „text json”: jQuery.parseJSON, „text xml”: jQuery.parseXML) Określa, które funkcje zostaną użyte do konwersji wartości z jednego typu na inny. (dodano w wersji 1.5)	obiekt
krzyżDomena Wartość domyślna: false dla tej samej domeny, true dla zapytań między domenami. Jeśli chcesz wykonać żądanie międzydomenowe (na przykład JSONP) w tej samej domenie, ustaw ustawienie crossDomain na true. Umożliwia to np. przekierowanie serwera na inną domenę. (dodano w wersji 1.5)	logiczny
dane Dane, które zostaną przesłane na serwer. Jeśli dane nie są ciągiem, są konwertowane na ciąg zapytania. W przypadku żądań GET dane są dołączane do adresu URL. Obiekt musi składać się z par klucz/wartość. Jeśli wartością jest tablica, to jQuery porządkuje wartości w zależności od tradycyjnego ustawienia. Domyślnie, na przykład (foo:["bar1", "bar2"]) staje się &foo=bar1&foo=bar2 .	obiekt lub ciąg
dataFilter(dane ciągu, typ ciągu) Funkcja, która będzie wykorzystywana do przetwarzania surowych danych typu XMLHttpRequest otrzymanych z serwera. Twoja funkcja powinna działać jak filtr i zwracać oczyszczony ciąg. Do funkcji przekazywane są dwa parametry: otrzymane dane oraz wartość parametru dataType.	funkcjonować
typ danych Wartość domyślna: ciąg znaków wykrywany automatycznie (xml, json, script lub html) Typ danych oczekiwanych z serwera. Jeśli opcja nie zostanie określona, jQuery spróbuje określić typ na podstawie typu MIME odpowiedzi.	linia
błąd(jqXHR jqXHR, string tekstStatus, string errorThrown) Funkcja wykonywana w przypadku niepowodzenia żądania. Przyjmuje 3 argumenty: obiekt jqXHR (dawniej XMLHttpRequest), ciąg opisujący błąd i ciąg wyjątku, jeśli został zgłoszony. Drugi argument może zawierać następujące wartości: null, „timeout”, „error”, „abort” i „parsererror”. Na wypadek, gdyby tak się stało Błąd HTTP, wówczas jego status tekstowy zostanie zapisany do trzeciego argumentu. Na przykład „Nie znaleziono” lub „ Serwer wewnętrzny Błąd.” Od wersji jQuery 1.5 zamiast pojedynczej funkcji ten parametr może akceptować tablicę funkcji. Zdarzenie błędu nie występuje, gdy typ danych jest równy skryptowi lub JSONP.	funkcja lub tablica
światowy Wartość domyślna: prawda. Określa, czy dla tego żądania wywoływać globalne procedury obsługi zdarzeń Ajax (takie jak ajaxStart lub ajaxStop).	logiczny
nagłówki Domyślny: () Tutaj możesz określić dodatkowe nagłówki żądań. Wartości dla tego ustawienia zostaną wprowadzone przed wywołaniem funkcji beforeSend, gdzie będzie można dokonać ostatecznych zmian w nagłówkach. (dodano w wersji 1.5)	obiekt
jeśliZmodyfikowano Wartość domyślna: fałsz Żądanie zostanie uznane za pomyślne tylko wtedy, gdy od tego czasu dane odpowiedzi uległy zmianie ostatnie żądanie. Sprawdzanie odbywa się za pomocą nagłówka Last-Modified. Domyślnie, ta opcja wyłączony. W jQuery 1.4 sprawdzana jest także wartość „etag”, aby sprawdzić, czy dane uległy zmianie.	logiczny
jestLokalny Domyślnie: w zależności od bieżącej lokalizacji Parametr określa, czy strona internetowa działa lokalnie (na przykład przy użyciu pliku, *-rozszerzenia i protokołu widżetu), czy nie (na przykład przy użyciu protokół http). To ustawienie lepiej jest dokonać zmiany za pomocą metody $.ajaxSetup(). (dodano w wersji 1.5)	logiczny
jsonp Definiuje nazwę parametru dodawanego do adresu URL żądania JSONP (domyślnie używane jest „callback”). Na przykład ustawienie (jsonp:"onJSONPLoad") jest konwertowane na część adresu URL ciągu "onJSONPLoad=?". Od wersji 1.5 podanie w tym parametrze wartości false zapobiega dodaniu dodatkowego parametru do adresu URL. W takim przypadku musisz ustawić wartość ustawienia jsonpCallback. Na przykład: (jsonp:false, jsonpCallback:"callbackName").	linia
jsonpOddzwonienie Funkcja, która zostanie wywołana, gdy serwer odpowie na żądanie JSONP. Domyślnie jQuery generuje dowolne unikalna nazwa tę funkcję, co jest preferowane. Jeżeli chcesz skorzystać z buforowania żądań GET to wpisz samodzielnie nazwę funkcji. Począwszy od wersji 1.5 można określić funkcję w celu samodzielnego przetworzenia odpowiedzi serwera.	ciąg znaków lub funkcja
Typ MIME Tutaj możesz określić typ danych, w jakim oczekuje się odpowiedzi od serwera zamiast XHR. (dodano w wersji 1.5.1)	linia
hasło Hasło, które będzie używane w odpowiedzi na żądanie uwierzytelnienia dostępu HTTP (jeśli jest wymagane)	linia
nazwa użytkownika Nazwa użytkownika, która będzie używana w odpowiedzi na żądanie uwierzytelnienia dostępu HTTP (jeśli jest wymagane)	linia
przetwarzać dane Wartość domyślna: prawda ; Domyślnie dane przekazywane do serwera są konwertowane z obiektu na ciąg zapytania i wysyłane jako „application/x-www-form-urlencoded”. Jeśli chcesz wysłać dokument DOM lub inne dane, których nie można przekonwertować, ustaw opcję ProcessData na false.	logiczny
skryptCharset Dotyczy tylko żądań Ajax GET typu „JSONP” i „script”. Jeśli serwer w domenie strony trzeciej używa kodowania innego niż Twoje, musisz określić kodowanie serwera strony trzeciej.	linia
Kod statusu Domyślny: () Zbiór par, w których kody wykonania żądania są powiązane z funkcjami, które zostaną wywołane. Przykładowo dla kodu 404 (strony nie istnieją) możesz wyświetlić na ekranie komunikat: $.ajax((kod statusu:( 404:funkcja())( alert("Nie znaleziono strony"); ) ) )); Jeśli żądanie zakończyło się sukcesem, to jako parametr funkcja anonimowa przyjmie te same parametry, co w przypadku powodzenia. Jeżeli wystąpi błąd, jego działanie będzie takie samo, jak w przypadku funkcji obsługi błędów. (dodano w wersji 1.5)	obiekt
sukces (obiekt danych, ciąg tekstowy, obiekt jqXHR) Funkcja, która zostanie wywołana, jeśli żądanie zakończy się pomyślnie. Przyjmuje 3 argumenty - dane przesłane przez serwer i wstępnie przetworzone; string ze statusem wykonania (textStatus); obiekt jqXHR (w wersjach wcześniejszych niż 1.5 zamiast jqXHR używany jest obiekt XMLHttpRequest). Od wersji jQuery 1.5 zamiast pojedynczej funkcji ten parametr może akceptować tablicę funkcji.	funkcja lub tablica
koniec czasu Czas oczekiwania na odpowiedź z serwera w milisekundach. Zastępuje globalne ustawienie tego samego parametru w $.ajaxSetup(). Jeżeli ten czas zostanie przekroczony, żądanie zakończy się niepowodzeniem i wystąpi zdarzenie błędu ze statusem „timeout”.	numer
tradycyjny Wartość domyślna: fałsz Ustaw ten parametr na true, aby użyć tradycyjnego stylu serializacji.	logiczny
typ Wartość domyślna: POBIERZ Określa, czy żądanie jest GET czy POST. Możesz także użyć innych żądań HTTP (takich jak PUT lub DELETE), ale pamiętaj, że nie wszystkie przeglądarki je obsługują.	linia
adres URL Wartość domyślna: bieżąca strona. Strona, na którą zostanie wysłane żądanie.	linia
x godz Domyślnie ActiveXObject w IE, XMLHttpRequest w innych przeglądarkach. Funkcja wywołania zwrotnego umożliwiająca utworzenie obiektu XMLHttpRequest. Tworząc swoją funkcję bierzesz pełną odpowiedzialność za stworzenie obiektu.	funkcjonować
Pola xhr Obiekt w postaci (nazwa:wartość) służący do zmiany wartości odpowiednich pól obiektu XMLHttpRequest. $.ajax((url: a_cross_domain_url, xhrFields: ( withCredentials: true ) )); (dodano w wersji 1.5.1)	mapa

$.ajax((typ: „POST”, adres URL: „some.php”, dane: (nazwa: „John”, lokalizacja: „Boston”) )).done(function(msg) ( alert("Dane zapisane: " + wiadomość); ));

Dostać najnowszy Wersja HTML strony

$.ajax((url: "test.html", pamięć podręczna: false )).done(function(html) ( $("#results").append(html); ));

Przekazujemy to jako Dane XML dokument. Wyłączamy automatyczną konwersję danych na zwykły ciąg znaków, ustawiając ustawienie ProcessData na false:

Var xmlDocument = ; var xmlRequest = $.ajax((url: "page.php", ProcessData: false, data: xmlDocument )); xmlRequest.done(handleResponse);

Var menuId = $("ul.nav").first().attr("id"); var request = $.ajax((url: "script.php", typ: "POST", dane: (id: menuId), typ danych: "html" )); request.done(funkcja(msg) ( $("#log").html(msg); )); request.fail(function(jqXHR, textStatus) ( alert("Żądanie nie powiodło się: " + textStatus); ));

Pobierz i wykonaj Plik JavaScript:

$.ajax((typ: „GET”, adres URL: „test.js”, typ danych: „skrypt” ));

W tym artykule opisano AJAX na poziomie funkcji i przykładu. Uwzględniono cechy interakcji asynchronicznej i przykłady użycia, ale z minimalną ilością szczegółów technicznych.

Mam nadzieję, że będzie przydatny do zrozumienia, czym jest AJAX i do czego służy.

Co to jest AJAX? Przykładowa realizacja.

AJAX lub dłużej, A synchroniczny J avascript A II X ml to technologia interakcji z serwerem bez konieczności przeładowywania stron.

Dzięki temu czas reakcji ulega skróceniu, a aplikacja webowa pod względem interaktywności bardziej przypomina pulpit.

Technologia AJAX, jak wskazuje pierwsza litera A w jej nazwie, jest asynchroniczna, czyli przeglądarka po wysłaniu żądania może zrobić wszystko, np. wyświetlić komunikat
o oczekiwaniu na odpowiedź, przewijaniu strony itp.

Oto kod przycisku w powyższym przykładzie:

Po kliknięciu wywołuje funkcję głosowania, która wysyła żądanie do serwera, czeka na odpowiedź, a następnie wyświetla o tym komunikat w div pod przyciskiem:

Odpowiedź serwera będzie tutaj

Do wymiany danych z serwerem wykorzystywany jest specjalny obiekt XmlHttpRequest, który może wysłać żądanie i otrzymać odpowiedź z serwera. Możesz utworzyć taki obiekt w różnych przeglądarkach, na przykład w następujący sposób:

Funkcja getXmlHttp())( var xmlhttp; try ( xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); ) catch (e) ( try ( xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); ) catch (E) ( xmlhttp = false; ) ) if (!xmlhttp && typeof XMLHttpRequest!="niezdefiniowany") ( xmlhttp = nowy XMLHttpRequest(); ) return xmlhttp; )

Więcej o szczegółach implementacji AJAX-a przy użyciu XmlHttpRequest i innych transportów przeczytasz w rozdziale poświęconym komunikacji z serwerem.

Nie będziemy się nad tym tutaj rozwodzić i przejdziemy od razu do funkcji głosowania:

// kod głosowania javascript z przykładowej funkcji głosowania() ( // (1) utwórz obiekt dla żądania do serwera var req = getXmlHttp() // (2) // zakres obok przycisku // wyświetli się postęp wykonywania var statusElem = document.getElementById("vote_status") req.onreadystatechange =function() ( // onreadystatechange jest aktywowany po otrzymaniu odpowiedzi serwera if (req.readyState == 4) ( // jeśli żądanie zostało zakończone wykonanie statusElem.innerHTML = req.statusText / / pokaż status (Nie znaleziono, OK..) if(req.status == 200) ( // jeśli status wynosi 200 (OK) - odpowiedz na alert użytkownika(" Odpowiedź serwera: "+req.responseText); ) // tutaj możesz dodać jeszcze jedną z obsługą błędów żądania ) ) // (3) ustaw adres połączenia req.open("GET", "/ajax_intro/vote.php", true); // przygotowywany jest obiekt żądania: podany jest adres i utworzona funkcja onreadystatechange // w celu przetworzenia odpowiedzi serwera // (4) req.send(null); // wyślij żądanie // (5) statusElem.innerHTML = "Oczekiwanie na odpowiedź serwera..." )

Przebieg wykonania używany przez głosowanie jest dość typowy i wygląda następująco:

Funkcja tworzy obiekt XmlHttpRequest

przypisuje procedurę obsługi odpowiedzi serwera do onreadystatechange

otwiera połączenie otwarte

wysyła żądanie za pomocą wywołania send (odpowiedź serwera jest odbierana przez funkcję onreadystatechange, która uruchamia się asynchronicznie)

pokazuje odwiedzającemu wskaźnik stanu procesu

Procedura obsługi serwera, do której kierowane jest żądanie AJAX (w tym przykładzie jest to voto.php), zasadniczo nie różni się od zwykła strona. Żądanie AJAX wysłane przez XmlHttpRequest nie różni się od zwykłego żądania.

Tyle, że tekst zwracany przez serwer nie jest wyświetlany w formacie HTML, ale jest odczytywany i przetwarzany przez funkcję onreadystatechange.

Znaczenie AJAX polega na integracji technologii

Technologia AJAX wykorzystuje kombinację:

(X)HTML, CSS do prezentacji i stylizacji informacji
Model DOM, na którym operacje są wykonywane przez JavaScript po stronie klienta, aby zapewnić dynamiczne wyświetlanie i interakcję z informacjami
XMLHttpRequest do asynchronicznej komunikacji z serwerem WWW. W niektórych frameworkach AJAX i w niektórych sytuacjach zamiast XMLHttpRequest używany jest znacznik IFrame, znacznik SCRIPT lub inny podobny transport.
JSON jest często używany do wymiany danych, ale każdy format będzie działał, w tym bogaty HTML, tekst, XML, a nawet niektóre EBML

Typowa aplikacja AJAX składa się z co najmniej dwóch części.

Pierwszy działa w przeglądarce i jest zazwyczaj napisany w JavaScript, natomiast drugi znajduje się na serwerze i jest napisany na przykład w Ruby, Javie lub PHP.

Dane są wymieniane pomiędzy tymi dwiema częściami poprzez XMLHttpRequest (lub inny transport).

Co mogę zrobić za pomocą AJAX-a?

Istotą AJAX jest interaktywność i szybki czas reakcji.

Małe kontrole

Przede wszystkim AJAX przydaje się w przypadku drobnych elementów związanych z podstawowymi działaniami: dodawanie do koszyka, subskrybowanie itp.

Dynamiczne ładowanie danych z serwera.

Na przykład drzewo, którego węzły są ładowane w miarę ich rozwijania.

W momencie pojawienia się był to jedyny otwarty obiekt usługi pocztowe używając AJAX dla następujących funkcji.

Sprawdzanie błędów w formularzu PRZED przesłaniem
Nazwa użytkownika jest wysyłana do serwera, a wynik sprawdzenia jest zwracany na stronę.
"Natychmiastowe pobieranie
Przeglądarka kontaktuje się z serwerem jedynie w celu uzyskania danych, zamiast aktualizować cały uciążliwy interfejs
Automatyczne „dostarczanie” listów do otwartej teczki
Co jakiś czas do serwera wysyłane jest żądanie, które w przypadku nadejścia nowych listów pojawia się w przeglądarce.
Autouzupełnianie
Wystarczy wpisać pierwsze litery imienia odbiorcy, a reszta zostanie uzupełniona automatycznie, jak w aplikacjach desktopowych.

Wynik: powszechna popularność, duży popyt na konta od momentu otwarcia.

Model synchroniczny VS Model asynchroniczny

W programowaniu konwencjonalnym wszystkie operacje są synchroniczne, to znaczy wykonywane są jedna po drugiej.

Relatywnie rzecz biorąc, postępujemy tak:

zarzucić wędkę

czekając, aż ugryzie

bit - włącz dokręcanie spinningu

Dzięki podejściu asynchronicznemu:

zawieszamy na wędce specjalny wykrywacz brań, prosimy go o ciągnięcie spinningu w momencie brania

zarzucić wędkę

robimy inne rzeczy

zostaje uruchomiony czujnik brań, co powoduje wycofanie wędki spinningowej

Oznacza to, że w przypadku synchronicznym wędka stale przyciąga naszą uwagę. Łowienie ryb to proces sekwencyjny.

W wersji asynchronicznej najpierw ustawiamy program co robić podczas brania, a następnie opuszczamy wędkę do łowienia i zajmujemy się innymi sprawami.
Na przykład zainstalowaliśmy jeszcze 5 takich wędek.

Programowanie asynchroniczne jest trudniejsze niż programowanie synchroniczne i na początku jest niezwykłe, bo tak z góry co zadziała, jest dane Po.
Oznacza to, że program „co zrobić, gdy ugryzie” należy ustawić przed wystąpieniem ukąszenia i ogólnie nie wiadomo, czy w zbiorniku są ryby.

Istnieją techniki ułatwiające programowanie asynchroniczne, na przykład obiekt Deferred (Twisted, Dojo, Mochikit), ale zostanie to omówione w osobnym artykule.

Model synchroniczny i asynchroniczny w AJAX

Wróćmy do naszych owiec: przeglądarki, serwera i, powiedzmy, bazy danych.

W modelu synchronicznym przeglądarka wysyła żądanie do serwera i zawiesza się, czekając aż wszystko dokończy. niezbędną pracę. Serwer wykonuje zapytania do bazy danych, zawija odpowiedź w wymaganym formacie i wysyła ją na wyjście. Przeglądarka. Po otrzymaniu odpowiedzi wywołuje funkcję show.

Wszystkie procesy wykonywane są sekwencyjnie, jeden po drugim.

Opóźnienia sieciowe są uwzględniane w czasie oczekiwania, zaznaczonym na wykresie kolorem szarym.

Użytkownik nie może nic więcej zrobić na tej samej stronie podczas synchronicznej wymiany danych.

W modelu asynchronicznym żądanie zostaje wysłane („przynęta ustawiona”) i można przejść do czegoś innego. Gdy żądanie zostanie zakończone („kichnie”) – zostanie uruchomione z wyprzedzeniem
przygotowana przez programistę funkcja („podciągnij wędkę”) służąca do wyświetlenia komunikatu serwera.

Tutaj serwer natychmiast powiadamia przeglądarkę, że żądanie zostało przyjęte do realizacji i zwalnia je do dalszej pracy. Gdy odpowiedź będzie gotowa, serwer ją przekaże, a w przeglądarce zostanie wywołana odpowiednia funkcja wyświetlania, ale w czasie generowania i wysyłania tej odpowiedzi przeglądarka jest bezpłatna.

Użytkownik może dodawać komentarze, wypełniać i przesyłać formularze itp.: Można składać nowe żądania asynchroniczne.

Model asynchroniczny charakteryzuje się niemal natychmiastową reakcją na działania użytkownika, dzięki czemu aplikacja jest wygodna i szybka.

Z powodu tej luki pomiędzy działaniem a rzeczywistym rezultatem, aplikacja staje się znacznie bardziej podatna na błędy.

Zwłaszcza w przypadku wielu jednoczesnych żądań asynchronicznych należy zadbać o kolejność wykonywania i odpowiedzi (warunki wyścigu), a w przypadku wystąpienia błędu pozostawić aplikację w spójnym stanie.

Cechy modelu asynchronicznego

Trudne do wdrożenia
- Niewystarczające możliwości przeglądarki (javascript)
- Model asynchroniczny jest trudniejszy do debugowania
Warunki wyścigu
- Nieokreślona sekwencja wykonania
- Możesz wykonywać wiele zadań jednocześnie („wędki”), ale zadanie rozpoczęte jako pierwsze może zakończyć się jako ostatnie.
Reakcja jest natychmiastowa, ale nie wiadomo, jaki będzie rezultat. Obsługa błędów jest bardziej skomplikowana
- Błędy komunikacji - rozłączenie itp.
- Błędy użytkownika - na przykład nie było wystarczających uprawnień
Kontrola integralności (odporna na błędy)
- Na przykład redaktor wysłał żądanie asynchroniczne do usunięcia gałęzi drzewa. Dodawanie do niego musi być wyłączone do czasu nadejścia odpowiedzi serwera. Jeśli nagle nie było wystarczających uprawnień, operacja nie powiodła się.
Interaktywność
Szybki interfejs

Są tylko dwie zalety, ale jakie! Gra warta świeczki.

Asynchroniczne przeciąganie i upuszczanie.

Czasami dla operacje asynchroniczne konieczne jest wykonywanie różnych „zwodów uszami”. Na przykład chcesz wykonać metodę przeciągnij i upuść w drzewie, to znaczy przeciągnij artykuły z jednej sekcji do drugiej za pomocą myszy, tak aby zmieniły swój rodzic na serwerze w bazie danych.

Przeciągnij „n” i upuść – to jest „wziął obiekt myszy – umieść go tam, gdzie powinien – gotowe”. Jednak w modelu asynchronicznym nie wszystko może być „gotowe” od razu.
Należy sprawdzić uprawnienia na serwerze, sprawdzić czy obiekt nadal istnieje, na wypadek gdyby inny użytkownik go usunął.

Trzeba w jakiś sposób pokazać, że proces się rozpoczął, ale jego rezultatem będzie „co się stanie…”. Ale jako? W modelu asynchronicznym wskaźnik myszy nie może po prostu najechać na obiekt, zamieniając się w zegarek.

W tym przypadku albo korzystają z synchronicznych żądań do serwera - i wtedy wszystko naprawdę się zawiesza, albo oryginalnym rozwiązaniem jest ustawienie obiektu tak, jakby został przesłany i poinformowanie animowaną ikoną, że oczekuje na odpowiedź.
Jeśli odpowiedź jest negatywna, procedura obsługi odpowiedzi przesyła obiekt z powrotem.

Przestarzały kontekst, przestarzały kontekst

Przykład z przeciągnięciem i upuszczeniem również dotyka problemu „przestarzałego kontekstu” – nieaktualnego kontekstu.

Sieć to środowisko wielu użytkowników. Jeśli używany do nawigacji,
Powiedzmy, że jest to drzewo artykułów, a wtedy pracuje nad nim wiele osób. Jeden z nich może usunąć gałąź drzewa, nad którą pracuje drugi: konflikt.

Z reguły w celu przezwyciężenia takich incydentów stosuje się następujące środki:

Polityka edycji

Wtedy wszyscy wiedzą, kto co robi i na poziomie podziału uprawnień i komunikacji osobistej uzgadnia się takie usunięcia. Ta opcja jest oczywiście niebezpieczna, ale zwykle działa.

Blokowanie i/lub kontrola wersji

Blokowanie - blokowanie edytowanych dokumentów.

Kontrola wersji – wszyscy nowy dokument staje się wersją, więc zmiany nigdy nie zostaną utracone. Wersjonowanie pociąga za sobą konflikty, gdy Petya zaczął edytować dokument przed Vasją i zapisał go później. Jednocześnie w Ostatnia wersja Zmiany Vasyi zostały utracone, chociaż przedostatnia (Vasya) wersja na pewno jest w systemie.

Więcej na temat blokowania i wersjonowania możesz przeczytać na przykład w dokumentacji systemu kontroli wersji Subversion.

Automatyczna aktualizacja kontekstu

Problem nieaktualnej zawartości można w 99% rozwiązać dzięki natychmiastowej automatycznej aktualizacji.

Przeglądarka utrzymuje stałe połączenie z serwerem (lub od czasu do czasu wysyła żądania napraw) - i potrzebne zmiany są przesyłane tym kanałem.

Na przykład czasami nowe artykuły są ładowane do otwartej gałęzi drzewa, a czasami nowe listy są ładowane do otwartego interfejsu poczty.

Ogólnie rzecz biorąc, problem przestarzałego kontekstu bezpośrednio wiąże się z problemem integralności danych. W każdym przypadku serwer jest odpowiedzialny za ostateczną kontrolę integralności, podobnie jak w przypadku sprawdzania poprawności formularza.

Lekcja, w której proste przykłady Przyjrzyjmy się, jak pracować z technologią AJAX, czyli jak wykorzystać obiekt XMLHttpRequest (w skrócie XHR) do tworzenia synchronicznych żądań HTTP do serwera i otrzymywania z niego odpowiedzi.

Rozpocznijmy nasze wprowadzenie do technologii AJAX od przyjrzenia się przykładowi (dla początkujących), który będzie żądał informacji z serwera poprzez żądanie synchroniczne.

Żądanie synchroniczne, w odróżnieniu od asynchronicznego, powoduje zawieszenie strony internetowej po jej wysłaniu i przed otrzymaniem odpowiedzi, tj. czyni go niedostępnym dla użytkownika. Żądania synchroniczne są używane dość rzadko na stronach internetowych, ale dla początkujących lepiej jest nauczyć się z nimi technologii AJAX.

Zanim przejdziemy do tworzenia przykładu, przyjrzyjmy się głównym etapom tworzenia fragmentu strony działającego w oparciu o technologię AJAX. W tym przypadku wszelkie akcje realizowane są głównie w kodzie JavaScript po wystąpieniu dowolnego zdarzenia na stronie (użytkownik kliknął przycisk itp.) i składają się z następujących etapów:

Pobieranie informacji (danych) ze strony lub formularza (jeśli to konieczne)

Wysyłanie żądania do serwera WWW

Odbieranie odpowiedzi z serwera WWW

Wyświetl wyniki na stronie, jeśli odpowiedź przebiegła pomyślnie.

Podstawy tworzenia synchronicznych żądań AJAX Przykład 1: Tworzenie synchronicznego żądania AJAX

Przyjrzyjmy się przykładowi wykonania synchronicznego żądania AJAX do serwera przy użyciu metody XMLHttpRequest. W tym przykładzie poprosimy o dane znajdujące się w pliku data.txt na serwerze i wyświetlimy je na stronie w elemencie span.

Przykład będzie składał się z plików Index.html , script.js i data.txt , które dla uproszczenia można umieścić na serwerze w tym samym katalogu.

Rozpocznijmy rozwój od stworzenia strony HTML, do której podłączymy plik script.js. Ten plik, a raczej jego zawartość, wykona całą główną pracę. Zanim jednak przejdziemy do jego opracowania, utwórzmy na stronie elementy div i span. Element div będzie działał jak przycisk, którego kliknięcie spowoduje wykonanie żądania AJAX. Element span będzie pełnił rolę kontenera zawierającego odpowiedź przychodzącą z serwera.

Ponadto dodamy więcej do strony Style CSSżeby się trochę ubrać. W rezultacie powinniśmy otrzymać następujący kod HTML:

JavaScript AJAX#myDiv (wysokość: 30 pikseli; szerokość: 100 pikseli; kolor tła: jasnozielony; )

Odpowiedź (AJAX):

Następnie otwórz plik data.txt i wpisz w nim tekst „Hello, world!”. Zapiszmy i zamknijmy plik.

Na koniec przejdźmy do tworzenia pliku script.js. Zawartość tego pliku wykona wszystkie podstawowe akcje tj. wyślij żądanie ajax do serwera, odbierz odpowiedź z serwera i zaktualizuj zawartość strony (odpowiedź umieść w elemencie span).

Rozważ utworzenie ten plik krok po kroku:

JavaScript AJAX

Kliknij jasnozielony blok i otrzymaj odpowiedź z serwera „Przykład, świat!”

Odpowiedź (AJAX):

// pobierz element, który ma id="myDiv" var myDiv = document.getElementById("myDiv"); // zasubskrybuj zdarzenie kliknięcia tego elementu myDiv.addEventListener("click",function() ( // utwórz obiekt XMLHttpRequest var request = new XMLHttpRequest(); // skonfiguruj żądanie: GET - metoda, data.txt - URL pod który zostanie wysłane żądanie, false - żądanie synchroniczne request.open("GET","data.txt",false); // wyślij dane do serwera metodą send request.send(); // jeśli status odpowiedzi wynosi 200 (OK ), to if (request.status==200) ( // wyświetl odpowiedź serwera w elemencie zawierającym id="answer" document.getElementById("answer").innerHTML = request.responseText ;)))

Witaj świecie!

Przykład 2: Przetwarzanie synchronicznego żądania AJAX na serwerze przy użyciu PHP

Przykład, który to zrobi Technologie AJAX wyślij do serwera żądanie zawierające parametr i wyświetl odpowiedź na stronie.

W tym przykładzie strona będzie składać się z 3 przycisków. Pierwszy przycisk będzie miał tekst 1, drugi tekst 2, a trzeci przycisk tekst 3. Kliknięcie dowolnego przycisku spowoduje wysłanie synchronicznego żądania do serwera. Jako metodę transmisji żądania użyjemy GET. Oraz adres na który wyślemy żądanie oraz parametry ajax.php. Dane przesłane przez klienta otrzymamy na serwerze za pomocą zmiennej HTTP GET ($_GET). Następnie przetworzymy otrzymane dane na serwerze i zwrócimy klientowi odpowiedź (string).

JavaScript AJAX span (grubość czcionki: pogrubiona; kolor: czerwony; )

Kliknij na jeden z przycisków i odbierz odpowiedź z serwera wykorzystując technologię AJAX.

1 2 3

Odpowiedź (AJAX):

// pobierz wszystkie elementy przycisków na stronie var przyciski = document.getElementsByTagName("button"); // subskrybuj zdarzenie kliknięcia przycisku wszystkich elementów dla (var i=0; i