[REPRODUCCIÓ DE MÚSICA] DOUG LLOYD: Així que un més tipus de noció que tipus de caigudes sota el paraigua de JavaScript és una cosa que es diu AJAX. Fins a aquest punt, la nostra interacció amb JavaScript s'ha limitat a empènyer una botó i alguna cosa passa. I concretament, la cosa que passa és dels llocs veuen i se senten els canvis. Oi? Igual que en particular, en el document de model d'objectes de vídeo, He canviat el color de fons. Però quan ho vaig fer, jo no tenia fer alguna petició especial. Jo no he de demanar que el servidor m'envia una nova pàgina. Acabo de canviar el que ja tenia. Jo no he de recarregar la meva pàgina, i les coses van canviar definitivament, així que això és genial. Però definitivament hi ha alguns la interacció de l'usuari Manual involucrat. AJAX és una tècnica fresca que permet amb nosaltres per modificar el contingut d'una pàgina, i no només l'aspecte i sentir, sense recarregar. 

I per específicament quan dir l'actualització de contingut d'una pàgina, No estic dient que reescrivim la pàgina utilitzant JavaScript. Estic dient que en realitat demanem més informació des del servidor sense la nostra pàgina d'haver de recarregar. 

Ara aquest tipus d'una mica de una tècnica més avançada que parlarem sobre aquest vídeo. Tindrem una mica d'interacció. Però quan ho fem, jo ​​seré fer peticions al servidor web. En aquest cas, només el que és córrer el meu servidor web Apache. Vaig a estar fent addicional peticions mentre estic visitant una pàgina web, però la meva pàgina no s'actualitzarà. 

És només va a actualitzar de forma asíncrona meva pàgina. I això és, de fet, AJAX que significa, és Asynchronous JavaScript i XML. XML és un altre tipus de marques idioma, i es pot ordenar de pensar en ell com HTML. No és exactament el mateix, però és bàsicament un llenguatge de marques. Així que és un asíncron JavaScript i un llenguatge de marques. 

Així que per tal d'utilitzar aquest AJAX technique-- AJAX no és un llenguatge de programació independent. És només una mena de conjunt de techniques-- ens necessitarà crear un especial Objecte JavaScript, el que s'anomena XMLHttpRequest. Ara, és molt fàcil de fer això. Ens limitem a dir var, qualsevol que sigui volem cridar a aquest objecte, és igual a nou XMLHttpRequest. I ara que ja hem obtingut una mena d'AJAX d'objecte, o XMLHttpRequest objecte, el que permetrà amb nosaltres per modificar de forma asíncrona nostra pàgina. 

Després d'haver aconseguit aquest nou objecte, aquest XMLHttpRequest, hem de fer alguna cosa per a la seva comportament onreadystatechange. Onreadystatechange comportament és realment només quan vostè fa una petició a una pàgina web, la pàgina passa a través d'una sèrie de passos. En primer lloc, una petició no ha estat enviat. Després, la sol·licitud ha estat enviat, però no actuar en conseqüència. A continuació, la sol·licitud ha estat actuar en conseqüència. Llavors la petició és de ser enviat de nou a vostè. 

Llavors, la sol·licitud es totalment carregada a la seva pàgina. Aquests són els diferents estats. I així hem de fixar la nostra nou objecte XMLHttpRequest canviar quan canvia l'estat Llista. I en general, ho fem per definir una funció anònima, que estem familiaritzats amb d' JavaScript ara, que es diu quan canvia l'estat Llista. En realitat no és molt més que això. Només anem a definir una funció anònima, alguna cosa així com el que que estàvem fent en JavaScript, on ens faria tenen una funció anònima respondre a una de clic, o quan estàvem fent un mapa de els diversos objectes en una matriu. 

