[REPRODUCCIÓN DE MÚSICA] DOUG LLOYD: Así que uno más tipo de noción de que tipo de caídas bajo el paraguas de JavaScript es algo que se llama AJAX. Hasta este punto, nuestra interacción con JavaScript se ha limitado a empujar una botón y algo sucede. Y concretamente, la algo que sucede es de los sitios ven y se sienten los cambios. ¿Correcto? Al igual que en particular, en el documento de modelo de objetos de vídeo, He cambiado el color de fondo. Pero cuando lo hice, yo no tenía hacer alguna petición especial. Yo no tengo que pedir que el servidor me envía una nueva página. Acabo de cambiar lo que ya tenía. Yo no tengo que recargar mi página, y las cosas cambiaron definitivamente, así que eso es genial. Pero definitivamente hay algunos la interacción del usuario Manual involucrado. AJAX es una técnica fresca que permite con nosotros para modificar el contenido de una página, y no sólo el aspecto y sentir, sin recargar. 

Y por específicamente cuando decir la actualización de contenido de una página, No estoy diciendo que reescribimos la página utilizando JavaScript. Estoy diciendo que en realidad pedimos más información desde el servidor sin nuestra página de tener que recargar. 

Ahora ese tipo de un poco de una técnica más avanzada que vamos a hablar acerca de este video. Vamos a tener un poco de interacción. Pero cuando lo hacemos, yo voy a ser hacer peticiones al servidor web. En este caso, sólo lo que es correr mi servidor web Apache. Voy a estar haciendo adicional peticiones mientras estoy visitando una página web, pero mi página no se actualizará. 

Es sólo va a actualizar de forma asíncrona mi página. Y eso es, de hecho, AJAX que significa, es Asynchronous JavaScript y XML. XML es otro tipo de marcas idioma, y ​​se puede ordenar de pensar en él como HTML. No es exactamente lo mismo, pero es básicamente un lenguaje de marcas. Así que es un asíncrono JavaScript y un lenguaje de marcas. 

Así que con el fin de utilizar este AJAX technique-- AJAX no es un lenguaje de programación independiente. Es sólo una especie de conjunto de techniques-- nos necesitará crear un especial Objeto JavaScript, lo que se denomina XMLHttpRequest. Ahora, es muy fácil de hacer esto. Nos limitamos a decir var, cualquiera que sea queremos llamar a este objeto, es igual a nuevo XMLHttpRequest. Y ahora que ya hemos obtenido una especie de AJAX de objeto, o un XMLHttpRequest objeto, lo que permitirá con nosotros para modificar de forma asíncrona nuestra página. 

Después de haber conseguido este nuevo objeto, este XMLHttpRequest, tenemos que hacer algo para su comportamiento onreadystatechange. Onreadystatechange comportamiento es realmente sólo cuando usted hace una petición a una página web, la página pasa a través de una serie de pasos. En primer lugar, una petición no ha sido enviado. Luego, la solicitud ha sido enviado, pero no actuar en consecuencia. A continuación, la solicitud ha sido actuar en consecuencia. Entonces la petición es de ser enviado de nuevo a usted. 

Entonces, la solicitud se totalmente cargada en su página. Esos son los diferentes estados. Y así tenemos que fijar nuestra nuevo objeto XMLHttpRequest cambiar cuando cambia el estado Lista. Y por lo general, lo hacemos por definir una función anónima, que estamos familiarizados con de JavaScript ahora, que se llama cuando cambia el estado Lista. En realidad no es mucho más que eso. Sólo vamos a definir una función anónima, algo así como lo que que estábamos haciendo en JavaScript, donde nos haría tienen una función anónima responder a una de clic, o cuando estábamos haciendo un mapa de los diversos objetos en una matriz. 

