martes, 1 de diciembre de 2009

.::Codificando y Decodificando JSON PHP+MySQL+JQuery::.

Al momento de realizar aplicaciones con AJAX, necesitamos un formato de intercambio de datos ligero, que haga un buen complemento a nuestras aplicaciones ligeras, si bien es cierto que AJAX(Asynchronous JavaScript And XML), como su nombre mismo lo dice, trabaja nativamente con XML, pero sabemos que al trabajar con este formato es bastante tedioso (No digo que no sea util).. pero como alternativa esta JSON.

"JSON (JavaScript Object Notation) es un formato de datos ligero de intercambio. Es fácil para los seres humanos a leer y escribir. Es fácil para las máquinas para analizar y generar. Se basa en un subconjunto del lenguaje de programación JavaScript, estándar ECMA-262 3 ª Edición - diciembre de 1999. JSON es un formato de texto que es completamente independiente del lenguaje pero utiliza convenciones que son familiares para los programadores de la C-familia de lenguas, incluyendo C, C + +, C #, Java, JavaScript, Perl, Python y muchos otros. Estas propiedades hacen de JSON un conjunto de datos ideal de lengua de intercambio".
Segun la pagina oficial json.org

Y bueno... aqui les traigo un ejemplo... de como utilizar JSON ( Codificar y Decodificar ) utilizando JQuery (Con Plugin para JSON) ,PHP y MySQL:



REQUERIMIENTOS:

- JQuery ( Version para desarrollo) http://code.jquery.com/jquery-1.4.2.min.js

- Para hacer el encode en Javascript utilizaremos el Plugin para JQuery que pueden descargarlo desde aqui: http://plugins.jquery.com/project/json.

- Para el encode y decode en PHP, depende de la versión de PHP que estemos utilizando (Según la pagina oficial de PHP) :
si es mayor a PHP 5.02.0 , podemos utilizar las funciones json_encode() , json_decode(), pero si nuestro servidor tiene una version menor a PHP 5.02.0, no vamos a en contrar esas funciones de forma nativa, por lo que deberemos utilizar un Script, que en este caso utilizaré un script de la pagina http://pear.php.net

Bueno empecemos viendo los archivos que utilizaremos:

- Index.html ( Donde va el formulario y todo el codigo HTML)
- JSON.php ( Extension PHP para codificar y decodificar JSON para versiones menores a PHP 5.02.0)
- abm_demo.php ( Archivo PHP que recibe y devuleve JSON para las Consultar )
- myconexion.php ( Archivo de Conexion a MySQL )
- myScript.js ( Aqui ira el codigo Javascript No Obstructivo)
- jquery-1.4.2.min.js ( JQuery)
- jquery.json-2.2.js ( Plugin para Encode y Decode de JSON en Javascript )

index.html

Nombre:
Apellido:



abm_demo.php [ Cargamos los Scripts necesarios ]
< ?php require_once('./JSON.php'); $json = new Services_JSON();?>< ?php require_once('conexion/myconexion.php'); ?>
[ Logica ]

if(!isset($_GET['acc']))
{

//Cargar Data
mysql_select_db($database_myconexion, $myconexion);
$query_Recordset1 = "SELECT * FROM ejemplo";
$Recordset1 = mysql_query($query_Recordset1, $myconexion) or die(mysql_error());
$dat=array();
while ($row = mysql_fetch_array($Recordset1))
{
$dat[]= $row;
}
echo $json->encode($dat);

//si tienes version superior a PHP 5.02.0, puedes reemplazar:
/*
echo $json->encode($dat);
echo $output;

por

"echo json_encode($dat);"

y no necesitasras ninguna libreria extra.
*/


}
else{
$accion=$_GET['acc'];
switch($accion)
{
case 'guardar':

$data = $_POST['data'];
$data = str_replace('\\','',$data);
$json = new Services_JSON(SERVICES_JSON_LOOSE_TYPE);
$value_ = $json->decode($data);
$ConsultaSQL='INSERT ejemplo(nombre,apellido) values("'.$value_[0]['value'].'","'.$value_[1]['value'].'")';
mysql_select_db($database_myconexion, $myconexion);
$Result1 = mysql_query($ConsultaSQL, $myconexion) or die(mysql_error());
echo '{result:"Ok Insertado Correctamente!"}';
}
}


myScript.js

