PHP y AJAX
¿Qué es AJAX?
AJAX significa Asincrónico JavaScript y XML. AJAX es una nueva técnica para crear aplicaciones web mejores, más rápidas y más interactivas con la ayuda de XML, HTML, CSS y Java Script.
La aplicación web convencional transmite información hacia y desde el servidor mediante solicitudes sincrónicas. Esto significa que debe completar un formulario, presionar enviar y ser dirigido a una nueva página con nueva información del servidor.
Con AJAX, cuando se presiona Enviar, JavaScript hará una solicitud al servidor, interpretará los resultados y actualizará la pantalla actual. En el sentido más puro, el usuario nunca sabría que se ha transmitido algo al servidor.
Para obtener un aprendizaje completo sobre AJAX, consulte el tutorial de AJAX.
Ejemplo de PHP y AJAX
Para ilustrar claramente lo fácil que es acceder a la información de una base de datos usando Ajax y PHP, vamos a construir consultas MySQL sobre la marcha y mostrar los resultados en "ajax.html". Pero antes de continuar, hagamos el trabajo de base. Crea una tabla usando el siguiente comando.
NOTE - Suponemos que tiene suficientes privilegios para realizar las siguientes operaciones de MySQL.
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`)
)Ahora descargue los siguientes datos en esta tabla utilizando las siguientes declaraciones SQL.
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);Archivo HTML del lado del cliente
Ahora tengamos nuestro archivo HTML del lado del cliente que es ajax.html y tendrá el siguiente código
<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 forma de pasar variables en la consulta es según el estándar HTTP y tienen formA.
URL?variable1=value1;&variable2=value2;Ahora el código anterior le dará una pantalla como se muestra a continuación
NOTE - Esta es una pantalla ficticia y no funcionaría.
Archivo PHP del lado del servidor
Así que ahora su script del lado del cliente está listo. Ahora tenemos que escribir nuestro script del lado del servidor que obtendrá la edad, las palabras por minuto y el sexo de la base de datos y lo enviará de vuelta al cliente. Coloque el siguiente código en el archivo "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;
?>Ahora intente ingresando un valor válido en "Max Age" o cualquier otro cuadro y luego haga clic en el botón Consultar MySQL.
Si ha completado con éxito esta lección, entonces sabrá cómo usar MySQL, PHP, HTML y Javascript en conjunto para escribir aplicaciones Ajax.