PHP - AJAX y MySQL

AJAX se puede utilizar para comunicarse interactivamente con una base de datos.

Ejemplo de base de datos AJAX

El siguiente ejemplo demostrará cómo una página web lee información de una base de datos mediante AJAX:

El archivo SQL de la tabla Websites utilizado en este tutorial:websites.sql.

Ejemplo


Selecciona la opción correspondiente y la información del usuario se mostrará aquí...


Explicación del ejemplo - Base de datos MySQL

En el ejemplo anterior, la tabla de la base de datos que utilizamos es la siguiente:

mysql> select * from websites;
+----+--------------+---------------------------+-------+---------+
| id | name         | url                       | alexa | country |
+----+--------------+---------------------------+-------+---------+
| 1  | Google       | https://www.google.cm/    | 1     | USA     |
| 2  | 淘宝       | https://www.taobao.com/   | 13    | CN      |
| 3  | Ejemplo | http://www.example.com/    | 4689  | CN      |
| 4  | 微博       | http://weibo.com/         | 20    | CN      |
| 5  | Facebook     | https://www.facebook.com/ | 3     | USA     |
+----+--------------+---------------------------+-------+---------+
5 rows in set (0.01 sec)

Explicación del ejemplo - Página HTML

Cuando el usuario selecciona un sitio web en la lista desplegable anterior, se ejecuta la función llamada "showSite()". Esta función es activada por el evento "onchange":

Código del archivo test.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo (example.com)</title> <script>
function showSite(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { //Código ejecutable en navegadores IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { //Código ejecutable en navegadores IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getsite_mysql.php?q="+str,true); xmlhttp.send(); }
</script> </head> <body> <form> <select name="users" onchange="showSite(this.value)"> <option value="">Selecciona un sitio web:</option> <option value="1">Google</option> <option value="2">Taobao</option> <option value="3">Ejemplo</option> <option value="4">Weibo</option> <option value="5">Facebook</option> </select> </form> <br> <div id="txtHint"><b>La información del sitio web se muestra aquí...</b></div> </body> </html>

La función showSite() realiza los siguientes pasos:

  • Comprueba si se ha seleccionado un sitio web
  • Crea un objeto XMLHttpRequest
  • Crea una función que se ejecuta cuando la respuesta del servidor está lista
  • Envía una solicitud al archivo en el servidor
  • Ten en cuenta el parámetro (q) añadido al final de la URL (que contiene el contenido de la lista desplegable)

Archivo PHP

La página del servidor llamada anteriormente mediante JavaScript es un archivo PHP llamado "getsite_mysql.php".

El código fuente en "getsite_mysql.php" ejecuta una consulta a la base de datos MySQL y luego devuelve el resultado en una tabla HTML:

Código del archivo getsite_mysql.php:

<?php $q = isset($_GET["q"]) ? intval($_GET["q"]) : ''; if(empty($q)) { echo 'Por favor, selecciona un sitio web'; exit; } $con = mysqli_connect('localhost','root','123456'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } //Seleccionar base de datos mysqli_select_db($con,"test"); //Configurar la codificación para evitar que los caracteres chinos se muestren incorrectamente mysqli_set_charset($con, "utf8"); $sql="SELECT * FROM Websites WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table border='1'> <tr> <th>ID</th> <th>Nombre del sitio</th> <th>URL del sitio</th> <th>Ranking Alexa</th> <th>País</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['id'] . "</td>"; echo "<td>" . $row['name'] . "</td>"; echo "<td>" . $row['url'] . "</td>"; echo "<td>" . $row['alexa'] . "</td>"; echo "<td>" . $row['country'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?>

Explicación: cuando la consulta se envía desde JavaScript al archivo PHP, ocurrirá lo siguiente:

  1. PHP abre una conexión a la base de datos MySQL
  2. Encuentra el sitio seleccionado
  3. Crea una tabla HTML, la rellena con datos y la envía de vuelta al marcador de posición "txtHint"
Otras extensiones