1. Introducción
Hoy en día, existen bastantes aplicaciones web, como Backpack, Blinksale y Gmail, que integran la tecnología de bases de datos con AJAX. Esta integración tiene un gran impacto en las aplicaciones web y la experiencia del usuario al proporcionar una poderosa tecnología para comunicarse con la base de datos sin actualizar el navegador, lo que significa que los datos se pueden transferir en tiempo real mientras el usuario continúa con otras interacciones.
Este artículo se centrará en el mecanismo de integración de tecnología anterior. También se proporciona el código fuente de referencia completo. Este ejemplo es una aplicación de registro de trabajos simple donde cada puesto de trabajo contiene un título, una descripción y una fecha, lo que permite a los usuarios agregar, editar y eliminar títulos de trabajo. Todas estas son las operaciones básicas que realiza cuando trabaja con datos de registros de bases de datos, pero esta aplicación va un paso más allá. El título de un trabajo se puede cambiar a un formato editable: se guardará o eliminará de la base de datos y se mostrará en su nuevo estado sin actualizar el navegador ni interrumpir la operación del usuario.
En este artículo, asumo que tienes conocimientos básicos de AJAX, MySQL y PHP, o un lenguaje similar del lado del servidor. Si aún no ha creado un objeto de solicitud HTTP XML, primero puede consultar mi artículo "Cómo usar AJAX". A continuación, analicemos primero el problema de la base de datos.
2. Cree la base de datos
Lo primero que debe hacer es crear tablas de base de datos para almacenar datos para estas posiciones. Creé una tabla MySQL llamada informit_ajax; tiene campos de ID, título, descripción y fecha; todas estas son variables que aparecerán repetidamente en este artículo. Aquí está el código para crear la tabla:
CREATE TABLE ′informit_ajax′ (
′id′ int(11) NO NULL auto_increment,
'fecha' fecha y hora NO NULL valor predeterminado '0000-00-00 00:00:00',
Texto largo 'descripción' NO NULO,
′título′ varchar(100) NOT NULL predeterminado '',
CLAVE PRIMARIA (′id′)
) TYPE=MyISAM;
Puede ejecutar este código utilizando cualquier herramienta de consulta MySQL o lenguaje utilizado para desarrollar la aplicación. Una vez que la base de datos está preparada, el siguiente paso es crear los archivos de front-end que realizan solicitudes al backend de PHP.
3. Realice una solicitud
El archivo HTML de índice aquí es un marcador de posición de datos simple: se analizará desde la base de datos. Este archivo contiene referencias a archivos JavaScript y CSS; también contiene un controlador de carga que realiza la primera solicitud y tres etiquetas div:
Diseño: se utiliza para centrar la
carga del contenido de la página: carga mensajes durante la carga de datos solicitados, que serán recibidos por el Objeto HTTPRequest
· publicaciones: utilizadas para mostrar los datos de cada trabajo analizado
<head>
＜título＞Cómo integrar una base de datos con AJAX＜/título＞
＜enlace href="css/layout.css" rel="hoja de estilo" type="text/css" /＞
＜script src="js/request.js"＞＜/script＞
＜script src="js/post.js"＞＜/script＞
＜/cabeza＞
<body onload="javascript:makeRequest('services/post.php?method=get');">
<div id="diseño" align="centro">
＜div id="publicaciones"＞＜/div＞
＜p＞＜input type="button" value="agregar una publicación" onmousedown="javascript:makeRequest('services/post.php?method=save');" /＞＜/p＞
＜p＞＜div id="cargando"＞＜/div＞＜/p＞
＜/div＞
＜/body＞
La primera solicitud se genera cuando se carga la página. Esta solicitud envía una consulta de obtención a una clase PHP que crearemos más adelante, pero primero necesitamos crear métodos de análisis para la respuesta de la solicitud. El archivo de solicitud de JavaScript maneja todo el trabajo básico, como crear objetos, enviar solicitudes y verificar el estado de preparación. Cuando se recibe una respuesta del objeto Solicitud, utilizo este archivo de trabajos JavaScript para manejar la generación HTML de estos trabajos. El método onResponse es bastante poderoso porque maneja la generación de páginas HTML para cada puesto de trabajo en versiones de texto y formulario, y las coloca en sus propias etiquetas div personalizadas, de esta manera podemos generarlas fácilmente durante la interacción del usuario. De esta manera podemos cambiar entre versiones de texto y formulario de cada publicación; esto se puede lograr haciendo clic en el enlace "editar esta publicación". El siguiente es el código de la página HTML creada para cada posición. Puede ver la implementación completa del método en el archivo fuente de descarga correspondiente de este artículo.
var html = "<div class='post' id='post_"+ i +"' "+ postDisplay +">"
+ "＜div clase='título' id='título_"+ i +"'＞"+ _título +"＜/div＞"
+ "＜div clase='descripción' id='descripción_"+ i +"'＞"+ _descripción +"＜/div＞"
+ "＜div clase='fecha' id='fecha_"+ i +"'＞"+ _fecha +"＜/div＞"
+ "＜a href="javascript:toggle('"+ i +"');"＞editar esta publicación＜/a＞＜br/＞"
+ "</div>"
+ "<div class='post' id='formPost_"+ i +"' "+ formPostDisplay +"＞"
+ "＜div clase='título'＞＜tipo de entrada='texto' nombre='título' id='formTitle_"+ i +"' tamaño='60' valor='"+ _título +"'＞＜/div >"
+ "＜div class='descripción'＞＜textarea type='text' id='formDescription_"+ i +"' wrap='virtual' cols='60' filas='15'＞"+ _descripción +"＜/ área de texto＞＜/div＞"
+ "＜div clase='fecha'＞"+ _fecha +"＜/div＞"
+ "＜tipo de entrada='botón' nombre='cancelar' valor='cancelar' onclick="javascript:toggle('"+ i +"');"＞"
+ "＜tipo de entrada='botón' nombre='eliminar' valor='eliminar esta publicación' onclick="javascript:deletePost("+ _id +");"＞"
+ "<tipo de entrada='botón' nombre='enviar' valor='guardar esta publicación' onclick="javascript:saveNewPost("+ _id +","+ i +");">"
+ "</div>"
+ "＜p＞"nbsp;＜/p＞";
La versión de texto de cada publicación simplemente muestra el título, la descripción y la fecha y un enlace "editar esta publicación". La versión del formulario de cada publicación tiene tres botones:
·"cancelar Botón ": simplemente cambia el estado de la publicación a la versión de texto.
· Botón "eliminar esta publicación": envía el ID de la publicación actual al objeto PHP para eliminarlo de la base de datos.
· Botón "guardar esta publicación": permite al usuario guardar el trabajo nuevo o editado en el servidor.
Los métodos principales para manejar la comunicación de solicitudes del lado del servidor son los métodos onResponse, saveNewPost, deletePost y getPost. También existen métodos getter y setter que almacenan el índice del trabajo actualmente en funcionamiento. El método proporciona el valor de índice actual a estos métodos principales para que la posición correcta pueda actualizarse con la información correcta basada en ese índice. Aquí hay un breve resumen de cada método principal (excluyendo onResponse, ya que hemos analizado su funcionalidad antes). Descripción y ejemplo de código:
· El siguiente método saveNewPost guarda la nueva publicación recopilando y enviando los valores de entrada del formulario a un objeto PHP y establece el método getPost como método de devolución de llamada onreadystatechange:
función saveNewPost(_id, _index){.
var nuevaDescripción = document.getElementById("formDescription_"+ _index).value;
var newTitle = document.getElementById("formTitle_"+ _index).value;
setIndex(_index);
sendRequest("services/post.php?method=save"id="+ _id +""title="+ nuevo título +""descripción="+ nueva descripción, getPost);
}
· El método getPost a continuación es un método de devolución de llamada: es responsable de actualizar una sola publicación cuando se recibe una respuesta del objeto PHP:
función getPost(){
if(checkReadyState(solicitud)) {
var respuesta = request.responseXML.documentElement;
var _title = respuesta.getElementsByTagName('título')[getIndex()].firstChild.data;
var _description = respuesta.getElementsByTagName('descripción')[getIndex()].firstChild.data;
var _date = respuesta.getElementsByTagName('fecha')[getIndex()].firstChild.data;
document.getElementById("title_"+ getIndex()).innerHTML = _title;
document.getElementById("descripción_"+ getIndex()).innerHTML = _descripción;
document.getElementById("fecha_"+ getIndex()).innerHTML = _fecha;
alternar(getIndex());
}
}
· El método deletePost a continuación envía el índice actual como una solicitud al objeto PHP, que finalmente eliminará el registro en la base de datos y responderá con una posición actualizada:
función eliminarPost(_id){
sendRequest("services/post.php?method=delete"id="+ _id, onResponse);
}
Sorprendentemente, la parte más complicada ya pasó. Analicemos la parte más crítica: la interacción de la base de datos.
4. Interactuar con la base de datos
Para interactuar con la base de datos, necesita crear métodos para recuperar, insertar, reemplazar y eliminar posiciones. Elegí crear una clase de publicación con métodos obtener, guardar y eliminar para manejar estas interacciones. Esta clase también tiene una referencia al archivo de conexión de la base de datos (utilizado para conectarse a la base de datos). Debe reemplazar el inicio de sesión, la contraseña y el nombre de la base de datos con la información de su propia base de datos.
DEFINE ('DB_USER', 'NOMBRE DE USUARIO');
DEFINE ('DB_PASSWORD', 'CONTRASEÑA');
DEFINE ('DB_HOST', 'localhost');
DEFINE ('NOMBRE_DB', 'BASE DE DATOS');
$dbc = @mysql_connect (DB_HOST, DB_USER, DB_PASSWORD) O die ('No se pudo conectar a MySQL: ' . mysql_error() );
La referencia al archivo de conexión y el nombre de la base de datos están en el constructor de esta clase. Su constructor debería ser similar al siguiente código:
function Post(){
require_once('mysql_connect.php');
$this->table = "informit_ajax";
}
El siguiente método dbConnect es responsable de crear la conexión, pasando información de inicio de sesión a la base de datos. Este método se reutiliza en todos los métodos principales antes de consultar la base de datos:
function dbConnect(){;
DEFINE ('ENLACE', mysql_connect (DB_HOST, DB_USER, DB_PASSWORD));
}
El siguiente método get recorre la tabla de la base de datos, crea una cadena XML basada en la fila de la base de datos y devuelve la cadena al solicitante:
function get(){
$this->dbConnect();
$consulta = "SELECCIONAR * DESDE $this->table ORDENAR POR id";
$resultado = mysql_db_query (DB_NAME, $consulta, ENLACE);
$xml = "＜?xml version="1.0" codificación="ISO-8859-1" ?＞n";
$xml .= "<publicaciones>n";
while($fila = mysql_fetch_array($resultado)) {
$xml .= "<publicación>n";
$xml .= "<id>" . $fila['id'] "</id>n";
$xml .= "＜fecha＞" $fila['fecha'] "＜/fecha＞n";
$xml .= "<título><![CDATA[" $fila['título'] "]]></título>n";
$xml .= "<descripción><![CDATA[" $fila['descripción'] "]]></descripción>n";
$xml .= "＜/post＞n";
}
$xml .= "＜/publicaciones＞";
mysql_close();
header("Tipo de contenido: aplicación/xml; conjunto de caracteres=UTF-8");
eco $xml;
}
El siguiente método de guardar logra dos propósitos al manejar las posiciones de actualización e inserción:
función save($id, $title, $description){
$this->dbConnect();
$consulta = "SELECCIONAR * DESDE $this->table WHERE id='$id'";
$resultado = @mysql_query ($consulta);
si (mysql_num_rows($resultado) > 0)
{
$consulta = "ACTUALIZAR $esta->tabla SET título='$título', descripción='$descripción', fecha=AHORA() DONDE id='$id'";
$resultado = @mysql_query($consulta);
}
demás
{
$consulta = "INSERTAR EN $this->table (título, descripción, fecha) VALORES ('$título', '$descripción', AHORA())";
$resultado = @mysql_query($consulta);
}
mysql_close();
$esto->obtener();
}
El método de eliminación siguiente es responsable de eliminar una ubicación según el ID pasado como parámetro. Luego llame al método get para devolver los nuevos datos al archivo de solicitud:
función eliminar ($id){
$this->dbConnect();
$consulta = "BORRAR DE $this->table WHERE id='$id'";
$resultado = @mysql_query($consulta);
mysql_close();
$esto->obtener();
}
5. Aplicación integral
Para integrar las partes anteriores, es necesario crear un archivo simple que sirva como puente de comunicación entre las solicitudes HTTP XML y los objetos PHP. En este punto, la página no solo crea objetos PHP, sino que también recibe consultas y pasa variables a métodos generados dinámicamente; en este caso, obtener, guardar o eliminar. Una consulta de ejemplo a continuación incluye un método $ y las variables confiables $id, $title y $description.
require_once("../classes/Post.class.php");
$publicación = nueva publicación();
$post->$method($id, $title, $description);
discutiremos estas técnicas más a fondo en el futuro. El desarrollo web actual vuelve a parecer joven y dinámico, y tenemos suerte de ser parte de esta nueva era tecnológica.