Alguna cosa va passar quan alguna cosa s'ha fet clic. En aquest cas, és només una cosa és succeeix quan l'estat de la nostra pàgina canvis. Hi ha altres dues propietats que són una espècie de-- no ho són les úniques propietats que són inherent a XMLHttpRequest, però són els prou importants. Hi ha alguna cosa que es diu readyState, que com es pot endevinar, està relacionat amb onreadystatechange. En realitat, li diu el que el readyState és. 0, 1, 2, 3, i 4 són les possibilitats allà, i quin tipus de més o menys corresponen al que Estava parlant fa aproximadament un segon. 

I llavors d'estat, que espero que si tot ha anat bé, és 200, que és l'abreviatura per, per descomptat, està bé, que estem familiaritzats amb http. Així que estem esperant que el nostre estat a punt és de quatre, i el nostre estat és 200. I si el nostre estat a punt és de quatre, i la resposta ja es podrà posat sobre la pàgina, i l'estat és de 200, hem estat capaços de fer tot amb èxit, ara podem asíncrona actualitzar la nostra pàgina sense haver de recarregar tot el contingut de la mateixa. 

Després hem definit el que succeeix al comportament onreadystatechange, i hem comprovat que readyState és 4 i l'estat és de 200, llavors tot el que hem de fer és obrir una asíncrona sol·licitud, que s'acaba de fer 1 HTTP GET general petició. Només fer-ho mitjançant programació, en lloc de a través del nostre navegador web. I llavors vam enviar aquesta sol·licitud. Llavors, què fa això potser assemblar-se en el seu context? Així que aquí hi ha una funció que s'ocupa de les peticions AJAX. D'ACORD? I jo he dit de manera arbitrària accepta un argument. I això una mena de esquelet en general aquí. Al començament, obtenim nosaltres mateixos un nou objecte XMLHttpRequest. Llavors, he de establir el comportament onreadystatechange. I pel que vaig a dir quan els canvis readyState, Vull que crida a aquesta funció. 

Què va a demanar a la pregunta, si el readyState és 4, si el readyState ha canviat a ser 4, i l'estat era 200, així que vam tenir una sol·licitud reeixida, em voler fer alguna cosa a la pàgina. I anem a fer una ullada un exemple del que que alguna cosa podria estar en un segon. Així que, ara que he definit la meva funció anònima, la meva funció de resposta de sempre els canvis readyState. 

Així que només cal obrir un sol·licitar, mitjançant el mètode Open. I després, li envio la sol·licitud. I anem a fer una ullada a un exemple més concret del que AJAX pot fer en les nostres pàgines web. Així que tinc aquí una molt simple Pàgina diu home.html. I tinc una informació va aquí i una mena de menú desplegable. 

I anem a tornar a aquest en un segon. Però crec que ara hem de prendre una mirar el codi font real. I així, vaig a obrir home.html. I anem a veure el que està passant. Així que fins al capdamunt aquí, tinc algunes coses de JavaScript que està passant. 

I aquí, pel que sembla tinc un div el ID és infodiv, i alguna informació va a anar-hi. I després tinc aquest formulari. I dins d'aquest forma, tinc alguna cosa anomenat Select, que és només un menú desplegable amb un munt d'opcions diferents. I pel que sembla, quan això canvia, quan l'opció que s'ha seleccionat té canviat, vaig a trucar a alguna funció cs50Info, i després em vaig a Va esdevenir en this.value, on això es refereix a quina opció va ser seleccionada, i el valor és un d'ells aquí, l'opció valor = iguals buit ", Blumberg," "Bowden", "chan" i "Malan." 

Llavors, què podria realitat passar aquí quan faig això? Bé, anem a fer una mira blumberg.html. Sembla que és només un fragment d'alguna cosa d'HTML. I de fet, ho estic esperant que passarà aquí és que em vaig a ser capaç de connectar Aquest HTML directament a la pàgina web sense haver de recarregar a la pàgina, de manera que quan Trio Hannah des del desplegable menú, informació sobre Hannah, En particular, aquesta informació aquí a blumberg.html, és el que apareix a la pàgina. I jo no he de refrescar. I si jo em poso a algú més, la seva informació es presentava. Com puc fer això? Un cop més, això requereix que usem alguns AJAX. I així, ens obrim ajax.js. I aquí és aquesta funció, cs50Info. Si el nom no és res, que jo torni. Jo no faré res si l'opció de buit ha estat elegit. Altrament, vaig a crear un nou XMLHttpRequest. I llavors jo vaig a dir, quan el canvis readyState, criden a aquesta funció. 

