[Musikwiedergabe] DOUG LLOYD: Und noch ein Art von Vorstellung, dass Art fällt unter dem Dach JavaScript ist etwas namens AJAX. Bis zu diesem Zeitpunkt, unsere Interaktion mit JavaScript wurde begrenzt, um eine Push- Button und etwas passiert. Und insbesondere das etwas, das passiert, ist unsere Webseiten aussehen und fühlen sich ändert. Recht? Wie insbesondere in der Document Object Model-Video, Ich habe die Hintergrundfarbe. Aber als ich das tat, hatte ich nicht keine besonderen zusätzlichen Anfragen zu tun. Ich hatte nicht zu verlangen, dass der Server senden Sie mir eine neue Seite. Ich habe gerade das, was ich schon. Ich habe nicht zu meiner Seite neu zu laden, und die Dinge auf jeden Fall verändert, so das ist großartig. Aber es gibt auf jeden Fall einige manuelle Benutzerinteraktion beteiligt. AJAX ist eine coole Technik, die erlaubt uns zu Inhalt einer Seite aktualisieren, und nicht nur das Aussehen und das Gefühl, ohne Nachladen. 

Und zwar dann, wenn ich sagen Aktualisierung Inhalt einer Seite, Ich sage nicht, schreiben wir die Seite mit Hilfe von JavaScript. Ich sage, wir tatsächlich beantragen Weitere Informationen von dem Server ohne auf unserer Seite mit zu laden. 

Nun, da das für ein bisschen eine fortgeschrittene Technik dass wir gehen, zu sprechen etwa in diesem Video. Wir werden einige Interaktion haben. Aber wenn wir das tun, werde ich zu sein Anfragen an den Webserver. In diesem Fall genau das, was ist Laufen meine Apache-Webserver. Ich werde werden was zusätzliche Anfragen während ich den Besuch einer Web-Seite, aber meine Seite nicht aktualisieren. 

Es ist gerade dabei, asynchron zu aktualisieren meiner Seite. Und das ist in der Tat die AJAX steht für, ist Asynchronous JavaScript and XML. XML ist eine andere Art von Markup Sprache, und Sie können von zu sortieren denken Sie an es wie HTML. Es ist nicht ganz dasselbe, aber es ist im Grunde nur eine Markup-Sprache. Es ist also eine asynchrone JavaScript und eine Markup-Sprache. 

Also, um diese zu verwenden AJAX technique-- AJAX kein separates Programmiersprache. Es ist nur eine Art Satz von techniques-- wir benötigen einen speziellen zu schaffen JavaScript-Objekt, das wird als XMLHttpRequest. Jetzt ist es sehr einfach, dies zu tun. Wir sagen nur var, was auch immer Wir wollen dieses Objekt aufrufen, entspricht neue XMLHttpRequest. Und jetzt haben wir jetzt erreicht haben ein AJAX Art von Objekt, oder eine XMLHttpRequest Objekt, die es erlauben uns, asynchron zu aktualisieren unsere Seite. 

Nachdem wir dieses neue bekommen Gegenstand dieses XMLHttpRequest, wir etwas tun müssen, ihre onreadystatechange Verhalten. Onreadystatechange Verhalten ist wirklich nur wenn Sie eine Anfrage machen um eine Web-Seite, die Seite geht durch eine Anzahl von Schritten. Erstens hat eine Anforderung nicht gesendet. Dann wurde der Antrag gewesen geschickt, aber nicht beaufschlagt. Dann wurde der Antrag Folge geleistet wurde. Dann ist der Wunsch wird an Sie zurückgeschickt. 

Dann wird die Anforderung in Ihre Seite vollständig geladen ist. Das sind verschiedene Zustände. Und so müssen wir unsere eingestellt neue XMLHttpRequest-Objekt um, wenn die Bereitschaftszustand ändert. Und in der Regel, die wir dies tun, indem eine anonyme Funktion, die Definition der wir sind mit von der vertrauten JavaScript Nun, das wird aufgerufen, wenn die Bereitschaftszustand ändert. Es ist wirklich nicht viel mehr als das. Wir sind gerade dabei, werden die Definition ein anonyme Funktion, Art mögen, was wir taten in JavaScript, wo wir haben eine anonyme Funktion reagieren auf ein Ein Klick oder wenn wir eine Karte zu tun Die verschiedenen Aufgaben in einem Array. 

