Buscar Más buscado

Tutorial de AJAX (Asynchronous JavaScript + XML) - Nuestro primer tope con AJAX

7 - Nuestro primer tope con AJAX

[editar]
Tutorial creado por Mononeurona. Extraido de: http://www.mononeurona.org/index.php?idp=547
27 de Octubre de 2005
< anterior | 1 ... 5 6 7 8 9 10 11 ... 15 | siguiente >
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

  1. PHP [inicio]
  2. <script language="javascript"  type="text/javascript">
  3. funcion encargada de crear el objeto
  4. function objetus() {
  5. try {
  6. objetus = new ActiveXObject("Msxml2.XMLHTTP");
  7. } catch (e) {
  8. try {
  9. objetus= new ActiveXObject("Microsoft.XMLHTTP");
  10. } catch (E) {
  11. objetus= false;
  12. }
  13. }
  14. if (!objetus && typeof XMLHttpRequest!='undefined') {
  15. objetus = new XMLHttpRequest();
  16. }
  17. return objetus
  18. }
  19. la funcion que hará el trabajo sucio
  20. esta funcion es la que llamamos en el evento ONCLICK de nuestro boton
  21. function primer_tope()
  22. {
  24. creamos el objeto
  25. _objetus=objetus()
  26. cargamos una varible con las variables que vamos a enviar
  27. _values_send="funcion=pt"
  28. _URL_="proceso.php?"
  29. _objetus.open("GET",_URL_+"&"+_values_send,true);
  30. una vez enviado los valores inmediatamente llamamos a la propiedad
  31. onreadystatechange
  32. _objetus.onreadystatechange=function() {
  33. dentro de la funcion comprobamos el estado del proceso
  34. si es 4 (terminado) pedimos lo que nos han mandado
  35. if (_objetus.readyState
    4)
  36. {
  37. usamos la propiedad responseText para recibir en una cadena
  38. lo que nos mandaron
  39. window.alert(_objetus.responseText);
  40. }
  41. }
  42. obligatorio .... luego explicarè el porque
  43. _objetus.send(null);
  44. }
  45. </script>
  46. <input type="button" name="visual" value="Pedir datos" class="boton" onclick="primer_tope();">
  49. <!-- mas documento HTML -->

  1. PHP [fin]

  2. Nuestro procesador trabajará segun la variable funcion que reciba por el método GET
  3. PHP [inicio]
  4. <?php
  5. if(isset($_GET['funcion']))
  6. {
  7. $_valor=$_GET['funcion'];
  8. if($_valor "pt")
  9. {
  10. $_pt="Tu ip: ".htmlspecialchars($_SERVER['REMOTE_ADDR'])."\n";
  11. $_pt.="request_uri: ".htmlspecialchars($_SERVER['REQUEST_URI'])."\n";
  12. $_pt.="date(): ".htmlspecialchars(date("d-m-Y : H-i-s"))."\n";
  13. echo $_pt;
  14. }
  16. else
  17. {
  18. echo "No enviaste ningun valor ACEPTABLE";
  19. }
  20. }
  21. else
  22. {
  23. echo "No se a enviado valor alguno de peticion";
  24. }
  25. ?>

  1. 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.readyState
    4)
            {
    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.
[editar]
< anterior | 1 ... 5 6 7 8 9 10 11 ... 15 | siguiente >

Opinar
54 opiniones

Tutorial de AJAX

5-5
fdmfbd

hushdg
voy a probarlo

nose pq nadie opina
er

er
asdfas

sdfg
1 2 3 4 5 6 7 ... 11 | siguiente >

Tutoriales relacionados con 'Tutorial de AJAX (Asynchronous JavaScript + XML)'

Tutorial de AJAX (Asynchronous JavaScript + XML)
Entiendase que AJAX no se refiere a usar el objeto XMLHttpRequest de manera indispensable porque... Más »

Anuncios Google

Autor y licencia de 'Tutorial de AJAX (Asynchronous JavaScript + XML)'


Tutorial de Mononeurona. Extraido de: http://www.mononeurona.org/index.php?idp=547 CopyLeft
Este trabajo está licenciado bajo la Creative Commons License. 1999-2005 © :: MonoNeurona.org ::
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.