$(function(){

function traerData()
{
$.ajax({
url:'abm_demo.php',
success:function(rel)
{
var asd=eval(rel);
var tabla='';
tabla+=''+'';
tabla+='';
});
tabla+='
ID<\/td>'+'NOMBRE<\/td>'+'APELLIDO<\/td>'+'<\/tr>';
$.each(asd,function(index,data){
tabla+='
'+data.id+'<\/td>'+''+data.nombre+'<\/td>'+''+data.apellido+'<\/td>'
tabla+='
';

$('#dataContent').html(tabla);
}
});
$('#nombre').focus();
}
traerData();
$('#form1').submit(function()
{
var data=document.form1.elements
var arr=new Array();
for(var i in data)
{
if(data[i].type == 'text'||data[i].type == 'hidden')
{var obj = {};
obj.name=data[i].name;
obj.value=data[i].value;
arr.push(obj);
}
}
var sss=$.toJSON(arr);
$.ajax({
async:true,
success:function(a,b,result)
{
traerData();
var sd=eval(result.responseText);
$('#nombre').val('');
$('#apellido').val('');
habilitar();
alert(sd);
},
data: {data:sss},
url:this.action,
type:this.method
});

return false;
});
});
function habilitar()
{
var apellido = $('#apellido').val();
var nombre = $('#nombre').val();
if(nombre!=''&&apellido!='') $('#submit').attr('disabled','');
else $('#submit').attr('disabled','disabled');
}



-> Descargar <-

sábado, 19 de septiembre de 2009

COMPROBAR USUARIO CON AJAX

Muchas veces cuando tenemos una pagina para el registro de Usuarios en nuestra Web, dada la casualidad de que un Usuario, elija el mismo Username de otro, es demasidado fastidioso (Para el cliente) estar escribiendo sus datos..., enviandolos... y esperando "a ver si logra" registrase satisfactoriamente, puesto que despues de todo este proceso de envio de datos al Servidor, el usuario recien sabrá si el Username que eligio estaba disponible;

Para ahorrarnos todo este "menjunje" (Mezcla de aspecto desagradable), les traigo una de muchas soluciones a este problema, en este caso será utilizando AJAX+PHP+MYSQL, la cual quedara masomenos asi:

Utilizaremos el Script Para Recargar Una Pagina con Ajax (Del Post Anterior), para este caso le hemos agregado la funcion "ComprobarUsuario", la cual recibe los mismos parametros (datos,contenedor), pero a diferencia, recoge el Username de la caja de texto para poder comprobar su disponibilidad. Los parametros: datos = URL de la pagina que queremos llamar,en este caso sera "./comprobarUser.php" y Contenedor = Objeto donde queremos que se muestre el estado del Usuario., la funcion ComprobarUsuario quedara asi:


archivo: ajax.js

  function ComprobarUsuario(datos,contenedor){
divResultado = document.getElementById(contenedor);

username_=document.formUsuario.txt_username.value;

ajax=getXMLHttpRequest();
ajax.open("POST", datos);
ajax.onreadystatechange=function(){
if(ajax.readyState==1)
{divResultado.innerHTML='Cargando...'}
else{
if(ajax.readyState==4)
{divResultado.innerHTML=ajax.responseText;}
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

ajax.send("username="+username_);//enviando los parametros a la pagina "datos";
}

Y la funcion para crear el objeto XMLHttpRequest en el mismo archivo:


archivo: ajax.js

  function getXMLHttpRequest(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

Por Parte del Servidor tenemos el archivo "comprobarUsuario.php" el que se encargara de ir a la base de Datos y comprobar si el username enviado esta disponible o no, este archivo recibe el parametro POST "username", con el (Valga la redundancia) Username en cuestion... y lo que hace es Imprimir en pantalla "Username Disponible" o "Username Ocupado" segun sea el caso; El "comprobarUsuario.php" es el siguiente:

archivo: comprobarUsuario.php

 
$hostname_conn = "localhost";
$database_conn = "user";
$username_conn = "root";
$password_conn = "root";
$conn = mysql_pconnect($hostname_conn, $username_conn, $password_conn) or trigger_error(mysql_error(),E_USER_ERROR);

$colname_rs_user = "-1";
if (isset($_POST['username'])) {
$colname_rs_user = $_POST['username'];
}
mysql_select_db($database_conn, $conn);
$query_rs_user = sprintf("SELECT * FROM usuario WHERE username = '%s'",$colname_rs_user);
$rs_user = mysql_query($query_rs_user, $conn) or die(mysql_error());
$row_rs_user = mysql_fetch_assoc($rs_user);
$totalRows_rs_user = mysql_num_rows($rs_user);
if($totalRows_rs_user == 0)
{
echo '
Username Disponible';
}
else{
echo '
Username Ocupado';
}
mysql_free_result($rs_user);


Debemos poner un DIV cerca del formulario donde mostrar el mensaje de estado del Username Ocupado o Disponible


archivo: index.php







El proceso iniciara en el index.php desde el formulario:


archivo: index.php






REGISTRO DE USUARIO




Username:
Nombre:
Password:









Al pinchar en el boton "Disponible?"







estamos llamando a la funcion "comprobarUsuario(datos,contenedor)", la cual recoge el username a comprobar desde el campo de texto que le indiquemos en el codigo:



username_=document.formUsuario.txt_username.value;


Se envian los parametros :



ajax.send("username="+username_);//enviando los parametros 


y finalmente Mostramos el Resultado cuando el Servidor halla dado una respuesta:



 if(ajax.readyState==1)
{divResultado.innerHTML='Cargando...' //Mostramos "Cargando..." mientras no hay respuesta del Servidor
}
else{
if(ajax.readyState==4)
{divResultado.innerHTML=ajax.responseText; //Se muestran los resultados en el divResultado
}
}
}


finalmente al comprobar usuario nos mostrara Username Disponible o Username Ocupado:



VER EJEMPLO FUNCIONANDO:


Ver Ejemplo


DESACARGAR EJEMPLO:


Ejemplo-Comprobacion-Usuario

jueves, 13 de agosto de 2009

SCRIPT PARA CARGAR PAGINAS CON AJAX

En este post les mostrare como poder recargar una pagina con Ajax, en si es un codigo que quiero mostrarles, bastante basico y sencillo, donde solo cargo una pagina con el ObjetoXMLhttpRequest (El Corazon de Ajax) que es muy util en el momento que deseamos mostrar alguna informacion o simplemente hacer una llamada Asíncrona, el ejemplo quedara masomenos asi:Para esto voy a utilizar un script "ajax.js", el cual ire explicando por partes

archivo: ajax.js

  function getXMLHttpRequest(){

var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}



Bueno, si recien estas empezando con Ajax y derrepente no entiendes este codigo, no te preocupes pues solo lo utilizaremos para crear el objeto XMlhttpRequest y siempre
va a ser de la misma manera, no variara para nada, excepto a la hora de mandar algunos parametros.

Luego de ese metodo, crearemos una funcion, la cual llamará a este método que hemo creado

archivo: ajax.js

function TraerPagina(datos,contenedor){ //datos= URl de la pagina qu queremos mostrar - contenedor=id del
// objeto donde quieres mostrar la respuesta del servidor (generalmente un div, pero no necesariamente)
divResultado = document.getElementById(contenedor);
ajax=getXMLHttpRequest();
ajax.open("GET", datos); //metodo de la peticion (tambien puede ser POST)
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML=ajax.responseText
}
else {
divResultado.innerHTML='Imagen Gif Cargando'; //Aqui poner un tag (img src="loading.gif"), que se cargara mientras se completa la transaccion
}
}
ajax.send(null)
}

Esos dos codigos de arriba, van a ir en un solo archivo que lo llamaremos "ajax.js".

Ahora crearemos una pagina de donde haremos las llamadas a otras pagina mediante "Ajax";




















Para Hacer cada llamada, lo hacemos especificando la URl a la que deseamos llamar, y el nombre del Objeto









En Este caso, el Objeto en el cual quiero que se muestre la informacion es un DIV con id "sam"







Le das click al boton y la informacion en la parte de abajo cambia sin refrescar la pantalla haciendo una peticion Asíncrona. a los archivos a los que hace referencia, no son mas que 2 archivos .html (alumnos y docentes) que tienem un texto cuanquiera, ahi tambien se puede llamar a archivos .php, .jsp, etc. y traer informacion de una Base de datos o un contenedor de informacion como puede ser un XML.

Más Adelante les mostrare como llamar por el metodo POSt enviando parámetros a u archivo PHP.

LAS FUENTES:
DESCARGAR FUENTES DEL EJEMPLO (.zip)


EJEMPLO EN FUNCIONAMIENTO:

Ejemplo

->Comentarios<-