Brouillon auto

Création d’une application Web distribuée avec Javascript, PHP et MySQL

Sur la plupart des sites Web, c’est le serveur qui fait tout le travail. Cependant, il est possible de répartir la charge sur les ordinateurs clients en combinant AJAX et JSON

L’un des aspects les plus puissants de toute application Web est la possibilité d’obtenir des informations à partir d’une base de données et de les transmettre à un navigateur Web, puis de renvoyer les données mises à jour. En règle générale, une page Web peut envoyer une demande à un serveur, puis cette demande peut être traitée sur le serveur et le résultat est ensuite renvoyé au navigateur Web.

Ainsi, par exemple: un programme Javascript peut envoyer une demande d’informations à un serveur via Ajax ; la requête est traitée par un script PHP qui interroge une base de données MySQL; le script PHP renvoie une sortie en HTML; le programme Javascript met à jour le innerHTML d’un bloc div avec le code HTML renvoyé par le script PHP. Et, dans cet exemple, tout le travail est effectué par le serveur. Cependant, il est possible de répartir la charge en renvoyant les données au format JSON et en permettant au client d’effectuer une partie du travail.

Conversion de données MySQL en objet JSON

Le processus de conversion d’un ensemble d’enregistrements MySQL en un objet JSON est quit simple: le programme Javascript envoie une requête Ajax à un script PHP; le script PHP envoie une requête à la base de données MySQL et transforme le résultat en une chaîne au format JSON; le script PHP renvoie la chaîne au programme Javascript; le programme Javascript convertit la chaîne au format JSON en un objet JSON et la traite selon les besoins.

La requête Javascript

Le programme Javascript: crée simplement un objet de requête HTTP; envoie une requête au serveur (sous forme de formulaire en utilisant la méthode post); attend une réponse; crée un objet JSON à partir du texte renvoyé par la requête Ajax à l’aide de la fonction d’analyse. Le code lui-même est:

var data = {};

if (window.XMLHttpRequest) http = new XMLHttpRequest ();

else http = nouvel ActiveXObject (« Microsoft.XMLHTTP »);

var url = « json_mysql.php »; // Définit le script php à utiliser

var params = « table = contenu »; // Sélectionnez la table à utiliser

http.open (« POST », url, true);

http.setRequestHeader (« Content-type », « application / x-www-form-urlencoded »);

http.onreadystatechange = function () {

if (http.readyState == 4 && http.status == 200) {

data = JSON.parse (http.responseText);

document.write (« Il y a » + data.length + « records »);

}

}

http.send (paramètres);

Il est bien sûr important de se rappeler que la requête est exécutée de manière asynchrone et que les données ne seront donc disponibles qu’une fois le traitement de la requête terminé. Il est également important de ne pas envoyer le SQL complet à partir de la page Web. Cela peut permettre d’envoyer des instructions de suppression ou de mise à jour malveillantes.

Le script PHP

Le but du script PHP est de: établir une connexion à la base de données; créer une instruction SQL à partir de la requête envoyée par le Javascript; envoyer la requête à la base de données; convertir le résultat renvoyé en une instruction JSON. Heureusement, tout cela peut être fait avec la fonctionnalité PHP standard:

$ host = « localhost »;

$ db = « mydb »;

$ user = « myuid »;

$ password = « mypassword »;

$ conn = mysql_connect ($ host, $ user, $ password) ou die (‘Erreur de connexion à mysql’);

$ db_selected = mysql_select_db ($ db, $ conn);

$ sql = « select * from {$ _REQUEST [‘table’]} »;

$ résultat = mysql_query ($ sql);

while ($ row = mysql_fetch_object ($ result)) $ data [] = $ row;

echo json_encode ($ données);

Ainsi, avec ces quelques lignes de code, le développeur de pages Web est en mesure de distribuer une partie du traitement des données du serveur sur les ordinateurs clients de ses utilisateurs.