[MUZYKI] DOUG LLOYD: Więc jeszcze jeden rodzaj przekonania, że rodzaj spadnie pod parasolem JavaScript jest coś o nazwie AJAX. Do tego momentu, nasza Interakcja z JavaScript ograniczono do pchania przycisk i coś się dzieje. A konkretnie, coś, co się dzieje, jest nasze strony wyglądać i czuć się zmiany. Dobrze? Podobnie, jak w szczególności, w Dokument model obiektu wideo Zmieniłam kolor tła. Ale gdy to zrobiłem, nie miałem robić żadnych specjalnych dodatkowych żądań. Nie miałem do żądania serwer wysłać mi nową stronę. Właśnie zmienił to, co już było. I nie trzeba było odświeżyć moją stronę, i rzeczy, na pewno zmieniło, tak, to świetnie. Ale na pewno niektóre Instrukcja interakcji użytkownika zaangażowany. AJAX to fajna technika, która pozwala nas do aktualizacji treści strony, i to nie tylko wygląd i czują, bez przeładowywania. 

I specjalnie kiedy powiedzieć, aktualizacji treści strony, Nie mówię, że możemy przepisać strona przy użyciu JavaScript. Mówię tak naprawdę zażądać więcej informacji z serwera bez naszą stronę konieczności przeładowania. 

Teraz, jakby trochę bardziej zaawansowane techniki że będziemy rozmawiać o w tym filmie. Mamy zamiar mieć trochę interakcji. Ale kiedy my, mam zamiar być co żądań do serwera WWW. W tym przypadku, tylko to, co jest kolejny mój serwer Apache. Mam zamiar być co dodatkowe wniosków, a ja jestem odwiedzenie strony internetowej, ale moja strona nie odświeży. 

To po prostu będzie asynchronicznie zaktualizować stronę. I to jest w rzeczywistości, które AJAX oznacza, jest Asynchronous JavaScript i XML. XML jest inny rodzaj znaczników język i można sortować z myśleć o tym, jak HTML. To nie jest całkiem to samo, ale to w zasadzie tylko język znaczników. Więc to jest asynchroniczne JavaScript i język znaczników. 

Tak więc w celu wykorzystania tego AJAX technique-- AJAX nie jest odrębnym językiem programowania. To jest po prostu coś w rodzaju zestaw techniques-- my należy utworzyć specjalny Obiekt JavaScript, który Nazywa się to XMLHttpRequest. Teraz, to bardzo łatwo to zrobić. My po prostu powiedzieć, var, cokolwiek chcemy nazwać ten obiekt, równa się nowy XMLHttpRequest. A teraz mamy teraz uzyskać AJAX rodzaj obiektu, lub XMLHttpRequest Obiekt, który pozwoli nam asynchronicznie aktualizować naszą stronę. 

Po tym, jak zdobyć ten nowy Obiekt ten XMLHttpRequest, musimy coś zrobić, aby jej onreadystatechange zachowanie. Onreadystatechange zachowanie jest naprawdę kiedy złożyć wniosek do strony internetowej, na stronie przechodzi przez szereg etapów. Po pierwsze, wniosek nie został wysłany. Następnie wniosek został wysłane, ale nie wykorzystane. Następnie wniosek został rozpatrzony. Następnie wniosek jest wysłany z powrotem do Ciebie. 

Następnie wniosek jest w pełni załadowany na swojej stronie. Są różne stany. A więc musimy Wyznaczamy Nowy obiekt XMLHttpRequest zmienić, gdy gotowe zmiany stanu. I zazwyczaj robimy to definiowania anonimową funkcję, która jesteśmy zaznajomieni z od JavaScript teraz, że jest wywoływana, gdy gotowe zmiany stanu. To naprawdę nie jest dużo więcej. Jesteśmy po prostu będzie wyznaczającą funkcja anonimowa, jakby to, co robiliśmy w JavaScript, gdzie będzie mają anonimową funkcję Odpowiadanie na na kliknięcia, lub gdy robimy mapę różne obiekty w tablicy. 

