Chiamate AJAX:
- Definizione
- Cosa è il JSON?
- Leggere da file JSON
- Fare una query MySQL
- Fare una query MySQL con invio parametri
- Link utili
Definizione
Ajax acronimo di Asynchronous JavaScript and XML è una tecnica di programmazione che attraverso un linguaggio ECMAScript come Javascript scambia dati con un linguaggio server-side come PHP o ASP. Lo scambio avviene asincronamente e senza ricarica esplicita da parte dell’utente, i dati vengono caricati in background.
Sebbene il nome per esteso faccia pensare che le risposte vengono inviate nel formato XML in realtà possono essere inviati come testo semplice, HTML o JSON.
Cosa è il JSON?
Nei seguenti esempi utilizzeremo JSON Javascript Standard Object Notation, questo linguaggio rappresenta i dati serializzati in due formati:
- chiave valore {“chiave1″:”valore1”, “chiave2″:”valore2”}
- liste ordinate di valori, chiamate array – [“valore1”, “valore2”]
Leggere da file JSON
Nella cartella data sul nostro server abbiamo il seguente file JSON:
{
"books": [
{"title":"Viaggio ad Ixtlan","author":"Carlos Castaneda"},
{"title":"L'isola del Tonal","author":"Carlos Castaneda"}
]
}
di conseguenza scriviamo un apposito script in Javascript per leggere questo file books.json
e utilizzarlo all’interno della pagina HTML
function getBooks(){
console.log('fetch data');
var request=new XMLHttpRequest();
request.onload=function (){
if(request.status === 200){
var response=JSON.parse(request.responseText);
var data='';
for(var i=0;i<response.books.length;i++){
data+='<div>';
data+='<h4>'+response.books[i].title+'</h4>';
data+='<p>'+response.books[i].author+'</p>';
data+='</div>';
}
document.getElementById('content').innerHTML=data;
}
};
request.open('get','data/books.json',true);
request.send(null);
}
var elBtnfetchData=document.getElementById('fetch-data');
elBtnfetchData.addEventListener('click',getBooks,true);
con l’istruzione var request=new XMLHttpRequest();
creiamo l’oggetto per la richiesta. Controlliamo se lo stato della risposta del server corrisponde al codice 200 ovvero OK .
Alcuni codici di risposta HTTP
200 | Ok | La richiesta è OK (questa è la risposta standard per richieste HTTP riuscite) |
403 | Forbidden | La richiesta era corretta, ma il server si rifiuta di rispondere |
404 | Page Not Found | La pagina richiesta non è stata trovata ma potrebbe essere nuovamente disponibile in futuro |
500 | Internal Server Error | Un messaggio di errore generico, dato quando nessun messaggio più specifico è adatto |
502 | Bad Gateway | Il server fungeva da gateway o proxy e ha ricevuto una risposta non valida dal server upstream |
503 | Service Unavailable | Il server non è attualmente disponibile (sovraccarico o inattivo) |
Il metodo JSON.parse()
analizza una stringa JSON, costruendo il valore JavaScript o l’oggetto descritto dalla stringa. Nel nostro caso lo invochiamo per l’attributo responseText
.
Con il seguente ciclo creiamo gli elementi HTML da visualizzare
for(var i=0;i<response.books.length;i++){
data+='<div>';
data+='<h4>'+response.books[i].title+'</h4>';
data+='<p>'+response.books[i].author+'</p>';
data+='</div>';
}
NOTA: l’attributo response.books deve il suo nome al fatto che corrisponde al formato del nostro file JSON
{
"books": [
quindi per tutti i dati trovati in corrispondenza dei suoi elementi di indice i
response.books[i]
utilizzeremo le chiavi title
e author
per leggere i relativi valori.
Quindi, il metodo open
specifichiamo il tipo di richiesta
open(method, url, async) | Specifica il tipo di richiesta method: il tipo di richiesta: GET o POST url: la posizione del server (file). async: true (asincrono) o false (sincrono) |
XMLHttpRequest
il metodo send()
invia la richiesta al server
request.open('get','data/books.json',true);
request.send(null);
nota che utilizziamo il metodo get, l’url relativo del file sul nostro server e la modalità asincrona
Infine, con le ultime due istruzione assegnamo un ascoltatore degli eventi che al click sul relativo bottone viene richiamata la funzione che effettua la chiamata AJAX.
Fare una query MySQL
Considerando che lo scambio di dati proveniente da query ad un database è attualmente alla base di gran parte di web app, app per mobile e app desktop è fondamentale creare degli scripts lato server che codificano in JSON i dati estratti dal DB.
<?php
include '../config/db_connect.php';
$sql="SELECT * FROM articles";
$result=$conn->query($sql);
if($result->num_rows>0){
$i=0;
$data=array();
while($row=$result->fetch_assoc()){
$data[$i]=$row;
}
echo json_encode($data);
}else{
echo "non ci sono risultati";
}
$conn->close();
Al fine di codificare le informazioni prepariamo un array con l’istruzione $data=array();
successivamente, mentre scorriamo i risultati assegnato ogni tupla all’array $data[]=$row;
Infine serializziamo i dati con la funzione json_encode($data);
Il JSON in output avrà la seguente struttura
[{"id":"1","title":"PHP e MySQL","body":"Connessione ad un database MySQL\r\nInserimento di dati in una tabella \r\nLettura dati di una tabella"}
Proseguiamo riformulando lo script JS
function getBooks(){
console.log('fetch data');
var request=new XMLHttpRequest();
request.onload=function (){
if(request.status === 200){
var response=JSON.parse(request.responseText);
var data='';
for(var i=0;i<response.length;i++){
data+='<div>';
data+='<h4>'+response[i].title+'</h4>';
data+='<p>'+response[i].body+'</p>';
data+='</div>';
}
document.getElementById('content').innerHTML=data;
}
};
request.open('get','src/list-articles.php',true);
request.send(null);
}
var elBtnfetchData=document.getElementById('fetch-data');
elBtnfetchData.addEventListener('click',getBooks,true);
Diversamente dal primo esempio, in questo caso utilizziamo direttamente l’oggetto response per leggere i dati
for(var i=0;i<response.length;i++){
data+='<div>';
data+='<h4>'+response[i].title+'</h4>';
data+='<p>'+response[i].body+'</p>';
data+='</div>';
}
Fare una query MySQL con invio parametri
Dunque, per inviare parametri modifichiamo lo script JS e conseguentemente quello PHP
function getBooks(){
console.log('fetch data');
var title=document.getElementById('title').value;
var request=new XMLHttpRequest();
request.onload=function (){
if(request.status === 200){
var response=JSON.parse(request.responseText);
var data='';
for(var i=0;i<response.length;i++){
data+='<div>';
data+='<h4>'+response[i].title+'</h4>';
data+='<p>'+response[i].body+'</p>';
data+='</div>';
}
document.getElementById('content').innerHTML=data;
}
};
request.open('POST','src/select-articles.php');
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("title="+title);
}
var elBtnfetchData=document.getElementById('fetch-data');
elBtnfetchData.addEventListener('click',getBooks,true);
Dato per assunto che abbiamo aggiunto una casella di input (nel file HTML) in cui l’utente specificherà una parola come termine di ricerca, acquisiremo il suo valore con l’istruzione var title=document.getElementById('title').value;
successivamente selezioneremo la modalità post con il metodo open
request.open('POST','src/select-articles.php');
specifichiamo l’header della richiesta HTTP con
request.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
infine invieremo la richiesta inviando il valore da ricercare nella forma query string
request.send(“title=”+title);
Come potete notare abbiamo utilizzato la modalità post e conseguentemente modifichiamo lo script PHP
<?php
include '../config/db_connect.php';
$title = $_POST["title"];
$sql="SELECT * FROM articles WHERE title LIKE '%$title%'";
$result=$conn->query($sql);
if($result->num_rows>0){
$i=0;
$data=array();
while($row=$result->fetch_assoc()){
$data[$i]=$row;
$i++;
}
echo json_encode($data);
}else{
echo "non ci sono risultati";
}
$conn->close();
Affinché i termini di ricerca inseriti dall’utente si trovino in qualsiasi parte del title utilizziamo il MySQL Wildcard Character %
che rappresenta da 0 a n caratteri