[Música tocando] Doug LLOYD: Entón unha tipo de noción de que tipo de cae por iniciativa da JavaScript é unha cousa chamada AJAX. Ata este punto, a nosa interacción con JavaScript foi limitada a empurrar un botón e algo acontece. E especialmente, o algo que pasa Son os nosos sitios ollar e sentir os cambios. Non? Como, en particular, no documento de vídeo modelo de obxecto, Eu mudei a cor de fondo. Pero cando eu fixen iso, eu non teño facer os solicitudes extras especiais. Non teño que pedir que servidor enviar-me unha nova páxina. Só mudei o que eu xa tiña. Non teño que actualizar miña páxina, e as cousas sempre cambiou, entón iso é gran. Pero hai sempre algúns interacción do usuario manual implicado. AJAX é unha técnica legal que permite nós para actualizar o contido dunha páxina, e non só o aspecto e sentir, sen recargar. 

E por especificamente cando dicir actualizar o contido dunha páxina, Eu non estou dicindo que reescribir a páxina usando JavaScript. Eu digo que, en realidade, solicitar máis información desde o servidor sen a nosa páxina de ter que volver cargar. 

Agora que tipo de un pouco de unha técnica máis avanzada que imos falar sobre este vídeo. Nós imos ter algunha interacción. Pero cando o facemos, eu vou ser facer peticións ao servidor web. Neste caso, só o que está correr o meu servidor web Apache. Eu vou estar facendo adicional solicitudes mentres eu estou visitando unha páxina web, pero a miña páxina non será actualizada. 

El só vai de forma asíncrona actualizar miña páxina. E iso é, de feito, AJAX que representa, é asynchronous JavaScript e XML. XML é outro tipo de cita linguaxe, e pode clasificar de pense nisto como HTML. Non é así o mesmo, pero é basicamente unha linguaxe de reserva. Polo tanto, é un asíncrono JavaScript e unha linguaxe de reserva. 

Polo tanto, a fin de utilizar este AJAX technique-- AJAX non é unha linguaxe de programación separado. É só unha especie de conxunto de techniques-- nós que crear un especial Obxecto JavaScript, que chámase un XMLHttpRequest. Agora, é moi fácil de facer. Nós só dicir var, calquera que sexa queremos chamar este obxecto, é igual a nova XMLHttpRequest. E agora nós xa obtido un tipo de obxecto AJAX, ou un XMLHttpRequest obxecto, o que permitirá nós para actualizar a páxina de xeito asíncrono. 

Despois de ter obtido esta nova obxecto, este XMLHttpRequest, temos que facer algo para o seu comportamento onreadystatechange. Onreadystatechange comportamento é realmente só cando fai unha solicitude para unha páxina web, a páxina pasa por unha serie de etapas. En primeiro lugar, unha proposta non se enviou. A continuación, a solicitude foi enviado, pero non atendido. A continuación, a petición foi atendida. A continuación, a solicitude é cargar de volta para ti. 

A continuación, a solicitude é totalmente cargado na súa páxina. Estes son estados diferentes. E por iso necesitamos definir nosa novo obxecto XMLHttpRequest para cambiar cando os cambios de estado de listo. E normalmente, facemos isto por definición dunha función anónima, o que estamos familiarizados coa dende JavaScript agora, que chámase cando os cambios de estado de listo. Non é realmente moito máis que iso. Nós só estamos indo a ser a definición dunha función anónima, unha especie de gustar do que que estabamos facendo en JavaScript, onde iríamos ten unha función anónima responder a un click en, ou cando estabamos facendo un mapa de os distintos obxectos nunha matriz. 

Algo aconteceu cando algo foi premendo. Neste caso, é só algo que é pasando cando o estado da nosa páxina cambios. Existen outras dúas propiedades que son tipo de-- non son as únicas propiedades que son inherente ao XMLHttpRequest, pero son queridos bastante importantes. Hai algo chamado readyState, que, como probablemente pode adiviñar, é relacionada coa OnReadyStateChange. De feito, dille o que o readyState é. 0, 1, 2, 3, e 4 son as posibilidades alí, e tipo de aproximadamente corresponde ao que Eu só estaba a falar de un segundo atrás. 

E despois de estado, que espero que se todo foi ben, é de 200, que é curto para, por suposto, OK, que estamos familiarizados coa partir Http. Entón, nós estamos esperando que o noso estado de prontidão é catro, eo noso estado é de 200. E se o noso estado de prontidão é de catro, ea resposta Está preparado para ser colocadas no páxina, eo estado é 200, fomos capaces de facer todo con éxito, agora podemos de forma asíncrona actualizar a páxina sen ter que recargar todo o contido do mesmo. 

Despois de termos definido o que pasa para o comportamento onreadystatechange, e temos comprobado que readyState é 4 eo estado é de 200, entón todo o que necesitamos facer é abrir un asíncrono solicitude, que non é máis que facer un HTTP GET solicitude xeral. Basta facelo a través de programación, en vez de a través do noso navegador web. E, despois, enviar esta proposta. Entón, o que fai posible que parecer no contexto? Entón aquí está unha función que trata sobre solicitudes de AJAX. OK? E eu dixen arbitrariamente el acepta un argumento. E esta unha especie de esqueleto xeral aquí. En principio, estivemos nós mesmos un novo obxecto XMLHttpRequest. Entón, eu teño que o comportamento onreadystatechange. E así eu vou dicir cando os cambios ReadyState, Quero que chamar esa función. 

Que vai pedir ao pregunta, se o readyState 4 é, se o readyState cambiou ser 4, eo estado era de 200, por iso, tivemos unha solicitude exitoso, I quero facer algo para a páxina. E nós imos dar un ollo nun exemplo do que que algo pode estar nun segundo. Así, pois, agora teño definido miña función anónima, miña función de resposta cada vez que os cambios ReadyState. 

