ajax

Estándar

Temas… etc

Anuncios

5 comentarios en “ajax

  1. algo de ajax que es loq eu ami me gusta es mi tecnologia

    saludos

    17/4/07 – Ajax es una tecnología que utiliza a su vez otra combinación de tecnologías, como XML y Javascript, para realizar peticiones de contenido o computación de servidor sin tener que recargar la página en la que está el usuario. Es una tecnología que permite una nueva gama de aplicaciones interactivas en la web, mucho más ricas y rápidas, dado que no precisamos recargar todo el contenido de una página para realizar peticiones al servidor.

    Referencia: Puedes ver qué es ajax en este artículo: Qué es AJAX
    Tenemos otros artículos que explican Ajax, puedes buscarlos con nuestro directorio, en la categoría Ajax.

    Si hemos intentado alguna vez trabajar con Ajax para programar una página web, habremos comprobado que la tarea se complica bastante, teniendo que realizar diferentes trozos de código en distintos lenguajes de programación y en distintos archivos. Todo esto puede provocar dolores de cabeza o páginas con códigos difíciles de entender y de mantener. Esta cuestión sin dudas es uno de los problemas que trae Ajax a los programadores, sobretodo a los que intentan dar sus primeros pasos. Pero herramientas como xajax pueden ayudarnos bastante.

    En este artículo vamos a conocer xajax, una clase realizada con PHP que nos permite utilizar Ajax, combinado con PHP, para la creación de aplicaciones interactivas, de una manera muy simplificada. Con xajax podemos fácilmente ejecutar funciones PHP, que se ejecutan en el servidor, cuando el usuario realiza acciones en la página. Luego, los resultados de esas funciones PHP se producen en la misma página, sin que se tenga que recargarse.

    Xajax es un producto Open Source gratuito y compatible con los navegadores más comunes, como Firefox, u otros navegadores basados en Mozilla, Internet Explorer, Opera, etc.

    Podemos encontrarlo en http://xajaxproject.org

    Hacer unas primeras pruebas para comenzar a conocer la herramienta nos llevará pocos minutos. Lo veremos a continuación.

    Descargar e instalar xajax

    Para probar xajax debemos descargar la última versión de la clase, que podemos descargar directamente desde su página web: http://xajaxproject.org

    Obtendremos un archivo comprimido que debemos descomprimir en cualquier lugar de nuestro espacio de publicación. Por ejemplo, podemos crear un directorio llamado xajax donde podemos colocar todos los archivos del .zip descargado.

    No hay que hacer especiales acciones para instalar xajax, simplemente descomprimirlo en cualquier servidor Apache o IIS que tenga compatibilidad con PHP 4.3.x o PHP 5.x, o superiores.

    Una vez descargado podemos probar los ejemplos que vienen en el directorio examples, siempre a través de nuestro servidor web compatible con PHP, ya sea en local o en un servidor web remoto.

    Atención al directorio donde finalmente metemos los archivos de xajax, pues luego tendremos que incluir archivos que hay en dicho directorio, para lo cual deberemos recordar la ruta relativa desde la página donde estemos al directorio donde está xajax.

    Página simple con xajax y PHP

    Veamos ahora como realizar una página que utilice xajax, para ejecutar una sencilla función PHP como respuesta a una acción del usuario. El ejemplo es relativamente sencillo, incluso lo podemos hacer en pocos pasos, como una receta. Luego se podrá complicar todo lo necesario para realizar acciones más complejas.

    1) Incluir con PHP el archivo donde está la clase xajax

    //incluímos la clase ajax
    require (‘xajax/xajax.inc.php’);

    2) Creamos una instancia de un objeto de la clase xajax

    //instanciamos el objeto de la clase xajax
    $xajax = new xajax();

    3) Escribimos una función en PHP, que luego llamaremos con por medio de ajax

    Esta función es todo lo complicado que se requiera. Realizará acciones del lado del servidor y por tanto puede acceder a bases de datos, abrir ficheros o cualquier cosa que se nos ocurra. Luego en la propia función realizaremos una instancia de un objeto AjaxResponse, que utilizaremos para mostrar resultados en la página.

    function si_no($entrada){
    if ($entrada==”true”){
    $salida = “Marcado”;
    }else{
    $salida = “No marcado”;
    }

    //instanciamos el objeto para generar la respuesta con ajax
    $respuesta = new xajaxResponse();
    //escribimos en la capa con id=”respuesta” el texto que aparece en $salida
    $respuesta->addAssign(“respuesta”,”innerHTML”,$salida);

    //tenemos que devolver la instanciación del objeto xajaxResponse
    return $respuesta;
    }

    El objeto xajaxResponse() sirve para realizar acciones en la página sin tener que recargar el documento. Dispone de varios métodos o funciones, como por ejemplo addAssign() que sirve para asignar un valor a una propiedad de un elemento de la página. En este caso se asigna el valor contenido en la variable $salida al innerHTML de la capa “respuesta”, con lo que se altera el texto contenido en esa capa.

    4) Asociamos la función PHP al objeto xajax

    //asociamos la función creada anteriormente al objeto xajax
    $xajax->registerFunction(“si_no”);

    Esta asociación permitirá ejecutar la función PHP desde una llamada a una función Javascript.

    5) Antes de enviar cualquier contenido a la página, tenemos que ejecutar un método del objeto xajax para procesar las peticiones del que puedan llegar a la página.

    //El objeto xajax tiene que procesar cualquier petición
    $xajax->processRequests();

    Insistimos, esta llamada al método se tiene que hacer antes de escribir ningún contenido dentro del código de la página, es decir, antes que llegue al cliente ningún carácter de código HTML.

    6) Escribir el código javascript necesario para procesar las llamadas a ajax.

    //En el indicamos al objeto xajax se encargue de generar el javascript necesario
    $xajax->printJavascript(“xajax/”);

    Lo ideal es hacer esta llamada al método printJavascript() dentro del de la página.

    Si nos fijamos, el método recibe un parámetro, que es la ruta relativa para acceder al directorio donde están los archivos xajax descomprimidos.

    7) Podemos hacer llamadas a las funciones PHP en cualquier lugar del código, como respuesta a las acciones del usuario con javascript.

    Como podemos ver, desde un elemento de la página, como en este caso una casilla de verificación, al cambiar su estado, se llama a una función javascript para ejecutar la función PHP escrita anteriormente. Es decir, al pulsar el chechbox se desencadena el evento onchange y con él se llama a la función xajax_si_no() enviándo como parámetro el estado (chequeado o no) de la casilla de verificación.

    Con esto es todo tenemos todo lo necesario para entender el ejemplo. Podemos verlo en ejecución en una página aparte.

    Podemos ver el código del ejemplo completo a continuación, pero tener en cuenta que para que funcione tiene que disponer del código de la clase xajax, que en este caso debe estar en un subdirectorio que cuelgue del directorio donde está el archivo del ejemplo.

    addAssign(“respuesta”,”innerHTML”,$salida);

    //tenemos que devolver la instanciación del objeto xajaxResponse
    return $respuesta;
    }

    //asociamos la función creada anteriormente al objeto xajax
    $xajax->registerFunction(“si_no”);

    //El objeto xajax tiene que procesar cualquier petición
    $xajax->processRequests();
    ?>

    Si / No en Ajax
    <?
    //En el indicamos al objeto xajax se encargue de generar el javascript necesario
    $xajax->printJavascript(“xajax/”);
    ?>

    xajax_si_no(document.formulario.si.checked); //Llamando inicialmente a la función xajax_si_no inicializamos el valor de la capa con la respuesta

  2. la pagina orijinal de xajax

    chequela ahi pueden encontarar todo sobre ajax

    saludos aosorio
    conocer sobre ajax

    http://es.wikipedia.org/wiki/Xajax

    http://xajaxproject.org/

    mas ling

    xaJax es un framework (marco de trabajo) escrito en PHP de código abierto que permite crear fácilmente aplicaciones web que utilizan AJaX sin necesidad siquiera de conocer JavaScript (aunque sí que hay la posibilidad de hacer funciones en este lenguaje). Puedes bajarte el zip desde aquí.

    Qué permite hacer?
    En una aplicación AJaX, el servidor crea una página que es enviada al cliente. Éste interactua con la página (rellena formularios, hace clic en ciertos objetos) que disparan ciertos eventos (onclick, onchange…) que llaman a funciones JavaScript. Estas funciones pueden o no interactuar con el servidor (usando AJaX) y recibiendo información de éste, mostrándola al usuario cambiando el contenido de la misma página.

    Este tipo de páginas resultan muy útiles y son uno de los pilares de la Web 2.0. Aún así, realizar un proyecto AJaX puede resultar muy costoso y largo; pero no siempre es así.

    xaJax te permite escribir funciones en PHP que pueden ser accedidas cuando ya la página ha estado enviada al navegador, cuando el usuario ha disparado un evento o la función PHP ha sido llamada desde JavaScript. Éstas funciones PHP modifican el contenido o el aspecto de la página, como lo podría hacer JavaScript, pero repito que se hacen desde PHP, lo que abre un abanico de posibilidades: PHP puede acceder a bases de datos, al sistema de archivos… Y todo sin recargar la página!!!

    Instalación del zip
    Para instalar la librería xaJax, debes abrir el zip que te descargas de la web de xaJax y descomprimirlo conservando la estructura de las carpetas. Descomprímelo den de la carpeta donde tienes la web en servidor local o remoto y cambiale el nombre de la carpeta (normalmente el nombre xajax seguido del nombre de la versión) por solamente xajax.

    La versión 0.2 del zip consta de tres scripts PHP: xajax.inc.php, que contiene la clase xajax, xajaxResponse.inc.php, que contiene la clase xajaxResponse, y xajaxCompress.php, que es una utilidad para, de cierta manera, reducir el peso de un archivo JavaScript. Contiene también, en la carpeta xajax_js, dos archivos .js; uno que contiene el código original (el xajax_uncompressed.js) y otro que es el que está comprimido y es el que se usa para enviar al navegador (el xajax.js). Además de eso, también incorpora dos archivos .txt (la licencia y el readme) y dos carpetas más (examples, con ejemplos de utilización y tests, donde puedes probar xaJax).

    Funcionamiento
    Lo único que hay que hacer es hacer un require_once() al xajax.inc.php de la carpeta donde lo has instalado en el servidor, local o remoto, y jugar con las posibilidades que te brindan los dos objetos: xajax y xajaxResponse (éste integrado dentro de la función PHP).

    Como he dicho antes, xaJax permitirá a una función JavaScript recibir una respuesta de una función del servidor. Dicha respuesta estará en formato XML (como es habitual en AJaX) y será interpretada por la misma función JavaScript que realizará los cambios en la página que se le piden.

    Así, la respuesta (en formato XML) dará unas instrucciones específicas tales como crea una etiqueta div aquí, dale este formato y ponle este texto, elimina la etiqueta con el id tal, o haz que se ejecute esta función JavaScript.

    De cierta manera, el objeto xajaxResponse contiene la respuesta que realiza la función PHP y el objeto xajax es el que recibe las peticiones de que se ejecuten las funciones, el que las gestiona, al igual que todas las respuestas, y el que envia las respuestas en XML de vuelta al navegador.

    Por lo tanto, podemos distinguir dos partes en una página basada en xaJax: una parte sería todo el código php que contiene las funciones y los objetos xajax y xajaxResponse (además de todo el código necesario para que la web tenga un entorno dinámico) y otra parte que sería todo lo que se ejecuta en el navegador.

    Aquí tienes los tres artículos que derivan de este:

    Funciones PHP en xaJax (lado del servidor)
    El objeto xaJax (lado del servidor)
    xaJax en el lado del cliente

    sobre los que quieran enpezar a desarrollar con ajax

    http://www.desarrolloweb.com/manuales/xajax.html

  3. temas ejemplos de ajax

    Si, XAJAX es una maravilla, a ver si puedo aportar una pequeña introduccion practica:

    En PHP, la primera vez que se entra a la página, hay que crear un objeto xajax, que basicamente sirve para imprimirle todo el javascript necesario. Algo asi:

    function xajax_iniciar()
    {
    $xajax = new xajax();
    //$xajax->debugOn();
    $xajax->statusMessagesOn();
    $xajax->errorHandlerOn ();
    $xajax->setCharEncoding(‘ISO-8859-1’);
    $xajax->decodeUTF8InputOn();
    $xajax->registerFunction(‘mi_funcion_php’);
    $xajax->processRequests();
    echo ($xajax->getJavascript(RAIZ.’/lib/php/xajax/’));
    }

    Ahora, en javascript, disponemos de una funcion llamada xajax_mi_funcion_php(), y cuando la llamemos PHP ha de devolver una respuesta xajax.

    function mi_funcion_php($mensaje=””)
    {
    $RESPUESTA=new xajaxResponse();
    $RESPUESTA->setCharEncoding(‘ISO-8859-1’);
    // Ahora podemos modificar el DOM del cliente
    $RESPUESTA->addAssign(“una_div”,”innerHTML”,$mensaje);
    // O hacerle ejecutar un javascript
    $RESPUESTA->addScript(“alert(‘Respondo!’);”);
    return $RESPUESTA;
    }

    Hay mas cositas interesantes que hacerle a la respuesta, pero con esto creo que se esboza el tema.

  4. un ejemplo de ajax escrito por glo grupo linux de occidente

    ser o no ser

    Aprenda xajax en 10 Minutos
    From xajax Wik
    Usando xajax en un script PHP

    xajax esta diseñado para ser extremadamente facil de implementar tanto en aplicaciones web existentes como en nuevos proyectos. Puede añadir el poder de xajax a casi cualquier script PHP en siete sencillos pasos:

    1. Incluya la clase xajax:

    require_once(“xajax.inc.php”);

    2. Cree una instancia del objeto xajax:

    $xajax = new xajax();

    3. Registre los nombres de las funciones PHP que usted quiere llamar atraves de xajax:

    $xajax->registerFunction(“myFunction”);

    4. Escriba las funciones PHP que ha registrado y use el objeto xajaxResponse para que ellas retornen comandos XML

    function myFunction($arg)
    {

    // Inicializar el objeto xajaxResponse
    $objResponse = new xajaxResponse();
    $objResponse->addAssign(“ElementId”,”innerHTML”, $newContent);

    //return the XML response generated by the xajaxResponse object
    return $objResponse;
    }

    5.

    6. Antes de que su script envíe cualquier salida, deje que xajax se encargue de cualquier peticion

    $xajax->processRequests();

    7. Entre los tags dígale a xajax que genere el JavaScript necesario:

    printJavascript(); ?>

    8. Llame a la funcion desde un evento JavaScript o una funcion de su aplicacion:

    Eso es todo, xajax se encargará de casi todo lo demás. Su mayor tarea es escribir las funciones PHP y devolver las respuestas XML hechas por xajax para ellas, lo cual se hace extremadamente fácil con la clase. xajaxResponse

    ¿Cómo actualizo mi contenido asíncronamente?

    Quizas , la mas grande y unica funcionalidad de Xajax esta en la clase xajaxResponse. Las otras librerias Ajax requiere que usted escriba vuestra propia funcion de retorno en javascript para tratar las informaciones retornadas por una consulta asyncrona et para actualizar vuestro contenido. Por otro lado Xajax permite de bien controlar todo el contenido que proviene de php. La clase xajaxResponse permite crear instrucciones XML de vuestras funciones hechas en php y que retornan variables en la aplicacion. El XML es analizado por el motor de mensajes de ajax y las instrucciones diran a xajax como actualizar el contenido de vuestra aplicacion. La clase xajaxResponse ofrece actualmente un gran numero de comandos utiles, tales como Asign, que pone el atributo que se ha especificado en un elemento de vuestra pagina; Append, que permite de integrar el atributo especificado al final de un elemento de vuestra pagina; Prepend, que permite de agregar el atributo especificado al comienzo de un elemento de vuestra pagina; Replace, que busca y reemplaza las informaciones del atributo especificado de un elemento de vuestra pagina, Script, qui ejecuta el codigo javascript especificado y Alert que muestra una box de alerta con el mensaje especificado.

    Una sola respuesta XML puede contener multiples comandos, que seran ejecutados en el orden que han sido agregados en la respuesta, Por ejemplo, si el utilisador hace un click en un boton de vuestra aplicacion. El evento onclick llama al paquete javascript que llama a la funcion php. Este paquete envia una consulta asyncrona al servidor a traves de la funcion XMLhttpRequest donde xajax llama a la funcion php. Le funcion php hace una busqueda en la base de datos , algunas manipula los datos, o los serializa. Vous utiliseis la clase xajaxResponse para generar una respuesta XML xajax que contiene multiples comandos que seran enviados en respuesta al motor de mensajes xajax encargado de ejecutarlas.

    $objResponse = new xajaxResponse();
    $objResponse->addAssign(“myInput1″,”value”,$DataFromDatabase);
    $objResponse->addAssign(“myInput1″,”style.color”,”red”);
    $objResponse->addAppend(“myDiv1″,”innerHTML”,$DataFromDatabase2);
    $objResponse->addPrepend(“myDiv2″,”innerHTML”,$DataFromDatabase3);
    $objResponse->addReplace(“myDiv3″,”innerHTML”,”xajax”,

    xajax“);
    $objResponse->addScript(“var x = prompt(\”Enter Your Name\”);”);
    return $objResponse;

    El motor de mensajes xajax va a analizar el mensaje xML y ejecutara el mismo.

    * El valor del elemento que posee el id myInput1 va a ser asignado a las infomaciones en $DataFrombase.
    * El color del texto que posee el id myInput1 va a ser cambiado a rojo.
    * Las informaciones en $DataFromDatabase2 van ha ser agregadas al final de innerHtml del elemento con el id myDiv1
    * Las informaciones en $DataFromDatabase3 van ha ser agregadas al comienzo de innerHtml del elemento con el id myDiv2
    * Todas las coicidencias de “xajax” en el innerHtml del elemento con el id myDiv3 van ha ser remplazados por “xajax”; poniendo todas las coicidencias de la palabra “xajax” en negritas.
    * Una caja de dialogo se mostrara pidiendo al utilisador su nombre y apellido y el valor sera guardado en una variable javacript llamada x.

    Todo esto sera implementado del lado del servidor en la funcion php para la creacion y el envio a ajax de la respuesta XML.

  5. Es fundamental, durante procesos largos de carga de datos, incluir un método para informar al usuario el estado del proceso. Lo más común es un “preloader”. El método AJAX nos da la posibilidad de hacer un preloader simple. De cada uno depende darle estilo y buen gusto, y lograr un efecto profesional.

    Antes de empezar, es necesario recordar que este documento se basa en el Tutorial de AJAX (Asynchronous Javascript and XML), realizado por Sisco. Usaré el mismo ejemplo, sólo cambiaré algunos valores en el CSS y el documento de Javascript. No es necesario recordar que se requieren conocimientos previos en HTML, Javascript y CSS, pero sí es necesario que lean el tuto de Sisco antes de este.
    Conceptos

    Al realizar la petición para cargar contenidos, se invoca al evento “onreadystatechange”. Este contiene unas sentencias capaces de establecer el “estado” de la carga. Veamos las propiedades disponibles:

    * objeto.readyState: Es una propiedad de sólo lectura. No tiene valores predeterminados. Al llamar a la propiedad puede obtenerse:
    o 0: “Uninitialized”, el objeto aún no se ha inicializado.
    o 1: “Loading”, se estan cargando los datos.
    o 2: “Loaded”, se han cargado los datos.
    o 3: “Interactive”, el usuario puede interactuar con el objeto, pero aún no está cargado completamente.
    o 4: “Complete”, el objeto se ha cargado completamente.
    * objeto.responseText: Valores devueltos por el servidor, en formato de cadena de texto.
    * objeto.responseXML: Valores devueltos en formato de documento XML. Puede visualizarse mediante funciones DOM (getElementByTagName, etc).
    * objeto.status: Es un código retornado por el servidor. Es una larga lista, aquí los más usados:
    o 200: “Ok”, la página existe y se ha cargado.
    o 400: “Forbidden”, la url no existe.
    o 414: “Request-URI Too Long”, los datos enviados por GET superan los 512

    Comenzando

    Con lo anterior dado por entendido, nos disponemos a empezar. Primero, entendamos la “técnica” a utilizar: mediante propiedades y eventos, haremos un preloader simple usando CSS para colocar una imágen representativa de la carga. Disponemos de un documento con 3 divs. Un menú, el contenido y el preloader.
    El HTML

    La index tendrá el siguiente formato:

    Preloader en AJAX

    Texto 1
    Texto 2
    Aquí se cargará el contenido.
    Este es el preloader

    Como ven, están las 2 divs que mencionamos antes. En el menú se hacen links a la funcion Javascript encargada de cargar el contenido. Le enviamos la URL del archivo como un parámetro. Dentro de las estiquetas “Script”, irá el código de Javascript que mencionaré más adelante. También se puede ver la referencia al archivo CSS, que también mencionaré luego.
    El Javascript

    Nuestro script está conformado por dos funciones básicas: la primera crea el objeto XMLHttpRequest y la segunda, carga el contenido en la div correspondiente. Verán que cambiamos el estilo de la div “preloader” mediante Javascript. La idea es agregar una imagen representativa del proceso de carga, tanto al principio como al final de la misma. Para esto utilicé dos pequeños gifs, invocados durante los eventos de carga.

    Trataré de comentar aquellas cosas que considere como “nuevas” y que no hayan sido explicadas en el tutorial al cual hago referencia, aunque no creo que sea necesario.

    function NuevoAjax(){
    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;
    }

    function Cargar(url){
    var contenido, preloader;
    contenido = document.getElementById(‘contenido’);
    preloader = document.getElementById(‘preloader’);
    //creamos el objeto XMLHttpRequest
    ajax=NuevoAjax();
    //peticionamos los datos, le damos la url enviada desde el link
    ajax.open(“GET”, url,true);
    ajax.onreadystatechange=function(){
    if(ajax.readyState==1){
    preloader.innerHTML = “Cargando…”;
    //modificamos el estilo de la div, mostrando una imagen de fondo
    preloader.style.background = “url(‘loading.gif’) no-repeat”;
    }else if(ajax.readyState==4){
    if(ajax.status==200){
    //mostramos los datos dentro de la div
    contenido.innerHTML = ajax.responseText;
    preloader.innerHTML = “Cargado.”;
    preloader.style.background = “url(‘loaded.gif’) no-repeat”;
    }else if(ajax.status==404){
    preloader.innerHTML = “La página no existe”;
    }else{
    //mostramos el posible error
    preloader.innerHTML = “Error:”.ajax.status;
    }
    }
    }
    ajax.send(null);
    }

    El CSS

    Aquí no hay mucho que explicar. En todo caso, si tienes dudas, puedes postearlas en el foro o revisar los tutoriales de CSS que hay disponibles.

    body{
    background:#3366CC;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    padding:20px;
    text-align:center;
    }

    #contenido{
    border:solid 1px #999999;
    margin:10px auto;
    padding:10px;
    width:400px;
    height:400px;
    //agrega scrolls en caso de ser necesario.
    overflow:auto;
    float:left;
    }

    #menu{
    border:solid 1px #999999;
    background:#9999CC;
    margin:10px;
    padding:5px;
    width:100px;
    float:left;
    }

    #preloader{
    border:solid 1px #999999;
    margin:10px;
    width:200px;
    height:14px;
    padding:0;
    float:left;
    }

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s