Algo sucedió cuando algo se ha hecho clic. En este caso, es sólo algo es sucede cuando el estado de nuestra página cambios. Hay otras dos propiedades que son una especie de-- no lo son las únicas propiedades que son inherente a XMLHttpRequest, pero son los bastante importantes. Hay algo que se llama readyState, que como se puede adivinar, está relacionado con onreadystatechange. En realidad, le dice lo que el readyState es. 0, 1, 2, 3, y 4 son las posibilidades allí, y que tipo de más o menos corresponden a lo que Estaba hablando hace aproximadamente un segundo. 

Y entonces de estado, que espero que si todo ha ido bien, es 200, que es la abreviatura para, por supuesto, está bien, que estamos familiarizados con http. Así que estamos esperando que nuestro estado listo es de cuatro, y nuestro estado es 200. Y si nuestro estado listo es de cuatro, y la respuesta está listo para ser puesto sobre la página, y el estado es de 200, hemos sido capaces de hacer todo con éxito, ahora podemos asíncrona actualizar nuestra página sin tener que recargar todo el contenido de la misma. 

Después hemos definido lo que sucede al comportamiento onreadystatechange, y hemos comprobado que readyState es 4 y el estado es de 200, entonces todo lo que tenemos que hacer es abrir una asíncrona solicitud, que se acaba de hacer un HTTP GET general petición. Sólo hacerlo mediante programación, en lugar de a través de nuestro navegador web. Y entonces enviamos esa solicitud. Entonces, ¿qué hace esto tal vez parecerse en su contexto? Así que aquí está una función que se ocupa de las peticiones AJAX. ¿De acuerdo? Y yo he dicho de manera arbitraria acepta un argumento. Y esto una especie de esqueleto en general aquí. En el comienzo, obtenemos nosotros mismos un nuevo objeto XMLHttpRequest. Entonces, tengo que establecer el comportamiento onreadystatechange. Y por lo que voy a decir cuando los cambios readyState, Quiero que llama a esta función. 

¿Qué va a pedir a la pregunta, si el readyState es 4, si el readyState ha cambiado a ser 4, y el estado era 200, así que tuvimos una solicitud exitosa, me querer hacer algo a la página. Y vamos a echar un vistazo un ejemplo de lo que de que algo podría estar en un segundo. Así que, ahora que he definido mi función anónima, mi función de respuesta de siempre los cambios readyState. 

Así que sólo hay que abrir un solicitar, mediante el método Open. Y luego, le envío la solicitud. Y vamos a echar un vistazo a un ejemplo más concreto de lo AJAX puede hacer en nuestras páginas web. Así que tengo aquí una muy simple Página llama home.html. Y tengo una información va aquí y una especie de menú desplegable. 

Y vamos a volver a este en un segundo. Pero creo que ahora debemos tomar una mirar el código fuente real. Y así, voy a abrir home.html. Y vamos a ver lo que está pasando. Así que hasta en lo más alto aquí, tengo algunas cosas de JavaScript que está pasando. 

Y aquí, al parecer tengo un div cuyo ID es infodiv, y alguna información va a ir allí. Y luego tengo este formulario. Y dentro de este forma, tengo algo llamado Select, que es sólo un menú desplegable con un montón de opciones diferentes. Y al parecer, cuando eso cambia, cuando la opción que se ha seleccionado tiene cambiado, voy a llamar a alguna función cs50Info, y luego me voy a Aconteció en this.value, donde esto se refiere a qué opción fue seleccionada, y el valor es uno de ellos aquí, la opción valor = iguales vacío ", Blumberg," "Bowden", "chan" y "malan." 

Entonces, ¿qué podría realidad pasar aquí cuando hago esto? Bueno, vamos a echar un mira blumberg.html. Parece que es sólo un fragmento de algo de HTML. Y de hecho, lo estoy esperando que va a pasar aquí es que me voy a ser capaz de conectar Este HTML directamente en mi página web sin tener que recargar a la página, de manera que cuando Elijo Hannah desde el desplegable menú, información sobre Hannah, En particular, esta información aquí en blumberg.html, es lo que aparece en la página. Y yo no tengo que refrescar. Y si yo me pongo a alguien más, su información se presentaba. ¿Cómo puedo hacer esto? Una vez más, esto requiere que usemos algunos AJAX. Y así, nos abrimos ajax.js. Y aquí es esa función, cs50Info. Si el nombre no es nada, que yo vuelva. Yo no voy a hacer nada si la opción de vacío ha sido elegido. De lo contrario, voy a crear un nuevo XMLHttpRequest. Y entonces yo voy a decir, cuando el cambios readyState, llaman a esta función. 

