Faire de l'AJAX avec QML
API REST
Premièrement, supposons que l'on veut communiquer avec une API REST qui retourne des données sous le format JSON
Ici nous allons utiliser le service jsonplaceholder en faisant un simple GET : https://jsonplaceholder.typicode.com/posts/1
QML
Créons une application basique sous Qt comme ceci
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Salut Cyril !")
}Ajoutons un bouton pour lancer la requête AJAX et un label pour afficher le retour de celle-ci
GridLayout {
id: grid
columnSpacing: 10
rowSpacing: 10
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
rows: 2
columns: 1
Button {
id: requestButton
text: "Ajax"
}
Label {
id: txtResponse
text: "Réponse..."
anchors.horizontalCenter: parent.horizontalCenter
}
}Maintenant créons une fonction pour effectuer la requête AJAX en pur JavaScript
Elle appel notre fonction callback si le retour est OK :
// Fonction requette AJAX
function request(url, callback) {
var http = new XMLHttpRequest();
http.open("GET", url, true);
http.onreadystatechange = function () {
if(http.readyState === XMLHttpRequest.DONE && http.status === 200) {
callback(http)
}
};
http.send();
}A partir de là, tout est en place, il suffit d’implémenter le clique sur le bouton :
Button {
id: requestButton
text: "Ajax"
onClicked: {
request('https://jsonplaceholder.typicode.com/posts/1', function (o) {
// affiche dans la console le retour JSON
console.log(o.responseText);
// Convertir la reponse en objet
var d = eval('new Object(' + o.responseText + ')');
// Affiche les elements depuis le json
if(d) {
console.log(d);
txtResponse.text = "Titre:n" + d.title + "nnCorps:n" + d.body;
}
});
}
}Code final
voici ce que donne le code final
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
id: applicationWindow
visible: true
width: 640
height: 480
title: qsTr("Salut Cyril !")
// Fonction requette AJAX
function request(url, callback) {
var http = new XMLHttpRequest();
http.open("GET", url, true);
http.onreadystatechange = function () {
if(http.readyState === XMLHttpRequest.DONE && http.status === 200) {
callback(http)
}
};
http.send();
}
GridLayout {
id: grid
columnSpacing: 10
rowSpacing: 10
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
rows: 2
columns: 1
Button {
id: requestButton
text: "Ajax"
onClicked: {
request('https://jsonplaceholder.typicode.com/posts/1', function (o) {
// affiche dans la console le retour JSON
console.log(o.responseText);
// Convertir la reponse en objet
var d = eval('new Object(' + o.responseText + ')');
// Affiche les elements depuis le json
if(d) {
console.log(d);
txtResponse.text = "Titre:n" + d.title + "nnCorps:n" + d.body;
}
});
}
}
Label {
id: txtResponse
text: "Réponse..."
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
Ceci nous montre que l'on peut facilement utiliser des composants JS et manipuler des données au format JSON. avec Qt
