[Jouer de la musique] DOUG LLOYD: Donc, un de plus sorte d'idée que sorte de tombe sous l'égide de JavaScript est quelque chose appelé AJAX. Jusqu'à ce point, notre interaction avec JavaScript a été limitée à pousser un bouton et quelque chose se passe. Et plus précisément, le quelque chose qui arrive est de nos sites Web regardent et se sentent changements. Droit? Comme, en particulier, dans le document de modèle d'objet vidéo, Je l'ai changé la couleur de fond. Mais quand je l'ai fait, je ne dois à faire des demandes spéciales supplémentaires. Je ne dois demander que le serveur me faire parvenir une nouvelle page. Je viens de changer ce que je avais déjà. Je ne dois recharger ma page, et les choses définitivement changé, ce est très bien. Mais il ya certainement une certaine interaction manuelle utilisateur impliqué. AJAX est une technique qui permet fraîche nous mettre à jour le contenu d'une page, et pas seulement l'apparence et sentir, sans recharger. 

Et en particulier quand je dire mettre à jour le contenu d'une page, Je ne dis pas que nous réécrivons la page en utilisant JavaScript. Je dis que nous demandons effectivement plus d'informations à partir du serveur sans notre page avoir à recharger. 

Maintenant, ce genre d'un peu de une technique plus avancée que nous allons parler dans cette vidéo. Nous allons avoir une certaine interaction. Mais quand nous le faisons, je vais être faire des requêtes au serveur Web. Dans ce cas, tout ce qui est courir mon serveur web Apache. Je vais être prise additionnelle demandes alors que je suis visitant une page Web, mais ma page ne sera pas rafraîchir. 

Il va juste mettre à jour de manière asynchrone ma page. Et qui est, en fait, AJAX qui signifie, est Asynchronous JavaScript and XML. XML est un autre type de balisage la langue, et vous pouvez trier des penser à elle comme le HTML. Il est pas tout à fait la même chose, mais il est fondamentalement juste un langage de balisage. Il est donc asynchrone JavaScript et un langage de balisage. 

Ainsi, afin d'utiliser cette AJAX technique-- AJAX est pas un langage de programmation distincte. Il est juste une sorte de ensemble de techniques-- nous besoin de créer une spéciale Objet JavaScript, qui est appelé un XMLHttpRequest. Maintenant, il est très facile de le faire. Nous disons simplement var, quel que soit nous voulons appeler cet objet, égaux new XMLHttpRequest. Et maintenant, nous avons maintenant obtenu une sorte d'objet AJAX, ou un XMLHttpRequest objet, qui permettra nous de mettre à jour de manière asynchrone notre page. 

Après nous avons obtenu cette nouvelle objet, ce XMLHttpRequest, nous devons faire quelque chose pour son onreadystatechange comportement. Onreadystatechange comportement est vraiment juste quand vous faites une demande à une page Web, la page passe par un certain nombre d'étapes. Tout d'abord, une demande n'a pas été envoyé. Ensuite, la demande a été envoyé, mais pas donné suite. Ensuite, la demande a été suivie d'effet. Ensuite, la demande est d'être envoyé de nouveau à vous. 

Puis, la demande est entièrement chargé dans votre page. Ce sont des états différents. Et donc nous avons besoin de mettre notre nouvel objet XMLHttpRequest à changer lorsque le prêt de l'Etat. Et généralement, nous faisons cela en définir une fonction anonyme, qui nous sommes familiers avec de JavaScript maintenant, que est appelée lorsque les changements prêts de l'Etat. Il est vraiment pas beaucoup plus que cela. Nous allons juste à la définition d'un fonction anonyme, un peu comme ce que nous faisions dans JavaScript, où nous avoir une fonction anonyme répondre à un clic sur, ou lorsque nous faisions une carte de les divers objets dans un tableau. 