Etwas ist passiert, wenn etwas angeklickt wurde. In diesem Fall, es ist nur etwas passiert, wenn der Zustand unserer Seite ändert. Es gibt zwei weitere Eigenschaften Diese Art von-- sie sind nicht die einzigen Eigenschaften, die sind inhärent XMLHttpRequest, aber sie sind ziemlich wichtige. Es gibt etwas namens readystate, die, wie Sie vermutlich schätzen können, ist im Zusammenhang mit onreadystatechange. Es tatsächlich sagt Ihnen, was die Readystate ist. 0, 1, 2, 3 und 4 die Möglichkeiten gibt, und sie Art von grob entsprechen dem, was Ich war gerade über vor einer Sekunde. 

Und dann Status, der hoffentlich, wenn alles OK, 200, die kurz ist für die, natürlich, OK, die wir mit von Http vertraut. So hoffen wir, dass unsere Bereitschaftszustand vier ist, und unseren Status ist 200. Und wenn unsere Bereitschaftszustand vier ist, und die Antwort ist bereit, auf die genommen werden Seite und der Status 200, wir waren in der Lage zu tun, alles erfolgreich, Jetzt können wir asynchron aktualisieren unsere Seite ohne neu zu laden der gesamte Inhalt davon. 

Nachdem wir festgelegt, was passiert, auf die onreadystatechange Verhalten, und wir haben überprüft, dass readystate 4 und Status 200, dann alles, was wir tun müssen, ist eröffnen einen asynchronen Anfrage, das gerade seine eine HTTP-GET-Anforderung im Allgemeinen. Nur tun es programmatisch, statt über unser Web-Browser. Und dann diese Anforderung senden wir. Also, was vielleicht tut dies, sehen aus wie in Zusammenhang? Also hier ist eine Funktion, beschäftigt sich mit AJAX Anfragen. OK? Und ich habe willkürlich das sie übernimmt ein Argument. Und dieses eine Art ein allgemeine Skelett hier. Ganz am Anfang, so erhalten wir uns ein neues XMLHttpRequest-Objekt. Dann muss ich das einstellen onreadystatechange Verhalten. Und so werde ich sagen, wenn die readystate ändert, Ich möchte, dass diese Funktion aufrufen. 

Die gehen, um das zu bitten Frage, ob die readystate 4 ist, wenn der Readystate geändert hat bis 4, und der Status betrug 200, so hatten wir eine erfolgreiche Anforderung, I wollen etwas auf die Seite zu tun. Und wir werden einen Blick zu nehmen ein Beispiel dessen, was dass etwas in einer Sekunde. Also, jetzt habe ich festgelegt meine anonyme Funktion, meinem Antwortfunktion, wenn die readystate ändert. 

Also brauche ich nur zu öffnen, ein anzufordern, mit der Open-Methode. Und dann habe ich diesen Antrag zu senden. Und lassen Sie uns einen Blick auf Ein konkreteres Beispiel von dem, was AJAX finden Sie auf unserer Web-Seiten zu tun. Also ich habe hier eine sehr einfache Seite namens home.html. Und ich habe ein Informations geht hier und eine Art von Dropdown-Menü. 

Und wir werden diese in einer Sekunde zu überdenken. Aber ich denke, wir sollten jetzt einen Blick auf die eigentlichen Quellcode. Und so werde ich eröffnen home.html. Und wir werden sehen, was los ist. Also bis auf hier, ganz nach oben, ich habe einige JavaScript Sachen, die vor sich geht. 

Und hier, ich habe anscheinend ein div mit der ID infodiv, und einige Informationen wird, dorthin zu gehen. Und dann habe ich dieses Formular. Und innerhalb dieses Form, ich habe etwas genannt wählen, die ist nur ein Dropdown-Menü mit einer Reihe von verschiedenen Optionen. Und anscheinend, wenn sich das ändert, wenn die Option, die ausgewählt wurde, hat geändert wird, werde ich rufen eine Funktion cs50Info, und dann werde ich gehen, um Pass in this.value, wobei es sich dabei um welche Option gewählt wurde, und Wert ist eine davon hier, Option Wert = ist gleich leer ", Blumberg," "Bowdenzug", "Chan" und "Malan." 

Also, was könnte in der Tat passieren hier, wenn ich dies tun? Nun, lassen Sie uns einen Blick auf blumberg.html. Sieht aus, als es ist nur eine Snippet einige HTML. Und in der Tat, was ich hoffe, wird hier passieren ist werde ich in der Lage, Plug sein Diese HTML direkt in meiner Web-Seite ohne neu zu laden die Seite, so dass, wenn Ich wähle Hannah aus dem Dropdown- Menü Informationen zu Hannah, insbesondere diesen Informationen hier in blumberg.html, ist, was zeigt sich auf der Seite. Und ich nicht haben, um zu aktualisieren. Und wenn ich wählte jemand anderes, ihre Informationen auftauchen würde. Wie kann ich dies tun? Auch dies erfordert uns einige AJAX verwenden. Und so werden wir ajax.js. eröffnen Und hier ist die Funktion, cs50Info. Wenn der Name nichts, kehre ich. Ich werde mich nicht, etwas zu tun, wenn die leere Option gewählt. Ansonsten bin ich zu gehen Erstellen Sie ein neues XMLHttpRequest. Und dann werde ich sagen, wenn die readystate ändert, rufen Sie diese Funktion. 

