XMLHttpRequest (XHR) to API w postaci obiektu udostępnianego przez środowisko przeglądarki javascript. W szczególności wyszukiwanie danych z XHR w celu trwałej modyfikacji pobranej strony internetowej jest podstawową koncepcją projektu Ajax. Pomimo nazwy XHR może być używany z protokołami innymi niż HTTP, a dane mogą mieć postać nie tylko XML, ale także JSON, HTML lub zwykłego tekstu. WHATWG obsługuje standard XHR. Obecna praca w W3C w celu stworzenia stabilnej specyfikacji opiera się na migawkach standardu WHATWG.

, to w pierwszej JavaScript XMLHttpRequest obiekt ActiveX, jego użycie było ograniczone do intranetów opartych na Microsoft i nie było odpowiednie dla innych stron. Zespół Mozilli zainteresował się implementacją odpowiednika JScript i rozpowszechnił go we wszystkich przeglądarkach, w tym w Gecko /KHTML i Operze. Nawet IE7 nie wymaga już instalacji ActiveX do użycia z XHR.

Historia XMLHttpRequest

Koncepcja ta została stworzona przez ekspertów JavaScript XMLHttpRequest Outlook Web Access Server do użytku w Microsoft Exchange 2000. Wersje 5 i 6 zostały określone identyfikator obiektu XHR ich języków skryptowych jak Sam identyfikator żądania nie był standardem w momencie wydania. Firma Microsoft dodała identyfikator obiektu do swoich języków skryptowych w programie Internet Explorer 7.0 wydanym w październiku 2006 roku. W przeglądarce projektu został opracowany i wdrożony w JavaScript XMLHttpRequest mechanizm układ interfejsu Gecko. Została zmodernizowana w sposób, który najbardziej przypominał interfejs Microsoft Request. Mozillautworzył powłokę do korzystania z tego interfejsu poprzez obiekt JS, który został nazwany XMLHttpRequest. Obiekt już udostępnione w Gecko wersji 0.6 wydanej w dniu 6 grudnia 2000 roku, ale nie był w pełni funkcjonalny, aż do momentu 05 czerwca 2002 nie wydana wersja 1.0 Gecko, to identyfikator obiektu stał się de facto standardem w inne główne systemy internetowe:

Safari 1.2 wydane w lutym 2004 r.

Opera 8.0 wydana w kwietniu 2005 r.

iCab 3.0b352 wydany we wrześniu 2005 r.

Wraz z pojawieniem się cross-browser biblioteki JavaScript, w tym jQuery, programiści mogą wywołać funkcjonalności XMLHttpRequest JavaScript bez kodowania bezpośrednio do API. World Wide Web Consortium opublikowało projekt specyfikacji XMLHttpRequest 5 kwietnia 2006 roku w celu dokumentowania minimalnego zestawu kompatybilnych funkcji opartych na istniejących wdrożeń, pozwalając programistom wykorzystać je bez kodu specyficznego dla platformy. 25 lutego 2008 W3C opublikowała kolejną dane projektu praca - XMLHttpRequest Level 2. Poziom 2 została zwiększona funkcjonalność, w tym wsparcie dla zapytań i przetwarzania strumieni bajtowych.

Normy identyfikator obiektu

Jak W3C standard dla obiektu XMLHttpRequest javascript post jest nadal poprzednia wersja, środki niestandardowe nie może obserwować wszystkie funkcje identyfikacji, a każda z następujących pozycji może zostać zmieniona. Podczas pisania scenariusza z obiektem XMLHttpRequest dla kilku agentów użytkownika należy zachować szczególną ostrożność.
Żądania HTTP i HTTPS Obiekty XMLHttpRequest są inicjowane przez opensposób. Jest wywoływana przed wysłaniem faktycznego żądania weryfikacji. Ta metoda nie gwarantuje, że adres URL istnieje i informacje są poprawne. Może przyjmować do pięciu parametrów, ale tylko dwa wymagają inicjalizacji żądania. Pierwszym parametrem jest ciąg tekstowy. Wprowadzamy metody zapytań, które muszą być obsługiwane przez odpowiedni program użytkownika, konkretny projekt W3C dla javascript XMLHttpRequest. Przykłady:

GET jest obsługiwany przez Mozillę Internet Explorer 7.

POST jest obsługiwany przez IE7 Mozilla.

HEAD jest wspierany przez IE7.