Quelque chose est arrivé lorsque quelque chose a cliqué. Dans ce cas, il est juste quelque chose est passe lorsque l'état de notre page Changements. Il existe deux autres propriétés qui sont en quelque sorte de-- ils ne sont pas les seuls biens qui sont inhérent à XMLHttpRequest, mais ils sont ceux assez importants. Il ya quelque chose appelé readyState, qui, comme vous pouvez probablement le deviner, est liée à onreadystatechange. Il vous indique effectivement ce que le readyState est. 0, 1, 2, 3, et 4 sont les possibilités là-bas, et ils sorte d'environ correspondre à ce que Je parlais il ya environ une seconde. 

Et puis l'état, qui Espérons que si tout allait OK, est de 200, ce qui est court pour, bien sûr, OK, dont nous sommes familiers avec de HTTP. Nous espérons donc que notre état prêt est quatre, et notre statut est 200. Et si notre état prêt est quatre, et la réponse est prêt à être mis sur le la page, et le statut est 200, nous étions en mesure de faire tout avec succès, maintenant, nous pouvons de manière asynchrone mettre à jour notre page sans avoir à recharger la totalité du contenu de celui-ci. 

Après nous avons défini ce qui se passe le comportement par onreadystatechange, et nous avons vérifié que readyState est 4 et le statut est 200, alors tout ce que nous devons faire est ouvrir un asynchrone demande, qui est juste faire un HTTP GET généralement demande. Il suffit de faire ce programme, au lieu de passer notre navigateur web. Et puis nous envoyons cette demande. Alors qu'est-ce peut-être ressembler dans le contexte? Alors, voici une fonction qui traite les requêtes AJAX. D'accord? Et je l'ai dit arbitrairement il accepte un argument. Et ce une sorte de squelette générale ici. Au tout début, nous obtenons nous un nouvel objet XMLHttpRequest. Ensuite, je dois régler la onreadystatechange comportement. Et donc je vais dire lors du changement de readyState, Je veux que vous appelez cette fonction. 

Qui va demander à la question, si le readyState 4 est, si le readyState a changé être 4, et l'état était de 200, donc nous avons eu une demande réussie, je vouloir faire quelque chose à la page. Et nous allons jeter un oeil un exemple de ce que que quelque chose pourrait être dans une seconde. Alors, maintenant, je l'ai définie ma fonction anonyme, ma fonction de réponse à chaque fois les changements de readyState. 

Alors je juste besoin d'ouvrir un demander, en utilisant la méthode Open. Et puis, je vous envoie cette demande. Et nous allons jeter un oeil à un exemple plus concret de ce que peut faire AJAX sur nos pages web. Je dois donc ici très simple Page appelé home.html. Et je dois une information va ici et une sorte de menu déroulant. 

Et nous nous pencherons sur ce en une seconde. Mais je pense que nous devrions maintenant prendre une regarder le code source réelle. Et donc, je vais ouvrir home.html. Et nous allons voir ce qui se passe. Alors au sommet très ici, je dois des trucs JavaScript qui se passe. 

Et ici, je dois apparemment un div dont l'ID est infodiv, et quelques informations va y aller. Et puis je dois cette forme. Et à l'intérieur de cette forme, je dois quelque chose appelé Select, qui est juste un menu déroulant avec un tas d'options différentes. Et apparemment, lorsque cela change, lorsque l'option qui a été sélectionnée comporte changé, je vais appeler une fonction cs50Info, et puis je vais passer this.value, où cela fait référence à l'option qui a été choisie, et la valeur est l'un de ceux-ci ici, l'option = valeur est égale à vide, "Blumberg," "Bowden", "chan" et "Malan." 

Donc, ce qui pourrait effectivement arriver ici quand je fais cela? Eh bien, nous allons jeter un regarder blumberg.html. On dirait qu'il est juste un extrait de code HTML. Et en fait, ce que je suis en espérant qui va se passer ici est que je vais être capable de brancher Ce code HTML directement dans ma page web sans avoir à recharger la page, de sorte que lorsque Je choisis Hannah de la liste déroulante menu, des informations sur Hannah, en particulier, cette information ici à blumberg.html, est ce qui apparaît sur la page. Et je ne dois rafraîchir. Et si je choisi quelqu'un d'autre, leurs informations apparaîtrait. Comment fais-je ceci? Encore une fois, cela exige nous d'utiliser certains AJAX. Et donc, nous allons ouvrir ajax.js. Et voici que la fonction, cs50Info. Si le nom est rien, je reviens. Je ne vais pas faire quelque chose si l'option vide a été choisie. Sinon, je vais créer un nouveau XMLHttpRequest. Et puis je vais vous dire, lorsque le changements readyState, appellent cette fonction. 

