AJAX fácil en PHP , VB.Net , C# , C++ y HTML puro Leido 12.395 veces

 
  Jesús
Ha recibido:
3 premios


He visto que la gente se arma un lio que no veas con el ajax, realmente ajax es la cosa más fácil que existe, no entiendo como la gente se complica tanto con capazos de código javascript.

Bueno aquí van la explicación y datos técnicos para que entendamos:

Ajax realmente es sólo como se ha llamado a recibir datos de foma asíncrona desde javascript.
(Asynchronous JavaScript and XML)

Esto se creó para poder recibir código XML sin necesidad de recargar una página web y parsear este XML, pero bueno, eso son estupideces, usaremos ajax para recibir html y meterlo dentro de un tag, ya sea un div, un span, un td, cualquier cosa. En el ejemplo que he creado lo meto dentro de un span, pero puedes hacerlo como te de la gana.

Mi función ajax la creé para mi uso personal, algunos amigos mios utilizaban el updatepanel de asp.net, una locura que te mete kilos de javascript, he llegado a ver páginas web de gente metiendo 1 mega de javasciprt para hacer cuatro estupideces. Por supuesto ese javascript se lo metía el sistema de microsoft al crear controles ajax mediante visual studio.

El uso de mi función es muy sencillo, metemos la función en nuestra página html y la llamamos mediante cualquier evento javascript como puede ser un onclick (vease el ejemplo).

Es muy importante para que funcione mi función ajax tienes que pulsar sobre el botón +K y darme Karma, que no se te olvide o dará errores extraños xD

Si os fijaís creo un random dentro de la función para evitar la caché de algunos navegadores que pasan de los headers nochache, mi función originalmente soporta dos parámetros, pero puedes añadir los que necesites, o enviar sólo uno y parsearlo luego.

El uso de la función sería la siguiente:

onclick= " ajax ( NOMBRE DE LA FUNCIÓN , EL ID DEL TAG DONDE QUEREMOS REIBIR EL HTML , PARÁMETRO 1 , PARÁMETRO 2 ) ; "
ajax('funcion1' , 'elspan' , '20' , '30' );

En el ejemplo de html puro que he hecho sería:

onclick= " ajax ( EL ID DEL TAG DONDE QUEREMOS REIBIR EL HTML ,NOMBRE DEL ARCHIVO ) ; "
ajax( 'elspan' , 'ajax1.htm');

En el archivo php recibo las 3 variables y dependiendo de la función envio un html u otro. En el ejemplo he puesto 2 funciones para ver como se recibe por separado.

Si os fijaís pongo:
if(navigator.appName == "Microsoft Internet Explorer")
esto es porque el antiguo Internet Explorer no soportaba XMLHttpRequest nativamente y lo llevaba como un ActiveX, poderís borrar la comprobación pero entonces no funcionará con versiones del internet explorer de hace 10 años, parece triste, pero aún hay gente que lo usa :( .

Esta es la función base que he creado, modificando el nombre del archivo al que llamas por ajax puedes variar la petición para coincidir con la extensión del lenguaje que uses:
nombre_del_archivo.extension



<script type="text/javascript"><!--

function ajax(funcion,div,parametro1,parametro2) {
var http = false; if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); }
rannum = Math.random()*50000; http.open("GET", "/nombre_del_archivo.extension?f="+funcion+"&p1="+parametro1+"&p2="+parametro2+"&rnd="+rannum, true);
http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById(div).innerHTML = http.responseText; } }
http.send(null); }

//--></</script>


Ejemplo en PHP

Archivo 1:
Nombre: prueba.htm



<script type="text/javascript"><!--

function ajax(funcion,div,parametro1,parametro2) {
var http = false; if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); }
rannum = Math.random()*50000; http.open("GET", "/ajax.php?f="+funcion+"&p1="+parametro1+"&p2="+parametro2+"&rnd="+rannum, true);
http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById(div).innerHTML = http.responseText; } }
http.send(null); }

//--></</script>

<b><span id="elspan">Aquí meteré el resultado de Ajax</span></b>

<br><br>

<span onclick="ajax('funcion1' , 'elspan' , '20' , '30' );">Hazme Click</span>
<br><br>

<span onclick="ajax('funcion2' , 'elspan' , '100' , '200' );">Hazme Click</span>


Archivo 2 escrito en PHP:
Nombre : ajax.php




$funcion = $_REQUEST["f"];
$parametro1 = $_REQUEST["p1"];
$parametro2 = $_REQUEST["p2"];

if ($funcion == 'funcion1') {

echo "Has hecho click en funcion 1, los valores que has pasado son: ";
echo $parametro1;
echo " - ";
echo $parametro2;

}