Metody składania wniosków nie są ograniczone do wymienionych powyżej. Projekt W3C mówi, że przeglądarka może je wspierać według własnego uznania. Drugi parametr to kolejny ciąg tekstowy określający adres URL żądania HTTP. Trzeci parametr jest wartością logiczną wskazującą, czy żądanie będzie asynchroniczne. Nie jest to wymagane przez projekt W3C. Jego domyślną wartość należy uznać za prawdziwą za pomocą odpowiedniego interfejsu agenta W3C. Asynchroniczne żądanie "prawda" nie czeka na odpowiedź serwera przed kontynuowaniem wykonywania bieżącego skryptu. Zamiast tego wywoła on detektor zdarzeń onreadystatechange w posta javascript XMLHttpRequest na różnych etapach zapytania. Czwarty i piąty parametr to nazwa użytkownika i hasło. Parametry te można podać w celu uwierzytelnienia i autoryzacji, jeśli jest to wymagane przez serwer.

Metoda SetRequestHeader

Po pomyślnym zainicjowaniu można wywołać metodę nagłówka obiektu jawnego obiektu javascript XMLHttpRequest, aby wysłać nagłówki HTTP do zapytania. Pierwszym parametrem metody jest nazwa nagłówka. Drugi parametr to wartość ciągu. Ta metoda powinnado użycia dla każdego nagłówka, który jest wysyłany wraz z żądaniem.
Ukryty "kamień" w standardzie XMLHttpRequest, który upraszcza proces pobierania próbek i analizowania danych JSON przez Ajax, to JSON & amp; JSON-P Zwykły sposób oferowania danych serwera dla przeglądarek, aby mogły być używane w javascriptie klienta, to formatowanie danych, takich jak JSON i uzyskiwanie do niego dostępu za pośrednictwem własnego adresu URL. Na przykład: XMLHttpRequest javascript Json Aby wysłać żądanie HTTP, musisz wywołać metodę send XMLHttpRequest. Firefox 3.0.x i wcześniejsze wersje wydają wyjątek, jeśli send jest wywoływany bez argumentów. Jeśli ta opcja jest przedmiotem dokumentu DOM, agent użytkownika musi zapewnić, że zostanie przekonwertowany na dobrze sformatowany XML. Jeśli nagłówek Content-Type nie został jeszcze dodany za pomocą SetRequestHeader, powinien zostać automatycznie dodany przez odpowiedniego agenta do użytkownika z następującym działaniem: "application /xml; charset = charset ", gdzie zestaw znaków jest kodowaniem używanym w dokumencie. Jeśli agent użytkownika jest skonfigurowany do korzystania z serwera proxy, obiekt XMLHttpRequest zmieni żądanie, aby przekazać skonfigurowane nagłówki do Proxy-Authorization.

Zmiany w XHR

Jeśli metoda została pomyślnie uruchomiona, właściwości obiektu XMLHttpRequest będą miały wartość 1 (Open). Po otrzymaniu nagłówków odpowiedzi HTTP wartość 2 (HEADERS_RECEIVED) jest przypisana do właściwości readyState obiektu XHR. Po załadowaniu zawartości odpowiedzi HTTP właściwość readyState obiektu XHR musi być ustawiona na 3 (ładowanie). Po zakończeniu odpowiedzi HTTP właściwość readyState obiektu XHR musi być ustawiona na 4 (Gotowe). Słuchacz będziereagować na zmiany stanu, które wystąpią po ustaleniu. Aby wykryć warunek 1 i 2, detektor musi zostać zdefiniowany przed wywołaniem wywołania. Metodę otwartą należy zastosować przed wywołaniem wysyłania. Ta metoda przerywa żądanie, jeśli obiekt readyState obiektu XHR nie został jeszcze 4 (Gotowe). Metoda abort zapewnia, że ​​procedura obsługi wywołania zwrotnego nie będzie wywoływana podczas kwerendy asynchronicznej. Niektóre biblioteki AJAX używają przerw, aby anulować potencjalne duplikaty lub uszkodzone zapytania.

Zapytania między domenami

