[Música tocando] DOUG LLOYD: Então mais uma tipo de noção de que tipo de cai sob a égide da JavaScript é uma coisa chamada AJAX. Até este ponto, a nossa interação com JavaScript tem sido limitada a empurrar um botão e algo acontece. E especificamente, o algo que acontece São os nossos websites olhar e sentir as mudanças. Certo? Como, em particular, no documento de vídeo modelo de objeto, Eu mudei a cor de fundo. Mas quando eu fiz isso, eu não tenho fazer quaisquer solicitações extras especiais. Eu não tenho que pedir que o servidor enviar-me uma nova página. Eu só mudei o que eu já tinha. Eu não tenho que recarregar minha página, e as coisas definitivamente mudou, então isso é ótimo. Mas há definitivamente alguns interação do usuário manual envolvido. AJAX é uma técnica legal que permite nós para atualizar o conteúdo de uma página, e não apenas a aparência e sentir, sem recarregar. 

E por especificamente quando eu dizer atualizar o conteúdo de uma página, Eu não estou dizendo que reescrever a página usando JavaScript. Eu estou dizendo que, na verdade, solicitar mais informações a partir do servidor sem a nossa página de ter que recarregar. 

Agora que tipo de um pouco de uma técnica mais avançada que nós estamos indo falar sobre neste vídeo. Nós vamos ter alguma interação. Mas quando o fazemos, eu vou ser fazer pedidos para o servidor web. Neste caso, apenas o que está correr o meu servidor web Apache. Eu vou estar fazendo adicional solicitações enquanto eu estou visitando uma página web, mas a minha página não será atualizada. 

Ele só vai de forma assíncrona atualizar minha página. E isso é, de fato, AJAX que representa, é Asynchronous JavaScript e XML. XML é um outro tipo de marcação linguagem, e você pode classificar de pense nisso como HTML. Não é bem a mesma coisa, mas é basicamente uma linguagem de marcação. Portanto, é um assíncrono JavaScript e uma linguagem de marcação. 

Portanto, a fim de usar este AJAX technique-- AJAX não é uma linguagem de programação separado. É apenas uma espécie de conjunto de techniques-- nós precisa criar um especial Objeto JavaScript, que é chamado de um XMLHttpRequest. Agora, é muito fácil de fazer isso. Nós apenas dizer var, qualquer que seja queremos chamar este objeto, é igual a nova XMLHttpRequest. E agora nós já obtido um tipo de objeto AJAX, ou um XMLHttpRequest objeto, o que permitirá nós para atualizar a página de forma assíncrona. 

Depois de se ter obtido esta nova objeto, este XMLHttpRequest, nós temos que fazer alguma coisa para o seu comportamento onreadystatechange. Onreadystatechange comportamento é realmente apenas quando você faz um pedido para uma página web, a página passa por uma série de etapas. Em primeiro lugar, um pedido não tiver sido enviado. Em seguida, o pedido foi enviado, mas não atendido. Em seguida, o pedido foi atendido. Em seguida, o pedido é sendo enviado de volta para você. 

Em seguida, o pedido é totalmente carregado em sua página. Esses são estados diferentes. E por isso precisamos definir nossa novo objeto XMLHttpRequest para mudar quando as mudanças de estado de pronto. E normalmente, fazemos isso por definição de uma função anônima, o que estamos familiarizados com a partir de JavaScript agora, que é chamado quando as mudanças de estado de pronto. Não é realmente muito mais do que isso. Nós apenas estamos indo para ser a definição de uma função anônima, uma espécie de gostar do que que estávamos fazendo em JavaScript, onde iríamos tem uma função anônima responder a um clique em, ou quando estávamos fazendo um mapa de os vários objetos em uma matriz. 