if ($funcion == 'funcion2') {

echo "Has hecho click en funcion 2, los valores que has pasado son: ";
echo $parametro1;
echo " - ";
echo $parametro2;

}



Ejemplo en VB.NET

Archivo 1:
Nombre: prueba.htm



<script type="text/javascript"><!--

function ajax(funcion,div,parametro1,parametro2) {
var http = false; if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); }
rannum = Math.random()*50000; http.open("GET", "/ajax.aspx?f="+funcion+"&p1="+parametro1+"&p2="+parametro2+"&rnd="+rannum, true);
http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById(div).innerHTML = http.responseText; } }
http.send(null); }

//--></</script>

<b><span id="elspan">Aquí meteré el resultado de Ajax</span></b>

<br><br>

<span onclick="ajax('funcion1' , 'elspan' , '20' , '30' );">Hazme Click</span>
<br><br>

<span onclick="ajax('funcion2' , 'elspan' , '100' , '200' );">Hazme Click</span>


Archivo 2:
Nombre : ajax.aspx


<%

Dim Funcion$ = Request("f")
Dim Parametro1$ = Request("p1")
Dim Parametro2$ = Request("p2")

if Funcion = "funcion1" then

Response.Write("Has hecho click en funcion 1, los valores que has pasado son:")
Response.Write(Parametro1 & " - " & Parametro2)

End if

if Funcion = "funcion2" then

Response.Write("Has hecho click en funcion 1, los valores que has pasado son:")
Response.Write(Parametro1 & " - " & Parametro2)

End if

%>


Ejemplo en C#

Archivo 1:
Nombre: prueba.htm



<script type="text/javascript"><!--

function ajax(funcion,div,parametro1,parametro2) {
var http = false; if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); }
rannum = Math.random()*50000; http.open("GET", "/ajax.aspx?f="+funcion+"&p1="+parametro1+"&p2="+parametro2+"&rnd="+rannum, true);
http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById(div).innerHTML = http.responseText; } }
http.send(null); }

//--></</script>

<b><span id="elspan">Aquí meteré el resultado de Ajax</span></b>

<br><br>

<span onclick="ajax('funcion1' , 'elspan' , '20' , '30' );">Hazme Click</span>
<br><br>

<span onclick="ajax('funcion2' , 'elspan' , '100' , '200' );">Hazme Click</span>


Archivo 2:
Nombre : ajax.aspx


<%@ Page Language="C#" %>
<%

String Funcion = Request("f");
String Parametro1 = Request("p1");
String Parametro2 = Request("p2");

if (Funcion == "funcion1") {

Response.Write("Has hecho click en funcion 1, los valores que has pasado son:");
Response.Write(Parametro1 + " - " + Parametro2);

}

if (Funcion == "funcion2" ) {

Response.Write("Has hecho click en funcion 1, los valores que has pasado son:");
Response.Write(Parametro1 + " - " + Parametro2);

}

%>


Ejemplo en C++

Archivo 1:
Nombre: prueba.htm



<script type="text/javascript"><!--

function ajax(funcion,div,parametro1,parametro2) {
var http = false; if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); }
rannum = Math.random()*50000; http.open("GET", "/ajax.cgi?f="+funcion+"&p1="+parametro1+"&p2="+parametro2+"&rnd="+rannum, true);
http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById(div).innerHTML = http.responseText; } }
http.send(null); }

//--></</script>

<b><span id="elspan">Aquí meteré el resultado de Ajax</span></b>

<br><br>

<span onclick="ajax('funcion1' , 'elspan' , '20' , '30' );">Hazme Click</span>
<br><br>

<span onclick="ajax('funcion2' , 'elspan' , '100' , '200' );">Hazme Click</span>


Archivo 2:
Nombre : ajax.cgi



#include <stdio.h>
#include <string.h>
#include <ctype.h>

int main(int argc, char *argv[]) {
printf("HTTP/1.1 200 OK\n");
printf("Content-Type: text/html\n\n");

char *funcion = RecibirVariable("f");
char *parametro1 = RecibirVariable("p1");
char *parametro2 = RecibirVariable("p2");

if (funcion == "funcion1") {

printf("Has hecho click en funcion 1, los valores que has pasado son:");
printf("%s", parametro1);
printf(" - ");
printf("%s", parametro2);

}


if (funcion == "funcion2") {

printf("Has hecho click en funcion 2, los valores que has pasado son:");
printf("%s", parametro1);
printf(" - ");
printf("%s", parametro2);

}


return 0;
}

