Trascrizione: (click per espandere)

salve a tutti in questo video farò un
introduzione ad ajax sarà
un'introduzione abbastanza breve vi farò
solo vedere un esempio
poi se volete approfondire potete andare
a cercare online tantissimo altro
materiale pero' come un argomento un po'
vasto per questioni di spazio non posso
descrivere tutto quanto qui allora
intanto cos'e' ajax ajax è un acronimo
per asynchronous javascript and xml e
permette di scambiare informazioni con
tra la web page il server ricevere e
spedire informazioni senza dover
ricaricare ricaricare la pagina web ho
detto che serve un server quindi per
questo video vi servirà installare un
server nel vostro computer se ce
l'avete già potete usare tranquillamente
quello non c'è un problema se lo dovete
installare ex novo
potete installare qualsiasi tipo di
server volete un server con nodejs un
server python ruby
php quello che volete se non avete molta
dimestichezza con queste cose vi
consiglio di installare xampp che va bene
per qualsiasi piattaforma che sia linux
windows o mac o se avete mac e volete
installare qualcosa specifico per mac
potete installare mamp allora questi
software che vi ho appena
nominato metterò il link in descrizione
hanno dentro tutto quello che serve per
creare un sito web hanno dentro già un
database mysql hanno dentro apache
che serve per interpretare il codice php
se volete scrivere un codice php e in
più potete appunto metterci dentro file
html usare ajax quindi scegliete quello
che volete vi metto i link in descrizione vi
metto anche un link però una mia vecchia guida su
come installare xampp e mettete in pausa
il video poi quando siete pronti
rimettete in play
eccoci qui adesso andiamo a farvi vedere
come creare una pagina web che usa ajax
allora intanto se avete che abbiate
installato sia xampp o mamp non cambia
niente hai dentro al folder
dell'applicazione trovate un folder che
si che un altro folder che si chiama htdocs
ok aprite questo folder e dentro ci
create un altro folder e che potete
chiamare ajax come ho fatto io
questo folder cui è dentro al folder htdocs poi quando avete creato folder
dentro al folder ci potete mettere un
file html come in questo caso diverso
così lo chiamo questo e poi un file di
testo quindi un file txt e dentro ci
mettete una qualsiasi scritta che
vogliate non c'è nessun problema
quando avete tutto questo e dovete
lanciare l'applicazione è l'applicazione
lanciate dal pannello di comando e
dovete schiacciare avvio o start adesso non mi
ricordo e dove dovrete ritrovarvi in
questo
caso qui dovete avere la vostra pagina
web che è che ha questo Url quindi
localhost quindi vuol dire che il server
è attivo cartella ajax quella che
avete creato questa qui è il nome del
vostro file html se vi trovate in questa
con la vostra pagina con questo url siete
pronti per continuare a guardare questo
video
allora come funziona ajax allora
bisogna creare una funzione io la chiamo
funzione carica file per esempio e in
questa funzione vado a creare un'istanza
dell'oggetto built in di javascript XMLHttpRequest e quindi const la chiamo
xhttp e il progetto e quindi keyword parola chiave new XMLHttpRequest
questo è un oggetto built in di
javascript che serve proprio per creare
connessioni ajax e quindi dovete usare
questo e questo oggetto ha delle sue
proprie metodi ad esempio al metodo http
open che serve per aprire la connessione
con il server e questo metodo accetta
tre argomenti allora il primo argomento
è il tipo di richiesta che volete fare
può essere una richiesta get o può
essere una richiesta post noi
useremo una richiesta get come secondo
argomento accetta e la il nome del file
che volete richiedere e quindi in questo
caso io ho il file qui che si chiama
testo txt e quindi vado a scrivere il
testo txt e come terzo argomento accetto
valore booleano true o false allora se il
valore è true quindi vero la connessione
sarà asincrona
se il valore è forse la connessione sarà
sincrona 99 per cento delle volte
dovrete usare
asincrona quindi mettiamo true poi c'è un
altro metodo http send che serve per
mandare la richiesta al server e poi c'è
il metodo più importante che si chiama
x http onReadyStateChange
spero aver scritto giusto onReadyStateChange ok
ecco a cui noi ci assegniamo una
funzione e questa funzione in questa
funzione ci metto un blocco condizionale
if con il this.readyState uguale a 4 e this.status
uguale a 200 adesso vi
spiego cosa vuol dire allora quando è la
mia pagina web e comincia a comunicare
col server manda questa richiesta
allora questa e serve per aprire la
richiesta e poi o meglio si aprire la
richiesta e poi viene mandata a server e
come faccio a sapere io se il server ha
ricevuto la mia richiesta e sta
rispondendo alla mia richiesta eccetera
con questa proprietà qui che readyState
questa proprietà qui a i valori che
possono andare da 0 a 4 allora quando
questo valore qui e zero vuol dire che
la richiesta non è ancora stata
inizializzata quando questo valore qui a
1
vuol dire che la connessione con server
è stata abilitata quando questo valore a
due vuol dire che il server ha
ricevuto la richiesta la mia richiesta
quando questo ha valore 3 vuol dire che
il server sta processando la mia
richiesta e quando questa ha valore 4
vuol dire che il server ha finito di
processare la richiesta e mi ha inviato
indietro la risposta quindi a me se
voglio vado a elaborare la risposta del
server una volta che lui me l'ha inviata
quindi io aspetto
che questa proprietà qui abbia valore 4
normalmente quando si comincia a
comunicare col server questa questa
proprietà qua cambia valore a seconda
dello stato della connessione quindi
quando io ho questa valore 4 vuol dire
che server mi ha risposto e come ti
risponde il server e il server ti
risponde con un codice che è un codice
di status che può essere 200 300 400 500
dipende 200 significa che il server ha
trovato quello che gli stavo richiedendo
e me lo sta inviando quindi tutto
a posto
404 per esempio vuol dire che il server
non ha trovato quello che stavo cercando
vi può essere capitato qualche volta di
cercare di aprire una pagina web e
vedere scritto server risponde con 404
vuol dire che il server non ha trovato
quella pagina quindi cosa interessa a me
quando vado a processare la risposta del
server serve sapere che il server mi sta
inviando la risposta è che la risposta a
valore 200 volere che il server ha
trovato qualcosa da inviarmi adesso
vado a manipolare la risposta del server
come sempre conoscete
document.getelementbyid e vado a mettere
display inner html e dentro ci metto la
risposta del server che e' this.responseText
eccolo qui
questo è la risposta del server e io lo
vado a inserire dentro al mio elemento
display quindi vado a visualizzare qui
la risposta del server che sarà questo
valore questo testo qui il testo che è
dentro al mio file txt a ultima cosa da
aggiungere adesso io a vado ad
aggiungere al mio bottone cliccami un
evento o onclick
non vi serve capire adesso nel dettaglio
cos'è questo evento onclick perché ve
lo spiegherò più avanti nel video corso
comunque vado a dire che quando l'utente
clicchera' su quel bottone voglio che
questa questa funzione venga invocata
eccolo qui adesso io salvo tutto passo
nella mia pagina qui adesso se io
schiaccio cliccami probabilmente scritto
sbagliato eccolo qui http eccolo qui
come vedete testo di prova questo testo
qui arriva da questo file qui dal file
mio di testo e è stato richiesto
utilizzando un ajax
se io adesso voglio a cambiare questo
testo
et voilà e vado qui il carico la pagina
come vedete trovo il testo modificato
cosa serve avere una connessione ajax e
una connessione ajax può servire a
tantissime cose a un semplice esempio
avete costruito un sito web per un
vostro amico che non se ne intende tanto
di informatica e lui vuole aggiornare le
pagine
del sito web e voi gli dite ok scrivi un
file scrive il testo che vuoi che venga
visualizzato sulla sulla tua pagina mi
dai il file con quel testo voi inserite
questo file direttamente nel server e le
vostre pagine automaticamente
caricheranno quel testo nella
web page è semplicissimo non dovrete più
una volta che avete costruito una pagina
di questo genere non dovete più andare a
toccare perché basta solo cambiare il
testo nel file di testo con questo è
tutto ci sentiamo la prossima ciao