PROCESAR PHP CON AJAX

PROCESAR UN CODIGO PHP CON AJAX'

Para que ajax funcione, este trabaja con objetos que se encargan de hacer las peticiones al servidor, este procesa la peticion y las regresa al navegador, luego el navegador procesa los datos y actualiza el contenido sin refrescar la pagina.

 
OBJETOS DE AJAX

A continuación se presentan los ojetos que utiliza ajax para realizar las peticiones y procesar los datos

Todos los navegadores modernos (IE7 +, Firefox, Chrome, Safari y Opera) tienen un objeto incorporado XMLHttpRequest.

Sintaxis para crear un objeto XMLHttpRequest:

variable=new XMLHttpRequest();

 

Las versiones antiguas de Internet Explorer (IE5 y IE6) utiliza un objeto ActiveX:

variable=new ActiveXObject("Microsoft.XMLHTTP");

 

ENVIAR SOLICITUD AL SERVIDOR

Para enviar una solicitud a un servidor, se utiliza el método open () y send () métodos del objeto XMLHttpRequest:

xmlhttp.open("GET","pagina.php",true);
xmlhttp.send();

 

Si desea enviar información con el método GET, agregar la información a la dirección URL:

xmlhttp.open("GET","pagina.php?id=Henry&id2=Ford",true);
xmlhttp.send();

 

Cuando se utiliza async = true, especificar la función que se ejecutará cuando la respuesta está listo en caso onreadystatechange:

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","pagina.php",true);
xmlhttp.send();

 

CODIGO FINAL DEL CODIGO PHP

 Se debe definir el nombre de la función, esta debe ser asignada a una acción del HTML para que sea invocada, los objetos procesaran la petición, el metodo GET enviara a una pagina.php el id capturado por la funcion en la variable cod, este id debe provenir del HTML, la pagina php ejecutara el codigo que sea necesario del lado del servidor, el resultado de esta pagina sera capturado  por el objeto xmlhttp.onreadystatechange y sera cargado en un elemento HTML, este elmento es identificado por una clase o un id en la porción de código ("ID HTML"), mientras el resultado se carga en otro ID HTML se mostrara el mensaje cargando o en mismo si se desea.

 

function NombreFuncion(cod){

if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}

else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
   if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("ID HTML").innerHTML=xmlhttp.responseText;
      document.getElementById("ID HTML").innerHTML='';
   }
      else{
        document.getElementById("ID HTML").innerHTML='Cargando...';
      }
}

xmlhttp.open("GET","pagina.php?id="+cod,true);
xmlhttp.send();

} 

 

El HTML que debe desencadenar la función y el html que va cargar el resultado debe visualizarse de la siguiente manera.

 

<input type="text" value='1' name="lname" onclick="NombreFuncion(this.value)"> 

<div id="ID HTML" >  </div>

 

El valor de la fución sera capturado por this.value y el value del html puede ser asignado manualmente o por medio de php de la siguiente manera 

 

echo"<input type='text' value='".$fila['value']."'onclick='NombreFuncion(this.value)'>";

 

echo"<div id='ID HTML'>";

 

echo"</div>";