Y si el readyState es 4 y el estado es 200, aquí está un poco de jQuery en la línea 13. Pero todo lo que estoy haciendo es decir, cambiar el contenido de infodiv para ser lo volví como respuesta de mi HttpRequest. 

¿Cuál es mi HttpRequest? Bueno, eso es correcto aquí en la línea 18 y 19. Línea 18, estoy básicamente preparar una petición GET para el nombre + .html. Y de nuevo, el nombre que aquí es el argumento de que era pasado como un parámetro para cs50Info. 

Así que, básicamente, estoy pasando en alguien de nombre, que era el conjunto de opciones que vimos en el en el menú desplegable en el formulario. Me estoy poniendo ese nombre. Y yo estoy diciendo que te gustaría por favor obtenga para mí que file.html, y luego enviar esa solicitud. 

Y para que onreadystatechange va estar escuchando y esperando y esperando y esperando, hasta que el readyState es 4, y el estado es de 200. Para que esté listo para ser servido, y la solicitud se ha realizado correctamente. Y luego, si lo es, que va a cambiar el contenido de infodiv siendo el texto de respuesta que me dieron la espalda. 

Así que vamos a ver cómo esto realmente podría funcionar. Así que nos dirigimos a mi navegador ventana, y vamos a ver aquí. Así que echemos un vistazo a ¿qué está pasando aquí en AJAX. Así que vamos a elegir a alguien en el menú desplegable. Así que en este caso, vamos a acaba de elegir Hannah. Y fíjense que Hannah información ha cambiado, pero yo no tenía mi any-- página no enteramente recargar. Las cosas se quedó. La mayoría de las cosas se quedaron. Prueba AJAX no cambió. El botón de sí mismo, este menú desplegable no cambió. Pero la información no hizo el cambio. Y dependiendo de cómo rápidamente mi ordenador se mueve, en realidad se puede ver que el contenido desaparece y luego reaparece realmente con rapidez. Ese es el contenido de ser borrado de infodiv, y luego reemplazado con una nueva solicitud asíncrona. 

Así que si me cambio a ser decir, Rob-- y otra vez, miren, y tal vez vamos a ver lo que realmente desaparecer y reaparecer rápidamente. Usted ve eso? Cómo acaba de hacer estallar de distancia, y luego se volvió a llenar? Esa es la petición AJAX tipo de producirse. Y así, en función de la persona elijo, yo soy hacer una asíncrono diferente solicitud a un archivo diferente que tengo en mi servidor. Y el contenido de mi infodiv están actualizando, basado en cuál de estos que he elegido. Así que eso es realmente todo lo que hay que AJAX. Se nos permite hacer estas asíncrono peticiones, cambios a una página. Sin tener que actualizar la página entera, vamos a obtener nueva contenido de ella haciendo una nueva nueva solicitud al servidor. Y por eso, nuestras páginas pueden llegar a ser un poco más dinámico. 

Y a medida que más y más avanzado, podría hacer las cosas como por ejemplo, la bandeja de entrada de correo electrónico, en el que no tienes que hacer nada. Usted no tiene que hacer clic en un menú desplegable o haga clic en cualquier cosa, y, de repente, su más reciente correo electrónico aparece en la parte superior. Eso también es sólo una petición Ajax. Ajax está solicitando su servidor, el servidor de correo electrónico, para enviar a través de toda la información acerca de sus últimos correos electrónicos, y el cambio de lo que se ve en la pantalla para ser su juego más reciente de mensajes de correo electrónico. Y si usted tiene una nueva en allí, entonces el contenido de ese div cambiará para reflejar el contenido actualizado. Soy Doug Lloyd. Esto es CS50.