Und wenn der Readystate ist 4 und der Status 200, Hier ist ein wenig von jQuery in Zeile 13. Aber alles, was ich tue, ist zu sagen, Ändern Sie den Inhalt infodiv zu sein, was ich wieder als Antwort von meinem Httprequest. 

Was ist meine Httprequest? Na ja, das ist richtig hier auf der Linie 18 und 19. Zeile 18, ich bin im Grunde Vorbereitung eine GET-Anforderung für den Namen + .html. Und wieder, hier ist Name das Argument, war in der als Parameter an cs50Info geleitet. 

Also im Grunde bin ich in jemandes vorbei Name, der die Reihe von Optionen war dass wir in der Säge Dropdown-Menü in Form. Ich bekomme diesen Namen. Und ich sage, würde ich mag dich Sie erhalten für mich, dass file.html, und senden Sie diesen Antrag. 

Und damit onreadystatechange wird zu sein, zuhören und warten und warten und wartet, bis die readystate 4 ist, und der Status ist 200. So ist es bereit, serviert werden, und die Anforderung war erfolgreich. Und dann, wenn es sich, es zu gehen Ändern Sie den Inhalt infodiv um die Antworttext, ich zurück sein. 

Also mal sehen, wie diese könnte tatsächlich funktionieren. Also werden wir zu meinem Browser Kopf Fenster, und wir werden hier aussehen. Werfen wir also einen Blick auf was ist los hier in AJAX. Also werden wir jemanden wählen aus dem Dropdown-Menü. Also in diesem Fall, lassen Sie uns wählen Sie einfach Hannah. Und beachten Sie dass Hannahs Informationen geändert haben, aber ich hatte nicht meinen any-- Seite nicht ganz neu zu laden. Das Zeug geblieben. Die meisten Sachen waren. AJAX-Test änderte sich nicht. Der Button selbst, diese Dropdown-Menü nicht verändert. Aber Informationen gibt es änderte. Und je nachdem, wie schnell meinem Computer bewegt, Sie könnte in der Tat, dass die Inhalte zu sehen verschwindet und dann erscheint wieder wirklich schnell. Das ist der Gehalt an von infodiv gelöscht, und dann mit einem ausgetauscht neue asynchrone Anforderung. 

Also, wenn ich schalten Sie ihn zu sagen ist, Rob-- wieder zu sehen, und vielleicht werden wir es tatsächlich sehen verschwinden und wieder erscheinen schnell. Siehst du das? Wie es gerade tauchte weg, und dann ist es wieder aufgefüllt? Das ist die AJAX-Request Art statt. Und so abhängig von der Person, die ich wählen, bin ich wodurch eine andere asynchrone Anfrage an ein anderes Datei dass ich auf meinem Server. Und der Inhalt meiner infodiv aktualisieren, basierend auf dem von ihnen habe ich gewählt. Also das ist wirklich alles, was man AJAX. Es ermöglicht uns, diese asynchronen machen Anfragen, Updates auf eine Seite. Ohne aktualisieren Sie die gesamte Seite, wir gehen neue zu bekommen Inhalt von ihm, indem sie eine neue frische Anfrage an den Server. Und so können sich unsere Seiten zu werden ein bisschen mehr Dynamik. 

Und wie wir erhalten mehr und Fortgeschrittene, können Sie vielleicht Dinge wie zu bekommen sagen wir, Ihren E-Mail-Posteingang, wo Sie nicht haben, etwas zu tun. Sie verfügen nicht über ein klicken Dropdown-Menü oder klicken Sie auf nichts, und ganz plötzlich, Ihre neuesten E-Mail zeigt sich an der Spitze. Das ist auch nur eine Ajax-Anfrage. Ajax bittet um Ihre Server, die E-Mail-Server, über alle Informationen, senden Sie über Ihre neuesten E-Mails, und ändern, was Sie auf der zu sehen Bildschirm, um die neueste Reihe von E-Mails sein. Und wenn Sie eine neue in haben gibt, dann ist der Inhalt dieser div wird sich ändern, um zu reflektieren Die aktualisierte Inhalte. Ich bin Doug Lloyd. Dies ist CS50.