[MUSIC JOC] DOUG LLOYD: Deci încă o un fel de noțiune care un fel de cădere sub umbrela JavaScript este ceva numit AJAX. Până la acest punct, ne interacțiunea cu JavaScript a fost limitat la o împinge buton și se întâmplă ceva. Și precis, ceva ce se întâmplă este site-ul nostru arata si se simt schimbări. Dreapta? Ca și în special, în Document Object Model videoclip, Am schimbat culoarea de fundal. Dar când am făcut asta, nu am avut de a face orice solicitări suplimentare speciale. Nu am avut de a solicita ca serverul trimite-mi o nouă pagină. Am schimbat deja ceea ce am avut. Nu am avut să reîncărcați pagina mea, și lucrurile au schimbat cu siguranta, așa că e minunat. Dar nu e cu siguranta unele interacțiunea manualul de utilizare în cauză. AJAX este o tehnica care permite rece ne pentru a actualiza conținutul unei pagini, și nu doar aspectul și simt, fără reîncărcare. 

Și în mod special atunci când am spune actualizarea conținutul unei pagini, Nu spun am rescrie pagina folosind JavaScript. Spun am de fapt cere mai multe informații de la server fără a avea pagina noastră pentru a reîncărca. 

Acum, că un fel de un pic de o tehnică mai avansată că vom vorbi despre în acest film. Vom avea unele interacțiune. Dar când o vom face, am de gând să fie ceea ce face cereri serverul de web. În acest caz, doar ceea ce este rulează serverul meu de web Apache. Am de gând să fie de luare suplimentare solicitări în timp ce eu sunt vizita o pagină web, dar pagina mea nu se va actualiza. 

E doar de gând să actualiza asincron pagina mea. Și asta e, de fapt, care vine de la AJAX, este Asynchronous JavaScript si XML. XML este un alt tip de marcaj limbă, și vă pot sorta de cred că de ea la fel ca HTML. Nu e chiar același lucru, dar este practic doar un limbaj de marcare. Deci, este o asincron JavaScript și un limbaj de marcare. 

Deci, în scopul de a utiliza acest AJAX technique-- AJAX nu este un limbaj de programare separată. E doar un fel de set de techniques-- ne nevoie pentru a crea un speciale Obiect JavaScript, care se numește un XMLHttpRequest. Acum, e foarte ușor să faci acest lucru. Doar spunem var, indiferent de vrem să numim acest obiect, este egal cu noi XMLHttpRequest. Și acum am obținut acum un fel de AJAX obiect, sau un XMLHttpRequest obiect, ceea ce va permite ne pentru a actualiza în mod asincron pagina noastră. 

După ce am ajuns la această nouă obiect, acest XMLHttpRequest, trebuie să facem ceva pentru a acesteia comportament onreadystatechange. Onreadystatechange Comportamentul este de fapt doar atunci când face o cerere la o pagină web, pagina trece printr-o serie de etape. În primul rând, o cerere nu a fost trimis. Apoi, cererea a fost trimis, dar nu a acționat asupra. Apoi, cererea a primit răspuns. Apoi cererea este fiind trimis înapoi la tine. 

Apoi, cererea este complet încărcate în pagina ta. Acestea sunt diferite state. Și așa trebuie să stabilim nostru nou obiect XMLHttpRequest pentru a schimba atunci când a gata modificările de stat. Si de obicei, vom face acest lucru prin definind o funcție anonim, care suntem familiarizați cu de la JavaScript acum, că este numit atunci când a gata modificările de stat. Este într-adevăr nu mai mult decât atât. Noi doar va fi definirea unui Funcția anonimă, un fel de ceea ce făceam în JavaScript, unde ne-ar au o funcție anonim răspunde la un clic pe, sau atunci când am fost a face o hartă a diverse obiecte într-o matrice. 

Ceva sa întâmplat când ceva a fost făcut clic. În acest caz, e doar ceva este se întâmplă în cazul în care starea de pagina noastră modificări. Există alte două proprietăți care sunt un fel de-- nu sunt singurele proprietăți care sunt inerente XMLHttpRequest, dar sunt destul de importante cele. Exista ceva numit readyState, care, după cum puteți ghici, probabil,, este legată de onreadystatechange. Este de fapt, vă spune ceea ce este readyState. 0, 1, 2, 3, 4 și sunt posibilitățile de acolo, și ei un fel de aproximativ corespund cu ceea ce Tocmai vorbeam despre acum o secundă. 