Alguma coisa aconteceu quando algo foi clicado. Neste caso, é apenas algo que é acontecendo quando o estado da nossa página alterar. Existem duas outras propriedades que são tipo de-- eles não são as únicas propriedades que são inerente ao XMLHttpRequest, mas eles são queridos bastante importantes. Há algo chamado readyState, que, como você provavelmente pode adivinhar, é relacionada com OnReadyStateChange. Na verdade, diz-lhe o que o readyState é. 0, 1, 2, 3, e 4 são as possibilidades lá, e eles tipo de aproximadamente corresponde ao que Eu só estava falando de um segundo atrás. 

E depois de status, que espero que se tudo correu bem, é de 200, que é curto para, é claro, OK, que estamos familiarizados com a partir Http. Então, nós estamos esperando que o nosso estado de prontidão é quatro, eo nosso estado é de 200. E se o nosso estado de prontidão é de quatro, e a resposta está pronto para ser colocado no página, eo estado é 200, fomos capazes de fazer tudo com sucesso, agora podemos de forma assíncrona atualizar a página sem ter que recarregar todo o conteúdo do mesmo. 

Depois de termos definido o que acontece para o comportamento onreadystatechange, e temos verificado que readyState é 4 eo estado é de 200, então tudo o que precisamos fazer é abrir um assíncrono pedido, que é apenas fazer um HTTP GET solicitação geral. Basta fazê-lo por meio de programação, em vez de através de nosso navegador web. E, depois, enviar esse pedido. Então, o que faz isso talvez parecer no contexto? Então aqui está uma função que lida com solicitações de AJAX. ok? E eu disse arbitrariamente ele aceita um argumento. E esta uma espécie de esqueleto geral aqui. No início, ficamos nós mesmos um novo objeto XMLHttpRequest. Então, eu preciso definir o comportamento onreadystatechange. E assim eu vou dizer quando as mudanças ReadyState, Eu quero que você chamar essa função. 

Que vai pedir ao pergunta, se o readyState 4 é, se o readyState mudou ser 4, e o estado era de 200, por isso, tivemos um pedido bem sucedido, I quero fazer algo para a página. E nós vamos dar uma olhada em um exemplo do que que algo pode estar em um segundo. Assim, pois, agora tenho definido minha função anônima, minha função de resposta sempre que as alterações ReadyState. 

Então eu só precisa abrir uma solicitar, usando o método Open. E então, eu enviar esse pedido. E vamos dar uma olhada um exemplo mais concreto AJAX do que pode fazer nas nossas páginas web. Então, eu tenho aqui uma forma muito simples página chamada home.html. E eu tenho uma informação vai aqui e algum tipo de menu drop-down. 

E nós vamos rever isso em um segundo. Mas acho que agora deve ter um olhar o código fonte real. E assim, eu vou abrir home.html. E vamos ver o que está acontecendo. Assim, se no topo aqui, tenho algumas coisas JavaScript que está acontecendo. 

E aqui, eu aparentemente têm uma div cuja ID é infodiv, e algumas informações está a ir para lá. E então eu tenho este formulário. E dentro deste forma, eu tenho algo chamado de Select, que é apenas um menu drop-down com um monte de opções diferentes. E, aparentemente, quando isso não mudar, quando a opção que tenha sido seleccionada tiver mudado, eu vou chamar alguma função cs50Info, e então eu vou passar em this.value, onde este refere-se a qual opção foi selecionada, e valor é uma dessas aqui, a opção value = é igual vazio ", Blumberg," "Bowden", "Chan," e "malan." 

Então, o que pode realmente acontecer aqui quando eu faço isso? Bem, vamos dar uma olhar para blumberg.html. Parece que é apenas um trecho de alguns Html. E, na verdade, o que eu estou esperando que vai acontecer aqui é que eu vou ser capaz de ligar Este HTML diretamente em minha página web sem ter que recarregar o principal, de tal modo que quando Eu escolho Hannah do drop-down menus, informações sobre Hannah, Em particular, estas informações aqui em blumberg.html, é o que aparece na página. E eu não tenho para atualizar. E se eu escolhesse outra pessoa, suas informações iria aparecer. Como eu faço isso? Mais uma vez, isso exige nos usar algum AJAX. E assim, nós vamos abrir ajax.js. E aqui é que a função, cs50Info. Se o nome não é nada, eu voltar. Eu não vou fazer nada se a opção escolhida foi vazio. Caso contrário, eu vou criar um novo XMLHttpRequest. E então eu vou dizer, quando o mudanças ReadyState, chamar essa função. 

