Tutorial de AJAX (Asynchronous JavaScript + XML) - Nuestro primer tope con AJAX
Tutorial creado por Mononeurona. Extraido de: http://www.mononeurona.org/index.php?idp=547
27 de Octubre de 2005
JavaScript, XML
7 - Nuestro primer tope con AJAX
Como primer ejemplo no haremos el típico HOLA MUNDO enviaremos una petición a nuestro procesador que nos arrojará nuestro IP,REQUEST_URI,date() usando el método GET.
Ejemplo 1
cliente
Ejemplo 1
cliente
- PHP [inicio]
- <script language="javascript" type="text/javascript">
- funcion encargada de crear el objeto
- function objetus() {
- try {
- objetus = new ActiveXObject("Msxml2.XMLHTTP");
- } catch (e) {
- try {
- objetus= new ActiveXObject("Microsoft.XMLHTTP");
- } catch (E) {
- objetus= false;
- }
- }
- if (!objetus && typeof XMLHttpRequest!='undefined') {
- objetus = new XMLHttpRequest();
- }
- return objetus
- }
- la funcion que hará el trabajo sucio
- esta funcion es la que llamamos en el evento ONCLICK de nuestro boton
- function primer_tope()
- {
- creamos el objeto
- _objetus=objetus()
- cargamos una varible con las variables que vamos a enviar
- _values_send="funcion=pt"
- _URL_="proceso.php?"
- _objetus.open("GET",_URL_+"&"+_values_send,true);
- una vez enviado los valores inmediatamente llamamos a la propiedad
- onreadystatechange
- _objetus.onreadystatechange=function() {
- dentro de la funcion comprobamos el estado del proceso
- si es 4 (terminado) pedimos lo que nos han mandado
- if (_objetus.readyState
4)
- {
- usamos la propiedad responseText para recibir en una cadena
- lo que nos mandaron
- window.alert(_objetus.responseText);
- }
- }
- obligatorio .... luego explicarè el porque
- _objetus.send(null);
- }
- </script>
- <input type="button" name="visual" value="Pedir datos" class="boton" onclick="primer_tope();">
- <!-- mas documento HTML -->
- PHP [fin]
-
Nuestro procesador trabajará segun la variable funcion que reciba por el método GET
- PHP [inicio]
- <?php
- if(isset($_GET['funcion']))
- {
- $_valor=$_GET['funcion'];
- if($_valor "pt")
- {
- $_pt="Tu ip: ".htmlspecialchars($_SERVER['REMOTE_ADDR'])."\n";
- $_pt.="request_uri: ".htmlspecialchars($_SERVER['REQUEST_URI'])."\n";
- $_pt.="date(): ".htmlspecialchars(date("d-m-Y : H-i-s"))."\n";
- echo $_pt;
- }
- else
- {
- echo "No enviaste ningun valor ACEPTABLE";
- }
- }
- else
- {
- echo "No se a enviado valor alguno de peticion";
- }
- ?>
- PHP [fin]
-
-
- Analizando la funcion primer_tope()
Fuera de lo que es la funcion objetus() analizaremos nuestra funcion que se encargo del envío y recepcion de datos.
_objetus=objetus()
Invocamos al objeto XMLHttpRequest
_values_send="funcion=pt"
Cargamos todas las variables que se van a enviar
_URL_="proceso.php?"
La URL donde nos comunicaremos (Nótese el ? al final del archivo)
_objetus.open("GET",_URL_+"&"+_values_send,true);
La parte más importante, aqui abrimos la URL con los valores cargados osea proceso.php?funcion=pt
_objetus.onreadystatechange=function() {
Invocamos la propiedad onreadystatechange, entonces cuando el objeto llegue a este punto se llamará a una funcion que gestionará el resto del proceso.
if (_objetus.readyState4)
{
Llamamos ahora a la propiedad readyState que nos indicará en que estado se encuentra el proceso, entonces cuando el estado sea 4 (Terminado) hacemos LO QUE SE NOS OCURRA.
if(_objetus.status 200)
{
Si el estado del proceso arroja un status 200 significa que a terminado con éxito.
window.alert(_objetus.responseText);
En este caso llamamos a la propiedad responseText que tiene lo que el procesador soltó y lo mostramos mediante un alert.
}
}
}
_objetus.send(null);
}
Y por ultimo enviamos null porque hemos enviado todas las variables que nos interasaban automáticamente al abrir
proceso.php?funcion=pt
_objetus.send(null) : Es obligatorio, si no se envia algo el proceso no funciona.
Valora este capítulo:
Autor y licencia de 'Tutorial de AJAX (Asynchronous JavaScript + XML) - Nuestro primer tope con AJAX'
|
Opiniona sobre 'Tutorial de AJAX (Asynchronous JavaScript + XML) - Nuestro primer tope con AJAX' (41)
Tu nombre debe tener tres caracteres como mínimo.
Es necesario que te des de alta con una cuenta de correo válida.
Es necesario que te des de alta con una cuenta de correo válida.
El contenido del título de tu opinión debe tener tres caracteres como mínimo.
Es obligatorio que selecciones una valoración del recurso.
El contenido del comentario de tu opinión debe tener tres caracteres como mínimo.
Opina sobre este tutorial |
Wikis relacionados con 'Tutorial de AJAX (Asynchronous JavaScript + XML) - Nuestro primer tope con AJAX'
Amplio tutorial de Java para empezar a trabajar y ampliar conocimientos de este lenguaje.
En este artículo se explica una sencilla manera para poder escuchar música en formato mp3...
Más »
Este tutorial presenta los conceptos básicos de líneas de transmisión (Transmission lines), así como una...
Más »
PHP se ha convertido en el lenguaje de facto de Internet y no es difícil...
Más »
Si tuviera que buscar un adjetivo para calificar a Sendmail, pensaría en "excesivo". Excesivo puesto...
Más »