Și atunci statutul, care sperăm dacă totul a mers bine, este 200, care este prescurtarea pentru, desigur, OK, care suntem familiarizați cu de la HTTP. Deci suntem în speranța că statul nostru gata este de patru, și statutul nostru este de 200. Și dacă statul nostru gata este de patru, iar răspunsul este gata pentru a fi pus pe pagină, iar starea este de 200, am fost în stare să facă totul cu succes, Acum putem asincron actualiza pagina noastra fără a fi nevoie să reîncărcați întregul conținut al acestuia. 

După ce am definit ceea ce se întâmplă la comportamentul onreadystatechange, și am verificat că readyState este de 4 și de stare este de 200, atunci tot ce trebuie să facem este deschide un asincron cerere, care este doar face un HTTP GET, în general, cerere. Doar o faci programare, în loc de prin intermediul browser-ul nostru. Și apoi ne-am trimite această cerere. Deci, ce face acest lucru, poate arata ca in context? Deci, aici este o funcție care se ocupă cu cererile AJAX. OK? Și am zis în mod arbitrar se acceptă un argument. Și aceasta un fel de schelet generală aici. La început, ne ne un nou obiect XMLHttpRequest. Apoi, am nevoie pentru a seta comportament onreadystatechange. Și așa am de gând să spun atunci când se schimbă readyState, Vreau să apelați această funcție. 

Care este de gând să solicita întrebare, în cazul în care readyState este de 4, în cazul în care sa schimbat readyState să fie 4, iar starea a fost de 200, asa ca am avut o cerere de succes, am vrei să faci ceva la pagina. Și vom arunca o privire la un exemplu de ceea ce că ceva ar putea fi într-o secundă. Deci, acum am definit funcția mea anonim, funcția mea de răspuns ori de câte ori modificările readyState. 

Deci am nevoie doar pentru a deschide un solicita, folosind metoda deschisă. Și apoi, am trimis această cerere. Și haideți să aruncăm o privire la un exemplu mai concret de ce AJAX poate face pe paginile noastre web. Așa că am aici o foarte simplu pagină numită home.html. Și am o informație merge aici și un fel de meniu drop-down. 

Și vom revedea aceasta într-o secundă. Dar cred că ar trebui să o acum uita-te la codul sursă actuale. Și așa, am de gând să deschidă home.html. Și vom vedea ce se întâmplă. Deci, până la foarte de sus de aici, am unii JavaScript lucruri pe care se întâmplă. 

Și aici, eu se pare că au un div a cărui identitate este infodiv, și unele informații este de gând să meargă acolo. Și apoi am acest formular. Și în interiorul acestei formă, am ceva numit Select, care este doar un meniu drop-down cu un buchet de diferite opțiuni. Și se pare că, atunci când, care se schimbă, atunci când opțiunea care a fost selectat are schimbat, am de gând pentru a apela o funcție cs50Info, și apoi am de gând să trece în this.value, în cazul în care aceasta se referă la ce opțiune a fost selectat, și valoare nu este una dintre acestea aici, opțiunea Valoarea = este egal cu gol, "Blumberg," "Bowden," "canal", și "Malan." 

Deci, ceea ce ar putea de fapt se întâmplă aici atunci când fac acest lucru? Ei bine, haideți să aruncăm o uita-te la blumberg.html. Se pare ca este doar o fragment de unele HTML. Și, de fapt, ceea ce sper se va întâmpla aici este am de gând să fie în măsură să conectați acest cod HTML direct în pagina mea de web fără a fi nevoie să reîncărcați pagina, astfel încât atunci când Aleg Hannah din meniul drop-down meniu, informații despre Hannah, în special, aceste informații aici, în blumberg.html, este ceea ce apare pe pagina. Și nu am să refresh. Și dacă am ales altcineva, Informații lor ar apărea. Cum pot face acest lucru? Din nou, acest lucru necesită ne de a utiliza unele AJAX. Și astfel, vom deschide ajax.js. Și aici este acea funcție, cs50Info. Dacă numele nu este nimic, mă întorc. Eu nu am de gând să fac nimic dacă opțiunea gol a fost ales. În caz contrar, am de gând să a crea un nou XMLHttpRequest. Și apoi am de gând să spun, în cazul în care Schimbări readyState, apelați această funcție. 