E se o readyState é 4 e o estado é de 200, aqui está um pouco do jQuery na linha 13. Mas tudo que eu estou fazendo está dizendo: alterar o conteúdo da infodiv para ser o que eu voltei como um resposta da minha HttpRequest. 

Qual é a minha HttpRequest? Bem, isso é certo aqui na linha 18 e 19. Linha 18, eu estou basicamente preparação Começar um pedido de nome + .html. E mais uma vez, o nome aqui é o argumento de que era passado como um parâmetro para cs50Info. 

Então, basicamente, eu estou passando em alguém do nome, que foi esse conjunto de opções que vimos no drop-down menu no formulário. Estou recebendo esse nome. E eu estou dizendo que eu gostaria que você por favor, alcançai-me que file.html, e, em seguida, enviar esse pedido. 

E assim que vai onreadystatechange estar ouvindo e esperando e esperando e em espera, até que o readyState é 4, eo estado é de 200. Então, ele está pronto para ser servido, ea solicitação foi bem-sucedida. E, em seguida, se for, ele vai alterar o conteúdo da infodiv para ser o texto de resposta que eu recebi de volta. 

Então, vamos ver como isso pode realmente funcionar. Então, vamos cabeça para o meu navegador janela, e veremos aqui. Então, vamos dar uma olhada o que está acontecendo aqui em AJAX. Então, nós vamos escolher alguém a partir do menu drop-down. Portanto, neste caso, vamos basta escolher Hannah. E notem que Hannah de informação mudou, mas eu não tive meu any-- A página não inteiramente recarregar. As coisas ficaram. A maioria das coisas ficaram. AJAX Teste não se alterou. O próprio botão, este drop-down menu não mudou. Mas a informação não se alterou. E dependendo de quão rapidamente meus movimentos de computador, você realmente pode ver que o conteúdo desaparece e depois reaparece realmente rapidamente. Esse é o conteúdo a ser excluída do infodiv, e, em seguida, substituído com um nova solicitação assíncrona. 

Então, se eu mudá-lo para ser dizer, Rob-- e mais uma vez, dar uma olhada, e talvez nós vamos vê-lo realmente desaparecem e reaparecem rapidamente. Você viu isso? Como ele só bateu para longe, e, em seguida, voltar a encher? Esse é o pedido de AJAX tipo de ocorrendo. E assim, dependendo da pessoa que eu escolher, eu sou fazendo uma assíncrona diferente pedido para um arquivo diferente que eu tenho no meu servidor. E o conteúdo da minha infodiv está atualizando, com base no qual delas eu escolhi. Então isso é realmente tudo o que há para AJAX. Ele nos permite fazer essas assíncrona solicitações, atualizações a uma página. Sem ter que atualizar a página inteira, nós estamos indo para obter novo conteúdo a partir dele, fazendo um novo novo pedido para o servidor. E assim, nossas páginas podem tornar-se um pouco mais dinâmico. 

E como nós começamos mais e mais avançado, você pode fazer as coisas como digamos, sua caixa de entrada de e-mail, onde você não tem que fazer nada. Você não tem que clicar em um drop-down menu ou clicar em nada, e, de repente, o seu mais novo e-mail aparece na parte superior. Isso também é apenas uma solicitação do Ajax. Ajax está solicitando o seu servidor, o servidor de e-mail, para enviar mais de todas as informações sobre seus últimos e-mails, e mudar o que você vê na tela para ser o seu mais recente conjunto de e-mails. E se você tem um novo em lá, em seguida, o conteúdo desse div será alterado para refletir o conteúdo atualizado. Eu sou Doug Lloyd. Este é CS50.