Et si le readyState est 4 et le statut est 200, voici un peu de jQuery sur la ligne 13. Mais tout ce que je fais est disant, modifier le contenu de infodiv d'être ce que je suis rentré comme un réponse de mon HttpRequest. 

Quel est mon HttpRequest? Eh bien, que ce droit ici sur la ligne 18 et 19. Ligne 18, je suis fondamentalement préparation une requête GET pour le nom + .html. Et encore une fois, le nom est ici l'argument qui était passé en tant que paramètre à cs50Info. 

Donc, fondamentalement, je suis de passage à quelqu'un d' nom, qui était que jeu d'options que nous avons vu dans le dans le menu déroulant sous la forme. Je reçois ce nom. Et je dis que je voudrais que vous s'il vous plaît obtenir pour moi que file.html, et ensuite envoyer cette demande. 

Et pour que onreadystatechange va être à l'écoute et attendre et attendre et d'attente, jusqu'à ce que le readyState est 4, et de l'état est de 200. Donc, il est prêt à être servi, et la demande a réussi. Et puis, si elle est, ça va modifier le contenu de infodiv être le texte de réponse que je suis rentré. 

Voyons donc comment cette pourrait en fait travailler. Donc, nous allons la tête sur mon navigateur fenêtre, et nous allons voir ici. Donc, nous allons jeter un oeil à ce qui se passe ici en AJAX. Donc, nous allons choisir quelqu'un dans le menu déroulant. Donc dans ce cas, nous allons il suffit de choisir Hannah. Et remarquez que Hannah l'information a changé, mais je ne dois mon any-- la page n'a pas entièrement recharger. Le truc est resté. La plupart des choses sont restés. AJAX test n'a pas changé. Le bouton lui-même, ce menu déroulant n'a pas changé. Mais il a changé d'informations. Et en fonction de la rapidement mes mouvements informatiques, vous avez réellement pourriez voir que le contenu disparaît et puis réapparaît vraiment rapidement. Voilà le contenu étant infodiv retirés, et ensuite remplacé par un nouvelle demande asynchrone. 

Donc, si je l'allume à-dire, Rob-- et encore, jetez un oeil, et peut-être nous verrons qu'il fait disparaître et réapparaître rapidement. Tu vois ça? Comment ça juste sauté loin, et puis il rempli? Voilà la requête AJAX sorte d'avoir lieu. Et si en fonction de la personne que je choisis, je suis faisant un asynchrone différent demande à un fichier différent que je dois sur mon serveur. Et le contenu de mon infodiv sont mise à jour, sur la base de laquelle de ces Je l'ai choisi. Voilà donc vraiment tout ce qu'il ya à AJAX. Il nous permet de faire ces asynchrone demandes, des mises à jour à une page. Sans avoir à rafraîchir la page entière, nous allons obtenir de nouvelles Contenu de ce en faisant une nouvelle nouvelle demande au serveur. Et oui, nos pages peuvent devenir un peu plus dynamique. 

Et que nous aurons plus et plus avancé, vous pourraient obtenir des choses comme par exemple, votre boîte e-mail, où vous ne devez rien faire. Vous ne devez pas cliquer sur un dans le menu déroulant ou cliquez sur quoi que ce soit, et tout d'un coup, votre plus récent email montre au sommet. Cela est également juste une requête Ajax. Ajax est votre demande serveur, le serveur de messagerie, d'envoyer plus de toutes les informations à propos de vos derniers e-mails, et de changer ce que vous voyez sur la écran pour être votre plus récent ensemble de courriels. Et si vous avez un nouveau dans là, alors le contenu de cette div va changer pour refléter le contenu mis à jour. Je suis Doug Lloyd. Ceci est CS50.