I si el readyState és 4 i l'estat és 200, aquí està una mica de jQuery en la línia 13. Però tot el que estic fent és a dir, canviar el contingut de infodiv per ser el vaig tornar com resposta de la meva HttpRequest. 

Quin és el meu HttpRequest? Bé, això és correcte aquí a la línia 18 i 19. Línia 18, estic bàsicament preparar una petició GET per al nom + .html. I de nou, el nom que aquí és l'argument que era passat com un paràmetre per cs50Info. 

Així que, bàsicament, estic passant en algú de nom, que era el conjunt d'opcions que vam veure al al menú desplegable en el formulari. M'estic posant aquest nom. I jo estic dient que t'agradaria si us plau obtingui per a mi que file.html, i després enviar aquesta sol·licitud. 

I perquè onreadystatechange va estar escoltant i esperant i esperant i esperant, fins que el readyState és 4, i l'estat és de 200. Perquè estigui a punt per ser servit, i la sol·licitud s'ha realitzat correctament. I després, si ho és, que va a canviar el contingut de infodiv sent el text de resposta que em van donar l'esquena. 

Així que anem a veure com això realment podria funcionar. Així que ens dirigim a la meva navegador finestra, i anem a veure aquí. Així que donem una ullada a ¿Què està passant aquí a AJAX. Així que anem a triar a algú al menú desplegable. Així que en aquest cas, anem a acaba de triar Hannah. I fixeu-vos que Hannah informació ha canviat, però jo no tenia el meu any-- pàgina no enterament recarregar. Les coses es va quedar. La majoria de les coses es van quedar. Prova AJAX no va canviar. El botó de si mateix, aquest menú desplegable no va canviar. Però la informació no va fer el canvi. I depenent de com ràpidament el meu ordinador es mou, en realitat es pot veure que el contingut desapareix i després reapareix realment ràpidament. Aquest és el contingut de ser esborrat de infodiv, i després reemplaçat amb una nova sol·licitud asíncrona. 

Així que si em canvi a ser dir, Rob-- i una altra, mirin, i potser anem a veure el que realment desaparèixer i reaparèixer ràpidament. Vostè veu això? Com acaba de fer esclatar de distància, i després es va tornar a omplir? Aquesta és la petició AJAX tipus de produir-se. I així, en funció de la persona trio, jo sóc fer una asíncron diferent sol·licitud a un fitxer diferent que tinc al meu servidor. I el contingut del meu infodiv estan actualitzant, basat en quin d'aquests que he triat. Així que això és realment tot el que cal AJAX. Se'ns permet fer aquestes asíncron peticions, canvis a una pàgina. Sense haver de actualitzar la pàgina sencera, anem a obtenir nova contingut de la informació fent una nova nova sol·licitud al servidor. I per això, les nostres pàgines poden arribar a ser una mica més dinàmic. 

I a mesura que més i més avançat, podria fer les coses com per exemple, la safata d'entrada de correu electrònic, en el qual no has de fer res. No ha de fer clic en un menú desplegable o feu clic a qualsevol cosa, i, de sobte, la seva més recent correu electrònic apareix a la part superior. Això també és només una petició Ajax. Ajax està sol·licitant el seu servidor, el servidor de correu electrònic, per enviar a través de tota la informació sobre els seus últims correus electrònics, i el canvi del que es veu a la pantalla per ser el seu joc més recent de missatges de correu electrònic. I si vostè té una nova en allà, llavors el contingut d'aquest div canviarà per reflectir el contingut actualitzat. Sóc Doug Lloyd. Això és CS50.