[RIPRODUZIONE DI BRANI MUSICALI] DOUG LLOYD: Così un altro tipo di idea che sorta di cade sotto l'ombrello di JavaScript è qualcosa chiamato AJAX. Fino a questo punto, il nostro interazione con JavaScript è stato limitato a spingere un pulsante e succede qualcosa. E in particolare, la qualcosa che accade è i nostri siti web look and feel modifiche. Destra? Come in particolare, nel documento del modello oggetto video, Ho cambiato il colore di sfondo. Ma quando l'ho fatto, non ho avuto a fare le particolari richieste supplementari. Non ho avuto a chiedere che il server mi mandi una nuova pagina. Ho appena cambiato quello che ho già avuto. Non ho avuto a ricaricare la mia pagina, e le cose decisamente cambiate, così che è grande. Ma c'è sicuramente qualche interazione manuale dell'utente coinvolto. AJAX è una tecnica che permette di fresco per modificare il contenuto di una pagina, e non solo l'aspetto sentire, senza ricaricare. 

E da quando ho specificamente dire l'aggiornamento dei contenuti di una pagina, Non sto dicendo che riscriviamo la pagina utilizzando JavaScript. Sto dicendo che in realtà chiediamo ulteriori informazioni dal server senza la nostra pagina dover ricaricare. 

Ora che tipo di un po 'di una tecnica più avanzata che stiamo andando a parlare su in questo video. Stiamo per avere qualche interazione. Ma quando lo facciamo, ho intenzione di essere fare richieste al server Web. In questo caso, solo ciò che è esecuzione il mio server web Apache. Ho intenzione di essere fare aggiuntive richieste mentre sto visitando una pagina web, ma la mia pagina non si aggiorna. 

E 'solo andando a asincrono ad aggiornare la pagina. E questo è, infatti, AJAX che rappresenta, è Asynchronous JavaScript and XML. XML è un altro tipo di marcatura lingua, e si può ordinare di pensare ad esso come HTML. Non è proprio la stessa cosa, ma è fondamentalmente solo un linguaggio di markup. Quindi è un asincrono Javascript e il linguaggio di markup. 

Quindi, al fine di utilizzare questo AJAX technique-- AJAX Non è un linguaggio di programmazione separata. E 'solo una sorta di set di techniques-- noi necessario creare una speciale Oggetto JavaScript, che viene chiamato un XMLHttpRequest. Ora, è molto facile da fare questo. Abbiamo solo dire var, qualunque vogliamo chiamare questo oggetto, uguale nuova XMLHttpRequest. Ed ora abbiamo ora ottenuto una sorta AJAX di oggetto, o un XMLHttpRequest oggetto, che permetterà per modificare in modo asincrono nostra pagina. 

Dopo abbiamo ottenuto questa nuova oggetto, questo XMLHttpRequest, dobbiamo fare qualcosa per la sua comportamento onreadystatechange. Onreadystatechange comportamento è in realtà solo quando si effettua una richiesta a una pagina web, la pagina passa attraverso una serie di passi. In primo luogo, la richiesta non è stata inviata. Poi, la richiesta è stata inviato, ma non agire di conseguenza. Quindi la richiesta è stata dato seguito. Quindi la richiesta è essere rimandato a voi. 

Poi, la richiesta è a pieno carico nella tua pagina. Quelli sono stati diversi. E così abbiamo bisogno di impostare il nostro nuovo oggetto XMLHttpRequest a cambiare quando cambia lo stato di pronto. E di solito, facciamo questo per definendo una funzione anonima, che siamo a conoscenza da JavaScript ora, che viene chiamato quando cambia lo stato di pronto. Non è davvero molto di più. Stiamo solo andando a essere la definizione di un funzione anonima, un po 'come quello che stavamo facendo in JavaScript, dove avremmo avere una funzione anonima rispondere ad una sullo scatto, o quando stavamo facendo una mappa di i vari oggetti in un array. 