char *RecibirVariable(char *strobj) {
if (getenv("QUERY_STRING")) {
if (strstr(getenv("QUERY_STRING"), strobj)) {
char *palabra;
boolean strtype = TRUE;
int stropt = 0;
palabra = strtok(getenv("QUERY_STRING"), "&=");
while (palabra) {
if (strtype == TRUE) {
if (strstr(palabra, strobj)) {
stropt = 1;
}
strtype = FALSE;
} else {
if (stropt == 1) {
return ("%s", palabra);
break;
}
strtype = TRUE;
}
palabra = strtok(NULL, "&=");
}
} else {
return "";
}
} else {
return "";
}
}


Ejemplo en HTML PURO

Archivo 1:
Nombre: prueba.htm



<script type="text/javascript"><!--

function ajax(div,archivo) {
var http = false; if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); }
http.open("GET", "/"+archivo, true);
http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById(div).innerHTML = http.responseText; } }
http.send(null); }

//--></</script>

<b><span id="elspan">Aquí meteré el resultado de Ajax</span></b>

<br><br>

<span onclick="ajax( 'elspan' , 'ajax1.htm');">Hazme Click</span>
<br><br>

<span onclick="ajax('elspan' ,'ajax2.htm');">Hazme Click</span>


Archivo 2:
Nombre : ajax1.htm


Hola Mundo 1


Archivo 3:
Nombre : ajax2.htm


Hola Mundo 2


Pues si amigos, así de simple es el Ajax, dejaos de ejemplos que quieren comeros la cabeza y de listillos que hacen librerías de 2 kilometros para marearos. Usad la función del Sr Jesús Rubén y no perdaís el tiempo con códigos kilométricos.

Como nota podemos usar:



Response.Cache.SetCacheability(HttpCacheability.NoCache)


En vez de el random, pero aviso que hay navegadores que pasan del nocache, yo recomiendo dejar el random en la función.


 

 





  Broco
Increíblemente fácil e llegado a ver códigos de incontables lineas para una simple función de Ajax..
Sin duda este código es el mejor con mucha diferencia.. muchos códigos me he tirado horas para aprenderlos y este.. 2 minutos o menos :) +k

 

 


  Jesús
Me alegro que te sea útil Mr Broco, la gente se complica barbaridades para usar la clase XMLHttpRequest cuando es tan sumamente simple.
 

 


  killbill07
Hey Jesus, te di +K pero no me funciona, me sale un cartelito que dice "Jesus debe donarte 100 puntos"
xP
Muy bueno, muchas gracias!

 

 


  !^^-NðSh-^^!
Ha recibido:
3 premios
Esto es excelente, justo una de las cosas que estaba buscando aprender.
Muchisimas gracias, jesusr!!

Salu2

 

 





  Skeletron
Capaz se te ha ido un poco la mano tio.
Hoy en dia existen librerías que te simplifican mucho todo.
Seguro conoces jQuery (jquery.com).
jQuery te brinda la funcion $.get() para realizar ajax por GET y $.post() para realizar ajax por POST.

Se usaría así:



$.get(
   'URL',
   function(respuesta){
      $('#idDelElementoAColocarLaRespuesta').html(respuesta);
   }
);


Y eso es todo.

 

 


  Jesús
Claro Noel, puedes usar muchas librerías ya hechas de alto nivel, como el updatepanel de asp.net o JQuery, yo lo que pretendía con este artículo es enseñar como funcionaba a bajo nivel el Ajax para que consuma lo mínimo.
 

 


  Broco
Yo prefiero usar funciones "Caseras", siempre serán mucho más veloces y flexibles.
De hecho yo uso la función ajax de surfear.net que es una versión superior a esta e incluso le he añadido un par de opciones...
Para gustos, colores, pero a nivel personal no me gusta usar Jquery.

 

 


  Martin
Muy interesante tu artículo.
Sería posible trabajar con POO utilizando la misma arquitectura que nos muestras en tu artículo ?
Es decir colocar una clase en el archivo ajax.aspx escrita en C# y crear un objeto en ese mismo archivo para devolver un dato por ajax hacia prueba.htm..
Un ejemplo muy simple:
1.- La clase Persona con el campo Nombre y un costructor
2.- Crear el objeto Persona1 (en el mismo archivo) pasando el nombre que recibimos desde prueba.htm
3.- Devolver ese mismo nombre a través de Ajax.

La idea es poder utilizar ajax con C# como si fuera PHP

Muy agradecido
Martín


 

 





    ¿Cuantas columnas?     | 2 columnas | 3 columnas | 4 columnas | 5 columnas | 6 columnas |  
    Escribe la dirección web de la imagen:
  Publica tu respuesta  |  Haz Click en el siguiente cuadro para escribir