W historii wczesnego rozwoju Internetu odkryto, że możliwe jest przełamanie bezpieczeństwa użytkowników za pomocą javascript w celu wymiany informacji z jednej witryny na inną, mniej autorytatywną. W związku z tym wszystkie nowoczesne przeglądarki implementują jedną i tę samą regułę pochodzenia, która zapobiega wielu atakom, takim jak wykonywanie skryptów cross-site.
Dane jaloadcript XMLHttpRequest są podatne na tę politykę bezpieczeństwa, ale czasami twórcy stron chcą świadomie omijać ograniczenia. Jest to spowodowane zgodnym z prawem wykorzystaniem subdomen, ponieważ tworzenie XHR ze strony generowanej przez foo.example.com w celu uzyskania informacji z bar.example.com z niego zazwyczaj kończy się niepowodzeniem. Istnieje wiele alternatyw pozwalających ominąć tę funkcję zabezpieczeń, w tym użycie JSONP, współużytkowanie zasobów (CORS) lub alternatywy dla wtyczek takich jak Flash i Silverlight.

Aplikacje przeglądarki

Inicjalizacja obiektu XHR jest w rzeczywistości bardzo prosta w większości przeglądarek, ale aby obsługiwać MSIE 5 i 6, konieczne jest podawanie wielu różnych metod, więc proces wygląda tak skomplikowany. Zasadniczoskrypt stara się konsekwentnie używać trzy różne metody do tego czasu, aż uda się lub nie jest skończona.Funkcja przyjmuje dwa loadXMLDoc parametry Pierwszym z nich jest położenie skryptu po stronie serwera, a drugi - zmienne, które muszą zdać ten skrypt. Oto krótki przykład, jak wywołać skrypt. Wykorzystuje skrypt znajdujący się w /scripts/myscript.php dwa parametry GET (q i docelowy). Zaleca się kodowanie wartości za pomocą encodeURIComponent.

po zamiast GET

Aby przesłać dane do serwera objętości większej niż 512 bajtów, należy użyć POST nowy JavaScript XMLHttpRequest JavaScript w XML 34 zamiast GET. W przypadku otrzymania danych post, trzeba zmienić typ zapytania MIME, przy użyciu nagłówka Content-Type i przekazywanie zmiennych zadzwonić wysyłkę. Ostatnia część funkcji loadXMLDoc zmienia się, jak pokazano na poniższym zdjęciu.Większość trzeci otwarty parametr polecenia może zostać zatrzymany. Wartość true oznacza, że ​​połączenie powinno być asynchroniczny - skrypt nadal nie czekając na odpowiedź XML, który jest już domyślnym. Przesłanie wartości false prowadzi do zatrzymania skryptu przed odebraniem odpowiedzi. Skrypt odwołuje URL, skrypt jest po stronie serwera (PHP, Perl lub podobny). Zwraca poprawnie sformatowany dokument XML. Aby uniknąć ostrzeżenia zabezpieczeń przeglądarki, musi znajdować się w tej samej domenie co strona ma być dostępnyprzez HTTP lub HTTPS.

Przesyłanie z javascript do skryptu serwera

Funkcja przetwarzająca odpowiedź (na przykład processReqChange) musi być w stanie rozpakować i przetworzyć otrzymany kod XML. Ten diagram pokazuje, w jaki sposób dane są przesyłane z javascript do skryptu serwera iz powrotem. Zasada jest dość prosta. Zwrócony dokument XML będzie zawierał jedno lub więcej poleceń wykonywanych sekwencyjnie - w celu wygenerowania alertów, zmiany wartości formularza lub zarządzania DOMem. Odbywa się to za pomocą funkcji processReqChange.

Dostępne polecenia

W sumie siedem różnych poleceń, które mogą być wywołane przez bibliotekę obiektów:

alert (komunikat) - wyświetla ostrzeżenie javascript.

setvalue (cel, wartość) - ustaw wartość pola formularza z identyfikatorem celu.

setdefault (target) - resetuje wartość pola formularza.

focus (cel) - ustaw fokus na pole formularza.

setcontent (cel, zawartość) - ustaw wewnętrzny HTML elementu HTML.

setstyle (cel, wartość właściwości) - ustaw styl elementu HTML.

setproperty (target, property value) - ustaw właściwość elementu HTML.

W każdym przypadku celem jest identyfikator odnoszący się do elementu strony HTML. Inne wartości to tekst lub HTML do dodawania dodatkowych parametrów do funkcji processReqChange.

Generowanie odpowiedzi XML za pomocą PHP