Qualcosa è accaduto quando qualcosa è stato cliccato. In questo caso, è solo qualcosa è succede quando lo stato della nostra pagina i cambiamenti. Ci sono altre due proprietà che sono specie di-- non sono le uniche proprietà che sono inerente alla XMLHttpRequest, ma sono quelli abbastanza importanti. C'è una cosa chiamata readyState, che, come si può intuire, è legata alla onreadystatechange. In realtà vi dice ciò che il readyState è. 0, 1, 2, 3, e 4 sono le possibilità lì, ed essi sorta di circa conforme a quanto Stavo solo parlando di un secondo fa. 

E poi lo stato, che speriamo che se tutto è andato bene, è 200, che è l'abbreviazione per, ovviamente, OK, che noi siamo a conoscenza da Http. Quindi speriamo che il nostro stato di pronto è quattro, e il nostro status è di 200. E se il nostro stato di pronto è quattro, e la risposta è pronto per essere messo in pagina e lo stato è 200, siamo stati in grado di fare tutto con successo, ora siamo in grado in modo asincrono aggiornare la nostra pagina senza dover ricaricare l'intero contenuto di essa. 

Dopo abbiamo definito cosa succede al comportamento onreadystatechange, e abbiamo verificato che readyState è 4 e lo stato è di 200, poi tutto quello che dobbiamo fare è aprire un asincrono richiesta, che è solo fare HTTP GET generalmente richiesta. Solo facendo a livello di codice, anziché attraverso il nostro browser web. E poi inviamo la richiesta. Così che cosa fa questo forse simile in contesto? Quindi, ecco una funzione che si occupa di richieste AJAX. ok? E ho arbitrariamente detto accetta un argomento. E questa una sorta di scheletro generale qui. All'inizio, si ottiene noi stessi un nuovo oggetto XMLHttpRequest. Poi, ho bisogno di impostare la comportamento onreadystatechange. E così ho intenzione di dire quando cambia readyState, Voglio che chiama questa funzione. 

Che sta per chiedere il domanda, se il readyState è 4, se il readyState è cambiato essere 4, e lo stato era 200, così abbiamo avuto una richiesta di successo, io vogliono fare qualcosa per la pagina. E daremo uno sguardo un esempio di ciò che che qualcosa potrebbe essere in un secondo. Allora, ora ho definito la mia funzione anonima, la mia funzione di risposta ogni volta i cambiamenti readyState. 

Allora ho solo bisogno di aprire un richiedere, utilizzando il metodo Open. E poi, io mando tale richiesta. E diamo uno sguardo a un esempio più concreto di cosa AJAX può fare sulle nostre pagine web. Così ho qui un molto semplice Pagina chiamato home.html. E ho ricevuto una informazione va qui e una sorta di menu a discesa. 

E noi Rivisiteremo questo in un secondo. Ma penso che ora dovremmo prendere una guardare il codice sorgente. E così, ho intenzione di aprire home.html. E vedremo cosa sta succedendo. Così fino al primo posto qui, ho alcune cose JavaScript che sta succedendo. 

E qui, a quanto pare io ho un div il cui ID è infodiv, e alcune informazioni sta per andare lì. E poi ho questo modulo. E all'interno di questa forma, ho qualcosa chiamato a Selezionare, che è solo un menu a discesa con una serie di opzioni diverse. E a quanto pare quando questo cambia, quando l'opzione che è stato selezionato ha cambiato, io vado a chiamare qualche funzione cs50Info, e poi ho intenzione di passare this.value, dove questo si riferisce a l'opzione è stata selezionata, e il valore è uno di questi qui, opzione value = uguale vuote ", Blumberg," "Bowden", "chan" e "Malan". 

Così che cosa potrebbe effettivamente succedere qui quando faccio questo? Bene, facciamo un guardare blumberg.html. Sembra che sia solo un snippet di codice HTML. E infatti, quello che spero sta per accadere qui è che ho intenzione di essere in grado di collegare questo Html direttamente nella mia pagina web senza dover ricaricare pagina, tale che quando Scelgo Hannah dal menu a discesa menù, informazioni su Hannah, in particolare, tali informazioni qui in blumberg.html, è quello che si presenta sulla pagina. E io non devo aggiornare. E se ho scelto qualcun altro, le loro informazioni si presentava. Come posso fare questo? Di nuovo, questo richiede di usare un po 'di AJAX. E così, ci apriamo ajax.js. Ed ecco che la funzione, cs50Info. Se il nome non è nulla, al mio ritorno. Io non ho intenzione di fare nulla se l'opzione vuota è stata scelta. In caso contrario, ho intenzione di creare un nuovo XMLHttpRequest. E poi ho intenzione di dire, quando la modifiche readyState, chiamano questa funzione. 