Coś się stało, kiedy coś kliknął. W tym przypadku, to jest po prostu coś jest dzieje się, gdy stan naszej stronie Zmiany. Istnieją dwa inne właściwości które są rodzajem of-- nie są one tylko właściwości, które są nieodłącznym XMLHttpRequest, ale są dość istotne. Jest coś, co nazywa się readyState, które, jak można się domyślić, jest związane z onReadyStateChange. To rzeczywiście mówi, co readyState jest. 0, 1, 2, 3 i 4 są że istnieją możliwości, i rodzaj grubsza odpowiadać co Właśnie rozmawiałem około sekundę temu. 

A następnie stan, który mam nadzieję, że jeśli wszystko poszło OK, 200, który jest krótki na, oczywiście, OK, której jesteśmy zaznajomieni z http. Więc mamy nadzieję, że nasze państwo gotowe jest cztery, a nasz status jest 200. A jeśli nasz stan gotowości jest cztery, i w odpowiedzi jest gotowe do wprowadzenia na Strona, a stan jest 200, byliśmy w stanie zrobić wszystko się pomyślnie, teraz możemy asynchronicznie aktualizować naszą stronę bez konieczności przeładowania cała zawartość tego. 

Po tym jak definiuje to, co się dzieje, do zachowania onreadystatechange, a my sprawdziliśmy, że readyState jest 4 i status jest 200, to wszystko, co musisz zrobić, to otworzyć asynchroniczne wniosek, który jest tylko co ogólnie HTTP GET żądania. Po prostu robi to programowo, zamiast za pośrednictwem naszej przeglądarki internetowej. I wtedy możemy wysłać ten wniosek. Więc co to może być wygląda w kontekście? Więc tutaj jest to funkcja, która dotyczy żądań AJAX. OK? A ja arbitralnie powiedział przyjmuje argument. I to na coś w rodzaju Ogólnie szkielet tutaj. Na samym początku, mamy sobie nowy obiekt XMLHttpRequest. Potem trzeba ustawić onreadystatechange zachowanie. I tak mam zamiar powiedzieć, gdy zmienia się readyState, Chcę, żebyś wywołać tę funkcję. 

Które zamierza zapytać pytanie, czy w readyState Jest 4, jeśli readyState uległa zmianie jako 4, a status był 200 więc mieliśmy udany wniosek, że chcesz coś zrobić na tej stronie. A my spojrzeć na przykład, co że coś może być nie w drugim. Tak więc, teraz mam zdefiniowane moja anonimowa funkcja, moja funkcja odpowiedzi, kiedy zmiany readyState. 

Więc po prostu trzeba otworzyć żądać, za pomocą metody Open. A potem, wyślę ten wniosek. I rzućmy okiem na bardziej konkretny przykład czego AJAX może zrobić na naszych stronach internetowych. Więc mam tutaj bardzo prosta Strona nazywa home.html. A ja mam informację idzie tu jakieś menu rozwijanego. 

A my ponownie to w ciągu jednej sekundy. Ale myślę, że powinniśmy teraz podjąć spojrzeć na rzeczywiste kodu źródłowego. I tak, mam zamiar otworzyć home.html. I zobaczymy, co się dzieje. Więc się na samej górze tutaj, mam niektóre rzeczy JavaScript, który się dzieje. 

A tu, najwyraźniej mają div, którego ID jest infodiv, i kilka informacji będzie tam. I wtedy mam ten formularz. A wewnątrz tego Formularz, mam coś nazywany Wybierz, które jest tylko menu rozwijane z kilka różnych opcji. I najwyraźniej, kiedy to zmienia się, kiedy opcją która została wybrana jest zmieniło, mam zamiar zadzwonić niektóre funkcje cs50Info, a potem mam zamiar przechodzą w this.value, w których to dotyczy która opcja została wybrana, i wartość jest jednym z nich tutaj, opcja wartość = równa się pusty, "Blumberg" "Bowdena", "chan" i "Malan". 

Więc co może faktycznie stało tu, kiedy to zrobić? Cóż, weźmy spojrzeć na blumberg.html. Wygląda na to, że to tylko fragment jakiegoś HTML. A w rzeczywistości, co mam nadzieję, wydarzy się tutaj to będę mógł podłączyć to HTML bezpośrednio do mojej strony internetowej bez konieczności przeładowania strony, tak, że gdy Wybieram Hannah z rozwijanej listy menu, informacje o Hannah, w szczególności informacje tu w blumberg.html, jest to, co pojawia się na stronie. I nie mam, aby odświeżyć. A gdybym wybrał kogoś innego, ich informacje będą wyświetlane. W jaki sposób mogę to zrobić? Ponownie, to wymaga nas, aby korzystać z niektórych AJAX. I tak, będziemy otwierać ajax.js. I tu jest ta funkcja, cs50Info. Jeśli nazwa jest nic, wracam. Nie zamierzam nic robić, jeśli opcja pusta został wybrany. W przeciwnym razie, mam zamiar utworzyć nowy XMLHttpRequest. A potem mam zamiar powiedzieć, kiedy readyState zmiany, wywołać tę funkcję. 

