Una lezione in cui esamineremo la creazione di semplici richieste AJAX asincrone al server utilizzando esempi. Utilizzeremo sia il metodo GET che POST come metodo di trasmissione della richiesta. Sul server elaboreremo le richieste utilizzando script PHP.
Cos'è una richiesta AJAX asincrona?La tecnologia AJAX viene utilizzata principalmente per creare richieste asincrone al server. Una richiesta asincrona viene eseguita in background e non interferisce con l'interazione dell'utente con la pagina.
Quando si invia una richiesta asincrona, il browser (pagina) non si "congela", ad es. puoi lavorarci come prima. Ma allora come fai a sapere quando arriva la risposta dal server? Per determinarlo, è necessario monitorare la proprietà readyState del browser. Questa proprietà contiene un numero il cui valore può essere utilizzato per determinare in quale fase si trova la richiesta. La tabella seguente mostra i valori principali della proprietà readyState e i relativi stati.
Quelli. Risulta che dobbiamo tenere traccia quando il valore della proprietà readyState è uguale a 4. Ciò significherà che la richiesta inviata ha ricevuto una risposta dal server. I restanti valori vengono utilizzati abbastanza raramente nella pratica e alcuni browser potrebbero non supportarli.
Per determinare in quale fase si trova la richiesta, è necessario utilizzare l'evento dell'oggetto XMLHttpRequest onreadystatechange. Questo evento si verifica ogni volta che cambia il valore della proprietà readyState. Pertanto, nel gestore di questo evento (funzione senza nome o con nome), puoi scrivere azioni che controlleranno se questa proprietà è uguale a 4 e se è uguale, quindi, ad esempio, visualizzerà la risposta del server sulla pagina.
Creazione di una richiesta AJAX asincrona (metodo GET)Diamo un'occhiata alla creazione di una richiesta AJAX asincrona utilizzando un esempio, che saluterà l'utente dopo aver caricato la pagina e visualizzerà il suo indirizzo IP.
Per fare ciò, devi creare 2 file sul server in una directory:
Diamo un'occhiata alla sequenza di azioni che devono essere eseguite lato client (nel codice JavaScript):
Prepariamo i dati necessari per eseguire la richiesta sul server. Se non sono necessari dati per completare la richiesta sul server, questo passaggio può essere saltato.
Creiamo una variabile che conterrà un'istanza dell'oggetto XHR (XMLHttpRequest).
Configuriamo la richiesta utilizzando il metodo open().
Sono specificati i seguenti parametri:
- Il metodo con cui la richiesta verrà inviata al server (GET, POST).
- L'URL che elaborerà la richiesta sul server.
- Tipo di richiesta: sincrona (falso) o asincrona (vero).
- Nome utente e password se richiesti.
Sottoscriviamo l'evento onreadystatechange dell'oggetto XHR e specifichiamo il gestore come funzione anonima o denominata. Successivamente, creeremo un codice all'interno di questa funzione che controllerà lo stato della risposta ed eseguirà determinate azioni sulla pagina. La risposta che arriva dal server è sempre nella proprietà ResponseText.
Oltre a controllare il valore della proprietà readyState numero 4, puoi anche controllare il valore della proprietà status. Questa proprietà determina lo stato della richiesta. Se è uguale a 200, allora è tutto OK. In caso contrario, si è verificato un errore (ad esempio, 404 - URL non trovato).
Inviamo una richiesta al server utilizzando il metodo send().
Se utilizziamo il metodo GET per inviare una richiesta, non è necessario passare dati al parametro di questo metodo. Vengono inviati come parte dell'URL.
Se utilizziamo il metodo POST per inviare una richiesta, allora i dati devono essere passati come parametro al metodo send(). Inoltre, prima di chiamare questo metodo, è necessario impostare l'intestazione Content-Type in modo che il server sappia in quale codifica è arrivata la richiesta e possa decrittografarla.
Contenuto dell'elemento script:
// 2. Creazione della variabile di richiesta var request = new XMLHttpRequest(); // 3. Impostazione della richiesta request.open("GET","processing.php",true); // 4. Sottoscrivere l'evento onreadystatechange ed elaborarlo utilizzando la funzione anonima request.addEventListener("readystatechange", function() ( // se gli stati della richiesta sono 4 e lo stato della richiesta è 200 (OK) if ((request. readyState==4) && (request.status==200)) ( // ad esempio, invia l'oggetto XHR alla console del browser console.log(request); // e la risposta (testo) arrivata dal server in la finestra di avviso console.log(request.responseText) ; // ottiene l'elemento con id = Welcome var Welcome = document.getElementById("welcome" // sostituisce il contenuto dell'elemento con la risposta arrivata dal server Welcome). .innerHTML = request.responseText ) ); // 5. Invio di una richiesta al server request.send();
Di conseguenza, il file Welcome.html avrà il seguente codice:
Esempio di lavoro AJAX Esempio di lavoro AJAX window.addEventListener("load",function() ( var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener(" readystatechange" , function() ( if ((request.readyState==4) && (request.status==200)) ( var benvenuto = document.getElementById("benvenuto"); benvenuto.innerHTML = request.responseText; ) ) ); Richiesta inviata();
Sul server (usando php):