E se il readyState è 4 e lo stato è 200, qui è un po ' di jQuery sulla linea 13. Ma tutto quello che sto facendo sta dicendo, modificare i contenuti del infodiv per essere quello che tornato come risposta da parte mia HttpRequest. 

Qual è il mio HttpRequest? Beh, è ​​vero qui sulla linea 18 e 19. Linea 18, praticamente sto preparando una GET richiesta di nome + .html. E ancora, il nome qui è l'argomento che era passato come un parametro per cs50Info. 

Quindi, fondamentalmente, sto passando a qualcun nome, che era quella serie di opzioni che abbiamo visto nella menu a discesa nella forma. Ricevo quel nome. E sto dicendo che vorrei che tu si prega di ottenere per me che file.html, e quindi inviare la richiesta. 

E così che onreadystatechange sta andando essere in ascolto e aspettare e aspettare e in attesa, finché il readyState è 4, e lo stato è di 200. Quindi è pronto per essere servito, e la richiesta ha avuto successo. E poi se lo è, sta andando modificare i contenuti del infodiv per essere il testo di risposta che sono tornato. 

Quindi cerchiamo di vedere come questo potrebbe effettivamente funzionare. Quindi ci dirigeremo verso il mio browser finestra, e vedremo qui. Quindi, diamo uno sguardo a cosa sta succedendo qui in AJAX. Così sceglieremo qualcuno dal menu a discesa. Quindi, in questo caso, diciamo basta scegliere Hannah. E notare che Hannah informazioni è cambiato, ma non ho avuto il mio any-- Pagina non del tutto ricaricare. La roba rimasto. La maggior parte delle cose siamo stati. AJAX di prova non è cambiata. Il pulsante stesso, questo menu a discesa non è cambiato. Ma le informazioni non ci ha fatto cambiare. E a seconda di come rapidamente mio computer si muove, in realtà si potrebbe vedere che il contenuto scompare e poi riappare davvero rapidamente. Questo è il contenuto di essere eliminato dal infodiv, e poi sostituito con un nuova richiesta asincrona. 

Quindi, se posso passare ad essere dire, Rob-- e ancora una volta, dare un'occhiata, e forse vedremo in realtà scomparire e riapparire in fretta. Si vede che? Come appena spuntato via, e poi riempito? Questa è la richiesta AJAX sorta di prendere posto. E così la seconda persona che scelgo, io sono facendo un asincrono diverso richiesta in un file diverso che ho sul mio server. E il contenuto del mio infodiv stanno aggiornando, sulla base di quale di questi che ho scelto. Ecco, questo è davvero tutto quello che c'è da AJAX. Esso ci permette di rendere queste asincrona richieste, gli aggiornamenti di una pagina. Senza dover aggiornare l'intera pagina, stiamo andando a ottenere nuovi contenuto da esso facendo una nuova richiesta fresco al server. E così, le nostre pagine possono diventare un po 'più dinamica. 

E come si ottiene più e più avanzate, è potrebbe ottenere le cose come per esempio, la vostra casella di posta, dove non c'è bisogno di fare nulla. Non è necessario fare clic su un menu a discesa o fare clic su qualsiasi cosa, e tutto ad un tratto, il tuo ultimo e-mail si presenta nella parte superiore. Questo è anche solo una richiesta Ajax. Ajax sta richiedendo il tuo server, il server di posta elettronica, inviare tramite tutte le informazioni sulle vostre ultime email, e cambiare ciò che si vede sul schermo per essere il vostro più recente serie di messaggi di posta elettronica. E se avete uno nuovo là, il contenuto di tale div cambierà per riflettere il contenuto aggiornato. Sono Doug Lloyd. Questo è CS50.