www/src/main.js (documento js de usuario)
una vez que se cargue el documento, se prepara el conector ajax
los eventos ([input].onmousdedown) llama a la funcion load() del controlador ajax, la cual deja datos en cola para que el objeto XMLHTTP los procese
los datos son enviados desde javascript a sus respectivos documentos ".php", los cuales tiene ya predefinido sus funciones y/o acciones,
estos retornan "arrays" codificados con serialize(), los cuales serán decodificados con unserialize() por javascript
finalmente se realizan los parsers de datos en javascript y da formato en html para ser puesto en el contenedor
NOTA: nunca envíen sentencias SQL desde ajax para que sean ejecutadas en php, es muy peligroso
Código Javascript
:
Ver original/* inicializamos el conector
*/
var connector
window.onload = function()
{
connector = new ajax();
}
/* función para envío
*/
function send()
{
connector.load
({
/* documento de lado del servidor
*/
// url : 'http://localhost/ejemplo_input.php',
url : './ejemplo_input.php',
/* funcion cuando la carga/proceso este completo
*/
onload : function(text, status)
{
if(text == 'completo')
{
/* el registro fue existoso,
*/
alert('se ha guardado los datos')
}
else
{
/* convertimos los datos en objeto o array
*/
var datos = unserialize(text);
/* acciones segun el tipo
*/
switch(datos['type'])
{
/* problemas con envio
*/
case 'php':
alert('error en php #' + datos['nro'] + ' , ' + datos['msg']);
break;
/* problemas con mysql (revisar ejemplo_input.php);
*/
case 'mysql':
alert('error en mysql #' + datos['nro'] + ' , ' + datos['msg']);
break;
}
}
},
/* ocurrio un error durante la carga
*/
onerror : function(text, status)
{
alert('error durante la carga, ('+ status + ') ' + text);
},
/* cargamos las variables post
*/
post :
{
'usuario' : document.getElementById('name').value,
'otra_variable' : 'test'
}
});
}
/* función para listado
*/
function getData()
{
var pagina = document.getElementById('pagina').value;
connector.load
({
/* documento de lado del servidor
*/
//url : 'http://localhost/ejemplo_datos.php',
url : './ejemplo_datos.php',
/* funcion cuando la carga/proceso este completo
*/
onload : function(text, status)
{
/* convertimos los datos en objeto o array
*/
var datos = unserialize(text);
/* acciones segun el tipo de respuesta
*/
switch(datos['type'])
{
/* datos correctos
*/
case 'data':
/* reescribimos la variable (asi no tener que acceder en modo array)
*/
datos = datos['data'];
console.log(datos);
/* verificar datos
*/
switch(datos.length)
{
case 0:
alert('no hay datos');
break;
case 25:
alert('hay mas datos en la siguiente pagina');
break;
default:
alert('ultima pagina');
}
/* inicializar variables del loop de forma local
*/
var html = '',
resultado;
/*
Loop de datos, aqui es practicamente lo mismo que result = mysql_fetch_assoc() en php
NOTA: no usare DOM, ya que le complicara la cabeza a mas de uno
*/
for(var a in datos)
{
/* result = mysql_fetch_assoc();
*/
resultado = datos[a];
/* incluir datos al buffer
*/
html += '<div>id ' + resultado['id'] + ' : ' + resultado['usuario'] + '</div>';
}
/* datos del buffer al contenedor
*/
document.getElementById('contenedor').innerHTML = html;
break;
/* problemas con envios o errores de datos
*/
case 'php':
alert('error en php #' + datos['nro'] + ' , ' + datos['msg']);
break;
/* problemas con mysql (revisar ejemplo_input.php);
*/
case 'mysql':
alert('error en mysql #' + datos['nro'] + ' , ' + datos['msg']);
break;
}
},
/* ocurrio un error durante la carga
*/
onerror : function(text, status)
{
alert('error durante la carga, ('+ status + ') ' + text);
},
/* cargamos las variables post
*/
post :
{
'pagina' : pagina
}
});
}
crea un objeto XMLHTTP y va poniendo datos en cola (esta es una librería muy vieja, la hice hace 3 años atrás aproximadamente)
Código Javascript
:
Ver originalvar ajax = function()
{
/* se carga el objeto XMLHTTP
*/
try
{
req = new XMLHttpRequest();
}
catch(err1)
{
/* exepcion para IE
*/
try
{
req = new ActiveXObject('Msself.xml2.XMLHTTP');
}
catch(err2)
{
try
{
req = new ActiveXObject('Microsoft.XMLHTTP');
}
catch(err3)
{
req = false; alert('ajax no soportado');
}
}
}
/* varuable interna de request
*/
this.xml = req;
/* buffer de peticiones (request)
*/
this.req = [];
};
// prototipo (metodos)
ajax.prototype =
{
/* funcion de carga / cola
*/
load : function (object)
{
/* se comprueba las variables post
*/
if(!object.post){ object.post = {} }
/* se pone en cola el archivo
*/
this.req.push
({
url : object.url,
onerror : object.onerror,
onload : object.onload,
post : object.post
});
/* se realiza un llamado al engine
*/
this.engine();
},
/* controlador del motor ajax
*/
engine : function()
{
/*
se comprueba el estado de ajax
si esta "ocupado" no se ejecuta ninguna accion
*/
if(this.xml.readyState == 4 || this.xml.readyState == 0)
{
/*
se carga el objeto actual,
sirve para evitar problemas de contexto
*/
var self = this;
/* se carga la varliable de peticion
*/
var request = this.req[0];
/* se abre la url
*/
self.xml.open('POST', request.url, true);
/* se incluye el header para post
*/
self.xml.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
/* se incluye la funcion para cambio de estado
*/
self.xml.onreadystatechange = function()
{
/* si esta completado el proceso, se parsea la respuesta
*/
if(self.xml.readyState == 4)
{
/* try a catch para evitar que se interumpa su ejecucion
*/
try
{
switch(self.xml.status)
{
case 200: // correcto
case 304:
/* llamar a la funcion de usuario "onload" y enviar el los datos
*/
request.onload(self.xml.responseText, self.xml.status);
break;
default:
/*
ocurrio un error durante la carga,
realizar un mensaje a consola y llamar a la funcion "onerror"
*/
console.log('ajax error: ('+ self.xml.status +') ',self.xml.responseText);
/* verificar si la funcion existe (no vacia)
*/
if(request.onerror)
{
request.onerror(self.xml.responseText, self.xml.status)
}
}
}
catch(e)
{
/* ocurrio un error en request.onload o request.onerror
*/
console.log(e);
alert('error ajax:' + e.message);
}
/* eliminar la peticion actual (ya fue procesada)
*/
self.req.splice(0,1);
/* si hay mas datos en el buffer, se llama nuevamente a esta funcion
*/
if(self.req.length > 0)
{
self.engine();
}
}
}
/* buffer the las variables post
*/
var post_string = '';
/* se prepara y da formato a las variables
*/
for(a in request.post)
{
/* evitar problemas con caracteres reservados
*/
request.post[a] = encodeURIComponent(request.post[a]);
/* se incrementa el buffer
*/
post_string += (post_string != '' ? '&' : '') + a + '=' + request.post[a];
}
/* se envian los headers de la peticion
*/
self.xml.send(post_string);
}
}
}
ejemplo de uso
Código Javascript
:
Ver original// inicializar cotrolador
var conector = new ajax();
// se pone un pedido en cola
conector.load(
{
// url a cargar
url : 'url',
// función cuando la carga se completa
onload : function(texto_de_respuesta, estado)
{
// se ejecuta la funcion del pedido
},
// función cuando ocurre un error
onerror : function(texto_de_repuesta, estado)
{
// codigo de exepcion
},
// variables post
post :
{
'nombre de la variable' : 'contenido [string:int]'
}
})
sigue....