PHP et AJAX
Qu'est-ce que AJAX?
AJAX signifie Asynchrone JavaScript et XML. AJAX est une nouvelle technique permettant de créer des applications Web meilleures, plus rapides et plus interactives à l'aide de XML, HTML, CSS et Java Script.
Les applications Web conventionnelles transmettent des informations vers et depuis le serveur à l'aide de requêtes synchrones. Cela signifie que vous remplissez un formulaire, appuyez sur Soumettre et êtes dirigé vers une nouvelle page avec de nouvelles informations du serveur.
Avec AJAX lorsque vous appuyez sur Soumettre, JavaScript fera une requête au serveur, interprétera les résultats et mettra à jour l'écran actuel. Dans le sens le plus pur, l'utilisateur ne saurait jamais que quoi que ce soit a même été transmis au serveur.
Pour une formation complète sur AJAX, veuillez consulter le didacticiel AJAX.
Exemple PHP et AJAX
Pour illustrer clairement à quel point il est facile d'accéder aux informations d'une base de données utilisant Ajax et PHP, nous allons construire des requêtes MySQL à la volée et afficher les résultats sur "ajax.html". Mais avant de continuer, faisons un travail de terrain. Créez une table à l'aide de la commande suivante.
NOTE - Nous supposons que vous disposez des privilèges suffisants pour effectuer les opérations MySQL suivantes.
CREATE TABLE `ajax_example` (
`name` varchar(50) NOT NULL,
`age` int(11) NOT NULL,
`sex` varchar(1) NOT NULL,
`wpm` int(11) NOT NULL,
PRIMARY KEY (`name`)
)Videz maintenant les données suivantes dans cette table à l'aide des instructions SQL suivantes.
INSERT INTO `ajax_example` VALUES ('Jerry', 120, 'm', 20);
INSERT INTO `ajax_example` VALUES ('Regis', 75, 'm', 44);
INSERT INTO `ajax_example` VALUES ('Frank', 45, 'm', 87);
INSERT INTO `ajax_example` VALUES ('Jill', 22, 'f', 72);
INSERT INTO `ajax_example` VALUES ('Tracy', 27, 'f', 0);
INSERT INTO `ajax_example` VALUES ('Julie', 35, 'f', 90);Fichier HTML côté client
Maintenant, avons notre fichier HTML côté client qui est ajax.html et il aura le code suivant
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age=" + age ;
queryString += "&wpm=" + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name = 'myForm'>
Max Age: <input type = 'text' id = 'age' /> <br />
Max WPM: <input type = 'text' id = 'wpm' />
<br />
Sex: <select id = 'sex'>
<option value = "m">m</option>
<option value = "f">f</option>
</select>
<input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
</form>
<div id = 'ajaxDiv'>Your result will display here</div>
</body>
</html>NOTE - La manière de passer des variables dans la requête est conforme à la norme HTTP et à avoir formA.
URL?variable1=value1;&variable2=value2;Maintenant, le code ci-dessus vous donnera un écran comme indiqué ci-dessous
NOTE - Ceci est un écran factice et ne fonctionnerait pas.
Fichier PHP côté serveur
Alors maintenant, votre script côté client est prêt. Maintenant, nous devons écrire notre script côté serveur qui récupérera l'âge, le wpm et le sexe de la base de données et le renverra au client. Mettez le code suivant dans le fichier "ajax-example.php".
<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
$query .= " AND wpm <= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
$display_string .= "<td>$row[name]</td>";
$display_string .= "<td>$row[age]</td>";
$display_string .= "<td>$row[sex]</td>";
$display_string .= "<td>$row[wpm]</td>";
$display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>Maintenant, essayez en entrant une valeur valide dans "Max Age" ou dans toute autre case, puis cliquez sur le bouton Requête MySQL.
Si vous avez réussi cette leçon, vous savez comment utiliser MySQL, PHP, HTML et Javascript en tandem pour écrire des applications Ajax.