Opisane tutaj funkcje są przeznaczone dla programistów PHP, którzy nie chcą zbyt wiele wiedzieć o javascript, ponieważ po wysłaniu pierwszego żądania nie jest wymagany żaden inny JScript. Plik XML (generuje ostrzeżenie, na przykład, w przypadku, gdy kliknięcie poniższego linku tworzy oknoJS tekst ostrzegawczy «Hello World!») - jest ważnym pierwszym krokiem w dowolnym języku programowania.Poniżej odpowiedź obciążenie XML jakiś tekst w elemencie na stronie. W tym przypadku wniosek, który ma id 2 pojawi się w div. Zamiast div zawartość można łatwo nagłówek, akapit lub komórek tabeli: przyklad2 hello world.Jak wspomniano wcześniej, możesz wstawić HTML, a nie tekst i zwrócić dynamiczne, a nie statyczne dane. Poniższe żądanie XML jest generowane przy użyciu PHP, aby wstawić bieżącą datę i godzinę.Internet Explorer będzie buforować Odpowiedz na XML i używaj go do przyszłych zapytań. Oznacza to, że dane wyjściowe nigdy się nie zmienią. Inne przeglądarki powodują za każdym razem nowe żądanie. Wszystkie przeglądarki obsługujące DOM akceptują backgroundColor, ponieważ nazwa stylu ma kolor tła, który jest bardziej "poprawny" i działa tylko w niektórych z nich. Wartość ta może być generowane „w locie” za pomocą PHP lub inny serwer. Pierwsze polecenie ustawia kolor tła w polu Witaj świecie na żółty (# ff0), a drugi na losowy (czerwony, zielony lub niebieski). Zespoły są głównie związane z tworzeniem pól - ustawianiem /resetowaniem wartości w polu i ustawianiem ostrości. Są przydatne przy sprawdzaniu formularza po stronie serwera w czasie rzeczywistym, kiedy trzeba przeglądać dane bez ponownego uruchamiania.aktualna strona.

Tworzenie XML przy użyciu javascript

Istnieje kilka różnych sposobów, aby połączyć się z loadXMLDoc. Na przykład, związek ma kształt jako pierwszy parametr, a następnie dwa dodatkowe zmienne. Pomyślne wywołanie loadXMLDoc zwraca wartość "yes". onsubmit handler zwróci "kłamstwo". Anulując domyślną akcję, przedstawi zdarzenie, które w przeciwnym razie spowodowałoby formularz. Dalsza realizacja jest przez Ajax, ponieważ przeglądarka nie trzeba ładować nową stronę. Nieudane wywołanie loadXMLDoc zwraca wartość "kłamstwa". onsubmit obsługi powróci „prawda”, w wyniku formy zostaną przedstawione w zwykły sposób. Dalsze wykonywanie odbywa się za pomocą nonAjaxTarget.html.Przykład zapobiec funkcję buforowania wartości odpowiedzi cookie javascript xmlhttprequest. Niektóre przeglądarki będzie buforować GET żądania są wykonane przy użyciu XHR, po pierwsze wezwanie do następnego z tego samego scenariusza właśnie wznowiona pierwszej odpowiedzi. Aby obejść ten problem, należy dodać losowy ciąg lub timestamp do wniosku, jak pokazano na zdjęciu poniżej:Jeśli skrypt zwraca zawsze tę samą odpowiedź dla podanych parametrów, to nie martw się o to, ponieważ pamięć podręczna jest stosowany w celu przyspieszenia programu. Podsumowując, jak łatwo pracować z Ajax przy użyciu tej struktury, trzeba tylko postępowaćDziałania:

Skonfiguruj skrypt po stronie serwera, aby zaakceptować parametry GET lub POST lub COOKIE i zwróć prawidłowy plik XML.

Określ plik JS xmlhttp.js na stronie.

Użyj javascript, aby zadzwonić.

Połączenia odwrotne Ajax można tworzyć, tworząc instancję obiektu XHR w kliencie JScript. javascript XMLHttpRequest get może być użyty do bezpośredniego wywoływania obiektów serwerów, takich jak strony i usługi sieciowe. Będą przechowywać lub obracać dane. Ajax był pierwotnie akronimem asynchronicznego JS i XML. "Asynchroniczny" oznacza, że ​​kilka zdarzeń występuje absolutnie niezależnie od siebie. Gdy klient wywołuje oddzwonienie do serwera Ajax, nie musi czekać na odpowiedź, ponieważ może dalej korzystać z aplikacji internetowej podczas przetwarzania żądania. Następnie serwer odpowie na klienta, który przetworzy go w razie potrzeby.