Share
In seguito alla nostra introduzione ad AJAX, ecco un esempio che utilizza l'API XMLHttpRequest per inizializzare una richiesta AJAX.
Dai un'occhiata alla seguente struttura di base:
Inoltre, considera la visualizzazione correlata:
Ecco cosa vogliamo che succeda: quando clicchiamo sul pulsante, verrà eseguita una richiesta AJAX. Quindi, l'elemento con il bio verrà visualizzato id e il suo contenuto verrà popolato con i dati di risposta. Questi dati sono statici e memorizzati nel Bio.txt file.
Nota: il file viene caricato sul server Codepen. In questo modo, evitiamo i problemi di origine incrociata che possono verificarsi.
Di seguito è riportato il codice AJAX richiesto:
Accentsconagua
var btn = document.getElementById ('richiesta'); var bio = document.getElementById ('bio'); var request = new XMLHttpRequest (); request.onreadystatechange = function () if (request.readyState === 4) bio.style.border = '1px solid # e8e8e8'; if (request.status === 200) bio.innerHTML = request.responseText; else bio.innerHTML = 'Si è verificato un errore durante la richiesta:' + request.status + "+ request.statusText; request.open ('Get', 'Bio.txt'); btn.addEventListener (' fare clic su ', function () this.style.display =' none '; request.send ();); Descriviamo ora i passaggi per questa richiesta:
Creare un oggetto XMLHttpRequest.
Scrivi la funzione che verrà eseguita quando il server restituirà i dati di risposta. L'oggetto XMLHttpRequest ha il onreadystatechange proprietà che memorizza questa funzione. Ogni volta che lo stato della richiesta cambia, questa funzione di callback viene eseguita.
Monitora alcune altre proprietà dell'oggetto XMLHttpRequest. Prima il readyState proprietà specifica lo stato della nostra richiesta. Durante la chiamata AJAX il suo valore cambia e può ricevere valori da 0 a 4 (ad esempio il valore 4 significa che i dati di risposta sono disponibili per noi). Secondo, il stato proprietà indica se la richiesta ha esito positivo o no (ad esempio il valore 200 definisce una richiesta riuscita). In questo esempio, supponendo di recuperare i dati di risposta e la chiamata AJAX ha esito positivo, aggiorniamo il contenuto dell'elemento di destinazione. Altrimenti, viene visualizzato un messaggio con informazioni estratte dall'oggetto XMLHttpRequest.
Specificare il tipo di richiesta usando il Aperto metodo. Questo metodo accetta due parametri obbligatori e tre opzionali. Il primo parametro richiesto definisce il metodo HTTP (ad es. OTTENERE o INVIARE). Il secondo determina l'URL a cui invieremo la richiesta. Facoltativamente, passiamo un terzo parametro booleano che indica se la richiesta è asincrona (cioè predefinita vero valore) o sincrono. Gli altri due parametri opzionali possono essere utilizzati a scopo di autenticazione.
Invia la richiesta quando si fa clic sul pulsante tramite inviare metodo. Inoltre, a questo punto nascondiamo il pulsante.
Nota: Se hai davvero bisogno di supportare versioni molto vecchie di Internet Explorer (cioè IE6 e sotto), devi creare un'istanza del ActiveXObject oggetto (vedere la sezione Passaggio 1).
La prossima visualizzazione mostra il corpo della nostra richiesta poiché viene stampata nella console del browser.
La demo finale si presenta così:
D'altra parte, se richiediamo un file che non esiste, vedremo un messaggio simile al seguente:
Nota: Se si esegue l'esempio dal proprio ambiente locale (e si memorizza il file Bio.txt file in esso), il messaggio di errore sarà probabilmente diverso. Ad esempio, potresti vedere il seguente risultato:
Ecco la demo di Codepen integrata:
In questo tutorial abbiamo esplorato come possiamo implementare una semplice richiesta AJAX utilizzando JavaScript di vaniglia.
Nella parte successiva di questa serie, ci concentreremo sulle funzioni e sui metodi relativi a AJAX di jQuery. Quindi, nella parte finale della serie, lavoreremo con un esempio più complicato. Rimanete sintonizzati!