A jeśli readyState jest 4, a stan 200 tu jest trochę jQuery na linii 13. Ale to wszystko robię mówi, zmienić treść infodiv za co wróciłem jako odpowiedzi z mojej HttpRequest. 

Jakie jest moje HttpRequest? Cóż, to prawda tutaj, na linii 18 i 19. Linia 18, jestem w zasadzie przygotowania GET wniosek o nazwie + .html. I znowu, nazwa tutaj jest argument, że był przekazywana jako parametr do cs50Info. 

Więc w zasadzie, jestem przekazując ktoś tu wymienić, co było, że zestaw opcji które widzieliśmy w menu rozwijane w formie. Dostaję to nazwisko. A ja mówię, że chciałbym do prosimy o uzyskanie dla mnie, że file.html, a następnie wysłać ten wniosek. 

I tak, że onreadystatechange będzie za słuchanie i czeka i czeka i czeka, aż readyState wynosi 4, a stan jest 200. Więc to jest gotowe do podania, i wniosek był udany. A jeśli tak jest, to będzie zmienić treść infodiv jako tekst odpowiedzi, że wróciłem. 

Zobaczmy więc, jak to może faktycznie pracują. Będziemy więc udać się do mojej przeglądarce okno, a zajmiemy się tutaj. Warto więc przyjrzeć się co tu się dzieje w technologii AJAX. Będziemy więc wybrać kogoś z menu rozwijanego. Więc w tym przypadku, niech wystarczy wybrać Hannah. A informacja, że ​​Hannah informacje zostały zmienione ale nie mam any-- moje Strona nie całkowicie odświeżyć. Rzeczy pozostał. Większość rzeczy została. AJAX testu nie zmieni. Sam przycisk, to w menu rozwijanym nie uległ zmianie. Ale informacje nie uległy zmianie. Oraz w zależności od tego, jak szybko moje ruchy komputerowe, rzeczywiście może zobaczyć, że treści znika i pojawia się ponownie naprawdę szybko. To treść jest usunięty z infodiv, a następnie otrzymuje z nowe asynchroniczne żądanie. 

Więc jeśli mogę przełączyć go do powiedzenia, Rob-- i znowu spojrzeć, i być może będziemy go zobaczyć w rzeczywistości znikają i pojawiają się szybko. Widzisz to? Jak to po prostu wpadliśmy z dala, a następnie napełnić? To żądanie AJAX rodzaju miejsce. I tak, w zależności od Osoba wybrać, jestem co innego asynchroniczne wniosek do innego pliku że mam na moim serwerze. A zawartość mojego infodiv aktualizowania, w oparciu o które z nich wybrałem. Więc tak naprawdę wszystko jest do technologii AJAX. To pozwala nam na te asynchroniczne wnioski, aktualizacje strony. Bez konieczności odświeżania całej strony, mamy zamiar uzyskać nowy Zawartość z niego poprzez nowy świeży żądanie do serwera. I tak nasze strony mogą stać się trochę bardziej dynamiczny. 

A ponieważ mamy więcej i bardziej zaawansowanym może uzyskać takie rzeczy jak powiedzmy, skrzynce pocztowej, gdzie nie musisz nic robić. Nie musisz do kliknięcia menu rozwijanego lub kliknij niczego, i nagle, swoje najnowsze e-mail pojawia się na górze. To też po prostu żądania AJAX. Ajax prosi swoje serwer, serwer e-mail, wysłać na wszystkich informacji o swoich najnowszych wiadomości e-mail, i zmieniając to, co widzisz na Ekran będzie twój najnowszy zestaw wiadomości e-mail. A jeśli masz nowy w tam, wówczas zawartość tej div zmieni się odpowiednio, zaktualizowana treść. Jestem Doug Lloyd. To CS50.