AJAX se puede utilizar para comunicarse interactivamente con una base de datos.
Instancia de base de datos AJAX
El siguiente ejemplo demostrará cómo una página web lee información de la base de datos a través de AJAX:
El archivo SQL de la tabla de sitios web utilizado en este tutorial: sitios web.sql.
Explicación de ejemplo: base de datos MySQL
En el ejemplo anterior, la tabla de base de datos que utilizamos se ve así:
mysql> seleccione * de sitios web;+----+--------------+---------------------- -----+-------+---------+| nombre | alexa |+----+--------- -----+---------------------------+-------+-------- -+| 1 | Google | https://www.google.com/ || 3 | http://www.codercto.com/ | 4689 || 4 | http://weibo.com/ || | Estados Unidos |+----+----------------------+------------------------- - -+-------+---------+5 filas en conjunto (0,01 segundos)
Explicación de ejemplo: página HTML
Cuando el usuario selecciona un usuario en la lista desplegable anterior, se ejecuta una función llamada "showSite()". Esta función se activa mediante el evento "onchange":
Código del archivo test.html:
< ! HTML > <html> <cabeza> < meta conjunto de caracteres = " utf-8 " > <título> Tutorial de codificación ( codercto.com ) </título> función <guión> mostrar sitio ( str ) { si ( cadena == " " ) { documento.getElementById ( " txtHint " ) internalHTML = " " ; si ( ventana . XMLHttpRequest ) { // Código de ejecución del navegador IE7+, Firefox, Chrome, Opera, Safari xmlhttp = nuevo Solicitud XMLHttp ( ) ; demás { // código de ejecución del navegador IE6, IE5 xmlhttp = nuevo ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = función ( ) { si ( xmlhttp . readyState == 4 && xmlhttp . estado == 200 ) { documento.getElementById ( " txtHint " ) . } xmlhttp open ( " GET " , " getsite_mysql.php ? q = " + str , verdadero ) ; xmlhttp ;</cabeza> <cuerpo> <formulario> < seleccionar nombre = " usuarios " onchange = " mostrarSitio(este.valor) " > < opción valor = " " > Seleccione un sitio web: </ opción > < opción valor = " 1 " > Google </ opción > < opción valor = " 2 " > Taobao </ opción > < opción valor = " 3 " > Tutorial del codificador </ opción > < opción valor = " 4 " > Weibo </ opción > < opción valor = " 5 " > Facebook </ opción > </seleccionar> </formulario> < br > < div id = " txtHint " > < b > La información del sitio web se muestra aquí... </ b > </ div > </cuerpo> </html> La función showSite() realiza los siguientes pasos:
Comprobar si un sitio web está seleccionado
Crear objeto XMLHttpRequest
Cree una función que se ejecute cuando la respuesta del servidor esté lista
Enviar una solicitud a un archivo en el servidor.
Tenga en cuenta el parámetro (q) agregado al final de la URL (que contiene el contenido de la lista desplegable)
archivos PHP
La página del servidor llamada arriba a través de JavaScript es un archivo PHP llamado "getsite_mysql.php".
El código fuente en "getsite_mysql.php" ejecuta una consulta en la base de datos MySQL y devuelve los resultados en una tabla HTML:
código de archivo getsite_mysql.php:
<?php $q = isset ( $_GET [ " q " ] ) ? intval ( $ _GET [ " q " ] ) : ' ' si ( vacío ( $q ) ) { eco ' Por favor
seleccione un sitio web ' ; $ con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; ( ! $con ) { die ( ' No se
pudo conectar: ' . mysqli_error ( $con ) ) ; // Seleccionar base de datos mysqli_select_db ( $con , " test " ) ; // Establece la codificación para evitar caracteres chinos confusos mysqli_set_charset ( $ con , " utf8 " ) ; $ sql = " SELECCIONAR * DE Sitios web DONDE id = ' " $ q " ' " ; " <table border='1'><tr><th>ID</th><th>Nombre del sitio web</th><th>URL del sitio web</th><th>Ranking de Alexa</th><th> País</th></tr> " ; mientras ( $fila = mysqli_fetch_array ( $resultado ) ) { eco " <tr> " ; eco " <td> " $ fila [ ' id ' ] " </td> " ; " <td> " $ fila [ ' nombre ' ] " </td> " ; " <td> " $ fila [ ' url ' ] " </td> " ; " <td> " $ fila [ ' alexa ' ] " </td> " ; " <td> " $ fila [ ' país ' ] " </td> " ; " </tr> " ; eco " </table> " ; mysqli_close ( $con ) ? >; Explicación: Cuando se envía una consulta desde JavaScript a un archivo PHP, ¿qué sucede?
PHP abre una conexión a una base de datos MySQL
Encuentra el usuario seleccionado
Cree una tabla HTML, rellénela con datos y envíe el marcador de posición "txtHint"