Entón eu só precisa abrir unha solicitar, mediante o método Open. E entón, eu enviar esta proposta. E imos dar un ollo un exemplo máis concreto AJAX que pode facer nas nosas páxinas web. Entón, eu teño aquí unha forma moi simple páxina chamada home.html. E eu teño unha información vai aquí e algún tipo de menú desplegable. 

E nós imos revisar iso nun segundo. Pero creo que agora debe ter un mirar o código fonte real. E así, eu vou abrir home.html. E imos ver o que está a suceder. Así, se na parte superior aquí, teño algunhas cousas JavaScript que está pasando. 

E aquí, eu parecer teñen unha div cuxa ID é infodiv, e unha información está a ir máis alá. E entón eu teño este formulario. E dentro deste caso, eu teño algo chamado Select, que é só un menú desplegable con unha morea de opcións distintas. E, ao parecer, cando iso non cambiar, cando a opción que foi seleccionada ten cambiado, eu vou chamar algunha función cs50Info, e entón eu vou pasar this.value, onde este refírese a cal opción foi seleccionada, e valor é unha desas aquí, a opción value = coincide baleiro ", Blumberg," "Bowden", "Chan", e "Malan." 

Entón, o que realmente pode pasar aquí cando fago iso? Ben, imos dar un mirar para blumberg.html. Parece que non é máis que un tramo duns Html. E, de feito, o que eu estou esperando que vai pasar aquí é que eu vou ser capaz de conectar Este HTML directamente na miña páxina web sen ter que recargar o principal, de tal xeito que cando Eu escollo Hannah do desplegable menús, información sobre Hannah, En particular, esta información aquí en blumberg.html, é o que aparece na páxina. E eu non teño para actualizar. E se eu escollese outra persoa, información ía aparecer. Como podo facer iso? Unha vez máis, iso esixe nos usar algún AJAX. E así, imos abrir ajax.js. E aquí é que a función, cs50Info. O nome non é nada, eu volver. Non vou facer nada se a opción escollida foi baleiro. Se non, eu vou crear un novo XMLHttpRequest. E entón eu vou dicir, cando o cambios ReadyState, chamar esa función. 

E se o readyState é 4 eo estado é de 200, aquí está un pouco do jQuery na liña 13. Pero todo o que eu estou facendo está dicindo: cambiar o contido da infodiv para ser o que eu volvín como un resposta da miña HttpRequest. 

Cal é a miña HttpRequest? Ben, iso é certo aquí na liña 18 e 19. Liña 18, eu estou basicamente preparación Comezar unha solicitude de nome + .html. E unha vez máis, o nome aquí é argumento de que era pasado como un parámetro para cs50Info. 

Entón, basicamente, eu estou pasando en alguén do nome, que foi ese conxunto de opcións que vimos no desplegable menú no formulario. Estou recibindo este nome. E eu digo que me gustaría que por favor, alcanzádeme me que file.html, e, a continuación, enviar esta proposta. 

E así que vai onreadystatechange estar escoitando e esperando e esperando e en espera, ata que o readyState é 4, eo estado é de 200. Entón, está listo para ser servido, ea solicitude foi exitosa. E, a continuación, de ser, que vai cambiar o contido da infodiv para ser o texto de resposta que recibín de volta. 

Entón, imos ver como iso realmente funcionar. Entón, imos cabeza para o meu navegador fiestra, e veremos aquí. Entón, imos dar un ollo o que está a suceder aquí en AJAX. Entón, nós imos escoller alguén desde o menú desplegable. Polo tanto, neste caso, imos basta escoller Hannah. E noten que Hannah de información cambiou, pero eu non tiven o meu any-- A páxina non enteiramente actualizar. As cousas quedaron. A maioría das cousas quedaron. AJAX Proba non se alterou. O propio botón, este desplegable menú non cambiou. Pero a información non se alterou. E dependendo de quão rapidamente meus movementos de ordenador, realmente pode ver que o contido desaparece e despois reaparece realmente rapidamente. Ese é o contido a ser excluída do infodiv, e, a continuación, substituído cun nova solicitude asíncrono. 

Entón, se eu mudalo para ser dicir, Rob-- e unha vez máis, un ollo, e quizais nós imos velo realmente desaparecen e reaparecen rapidamente. Ve iso? Como el só bateu para lonxe, e, a continuación, volver a encher? Ese é a solicitude de AJAX tipo de produciron. E así, dependendo da persoa que eu escoller, eu son facendo unha asíncrono diferente solicitude para un ficheiro diferente que eu teño no meu servidor. E o contido da miña infodiv está a actualizar, a base do cal delas escollín. Entón iso é realmente todo o que hai para AJAX. El nos permite facer estas asíncrono solicitudes, actualizacións a unha páxina. Sen ter que actualizar a páxina enteira, nós estamos indo a obter novo contido a partir del, facendo un novo nova petición ao servidor. E así, as nosas páxinas poden chegar a ser un pouco máis dinámico. 

E como nós comezamos máis e máis avanzado, vostede pode facer as cousas como digamos, a súa caixa de entrada de correo electrónico, onde non ten que facer nada. Non ten que facer clic nun desplegable menú ou premer en nada, e, de súpeto, o seu máis novo correo electrónico aparece na parte superior. Isto tamén é só unha solicitude do Ajax. Ajax está solicitando o seu servidor, servidor de correo electrónico, para enviar máis de toda a información sobre os seus últimos correos electrónicos, e cambiar o que ves na pantalla para ser o seu último conxunto de correos electrónicos. E se ten un novo en alí, a continuación, o contido deste div será modificado para reflectir o contido actualizado. Eu son Doug Lloyd. Este é CS50.