Și dacă este readyState 4 și starea este 200, aici e un pic de jQuery pe linia 13. Dar tot ce fac este de a spune, schimba conținutul infodiv să fie orice m-am întors ca un răspuns din HttpRequest meu. 

Ce este HttpRequest meu? Ei bine, ce-i drept aici, pe linia 18 și 19. Line 18, mă pregătesc de fapt o cerere de nume + .html GET. Și din nou, numele aici este argumentul care a fost a trecut în ca parametru de cs50Info. 

Deci, practic, eu sunt asociate în cuiva nume, care a fost ca set de opțiuni că am văzut în meniul vertical în formă. Primesc acest nume. Iar eu spun că te-ar plăcea să Vă rugăm să obțină pentru mine că file.html, și apoi trimiteți cererea. 

Și astfel încât onreadystatechange se întâmplă a asculta și de așteptare și de așteptare și de așteptare, până la readyState este de 4, iar starea este de 200. Deci, este gata pentru a fi servit, și cererea a fost de succes. Și apoi, dacă este, o să schimba conținutul infodiv pentru a fi textul de răspuns pe care m-am întors. 

Deci, hai sa vedem cum acest s-ar putea lucra efectiv. Deci, vom peste cap de la browser-ul meu fereastră, și ne vom uita aici. Deci, haideți să aruncăm o privire la ce se întâmplă aici, în AJAX. Așa că vom alege pe cineva din meniul drop-down. Deci, în acest caz, să doar alege Hannah. Și observați că lui Hannah informații sa schimbat, dar nu am avut any-- meu Pagina nu a reîncărca în întregime. Lucruri rămas. Cele mai multe din lucrurile rămas. AJAX de testare nu sa schimbat. Butonul în sine, acest meniul vertical nu sa schimbat. Dar informațiile nu sa schimbat. Și în funcție de modul rapid miscari calculatorul meu, de fapt tu s-ar putea vedea că conținutul dispare și apoi reapare într-adevăr repede. Asta e conținutul fiind elimină din infodiv, și apoi înlocuit cu un nouă cerere asincron. 

Deci, dacă am trece să fie spus, Rob-- și din nou, să ia o privire, și poate vom vedea de fapt dispar și reapar rapid. Vezi asta? Cum mi-a venit doar departe, și apoi reumplut? Asta e cererea AJAX un fel de a lua loc. Și astfel, în funcție de persoană aleg, eu sunt a face o asincron diferit cerere unui alt fișier că am pe serverul meu. Și conținutul meu infodiv sunt actualizarea, bazate pe care dintre acestea le-am ales. Așa că într-adevăr tot ce e de AJAX. Ea ne permite de a face aceste asincron cereri, actualizări o pagină. Fără a fi nevoie să refresh întreaga pagină, vom obține noi conținut de la ea de a face o nouă cerere în stare proaspătă către server. Și astfel, paginile noastre pot deveni destul de un pic mai dinamică. 

Și, după cum am obține mai mult și mai avansate, tu s-ar putea obține lucruri, cum ar fi să zicem, email-ul, în cazul în care nu trebuie să faci nimic. Nu trebuie să faceți clic pe un meniul vertical sau faceți clic pe nimic, și dintr-o dată, cele mai noi tău e-mail apare în partea de sus. Asta e, de asemenea, doar o cerere de Ajax. Ajax solicită ta server, serverul de e-mail, pentru a trimite peste toate informațiile despre cele mai recente e-mailuri, și schimbarea ce vedeți pe ecran pentru a fi cele mai noi setul de e-mailuri. Și dacă aveți un nou acolo, atunci conținutul care div se va schimba pentru a reflecta conținutul actualizat. Sunt Doug Lloyd. Acest lucru este CS50.