Articles

Migración de SVN a GIT – En 6 Pasos

In GIT, Migración, Subversion, SVN on 16/04/2014 by Esteban Olate

Hay varias ventajas y facilidades que nos ofrece GIT sobre SVN, las que nos llevan a tomar la decisión de usar esta magnifica herramienta. Pero que hacemos con todo el proyecto que llevamos sub versionando en nuestro repositorio de SVN. Aquí les dejo una mini guía en tan sólo 6 pasos para una migración correcta de SVN a GIT.

Primero necesitaremos un programa de java, desarrollado por Atlassian, que nos ayudará con la migración lo puedes descargar en el siguiente link svn-migration-script

Nota: Está guía esta orientada a sistemas operativos basados en Unix (Linux o Mac OS).

Paso 1: Crear unidad de migración sensible a mayúsculas y minúsculas

java -jar ~/svn-migration-scripts.jar create-disk-image 1 <nombre_migración>

Ejemplo:

java -jar ~/svn-migration-scripts.jar create-disk-image 1 MigracionSVN

Paso 2: Ir a la unidad de migración creada

cd ~/<nombre-migración>

Ejemplo:

cd ~/MigracionSVN

Paso 3: Obtener lista de autores del Repo SVN

java -jar ~/svn-migration-scripts.jar authors <url> <usuario> <contraseña> > authors.txt

Ejemplo:

java -jar ~/svn-migration-scripts.jar authors http://servidor.svn.com/repo_svn/ eolate 123456 > authors.txt

 

Paso 4: Reemplazar autores correctamente en el archivo authors.txt

Ejemplo:

Línea archivo original Línea archivo modificado
eolate = eolate <rmarin@mycompany.com> eolate = Esteban Olate <estebanolateb@gmail.com>

Paso 5: Migrar repo

git svn clone –trunk=/ –authors-file=authors.txt <url> <git_repo_name>

Ejemplo:

git svn clone –trunk=/ –authors-file=authors.txt http://servidor.svn.com/repo_svn/ ProyectoGit

 

Nota: este ejemplo usa solo la opción –trunk porque no se tomaran en cuenta las branch ni los tags. Para especificar ruta de ramas usar “–branches=” y para los tags usar “–tags=”.

Paso 6: Subir repo a git

cd <git_repo_name>

git remote add origin <git_url = .git>

git push -u origin master

Ejemplo:

cd ProyectoGit

git remote add origin git@github.com:eolate/proyecto_git.git

git push -u origin master

 

Espero les sirva Esteban Olate

 

Articles

Web Service de Java con Eclipse Indigo,Apache Tomcat 7 y Apache Axis2

In Apache Axis2, Apache Tomcat, Java on 21/12/2011 by Esteban Olate Etiquetado: , ,

Un Web Service es una parte del software puesta como un servicio, publicado en un servidor web, el cual puede ser accedido y utilizado por otros mediante protocolos basados en estándares como WSDL, SOAP, XML, etc. A continuación les mostrare como crear un WS en Java, crearemos un WS básico y lo publicaremos en un servidor Tomcat 7 implementando el uso de Apache Axis2.

Para este ejemplo utilizamos Eclipse Tomcat 7 y Axis2, si no tienen estos servidores pueden ver como agregarlos en los siguientes enlaces:

– Configurando Apache Tomcat 7 en Eclipse Indigo
– Configurando Apache Axis2 en Eclipse Indigo

Ahora procederemos con el ejemplo:

1.- En Eclipse ir a «File >> New >> Dinamic Web Project», se abrirá un cuadro donde deberemos indicar el nombre del proyecto en este caso se llamará «Prueba», deberemos especificar el «Dynamic web module version» en 2.5, que funciona con Axis2, luego en «Configuration» aparece un botón llamado «Modify…» al presionarlo se abrirá un cuadro donde se especifican las facetas (Módulos que utilizará nuestro proyecto), por defecto se encuentran seleccionadas las opciones «Dinamic Web Module» y «Java», deberemos seleccionar la etiqueta que dice «Axis2 Web Services», la que nos cargará los módulos de soporte para Axis2, finalmente damos click en «Finish».

2.- Sobre el nuevo proyecto crearemos una nueva clase llamada «Hola.java» dentro de un «Package» llamado «src»

la clase debe contener el siguiente código (algo sencillo solo para probar…):

3.- Sobre la clase Hola click derecho luego «Web Service >> Create Web Service», se abrirá un cuadro en el cual lo único que debemos modificar es el «Web service runtime» para esto, clickear sobre el enlace lo que nos abrirá un cuadro en donde podremos cambiar el «Web service runtime», que por defecto se encuentra en «Apache Axis», debemos dejarlo en «Apache Axis2». Luego presionar en «Next» y dejar las opciones por defecto presionar nuevamente en «Next» y nuestro servidor debería esta detenido presionamos en «Start Server» y finalizamos («Finish»).

4.- Para ver el WSDL de nuestro Web Service podemos ingresar en «localhost:8080/WSPrueba», lo que nos abrirá una interfaz web, generada por Axis2, de nuestro servicio, el WDSL se encuentra en, para este caso, «Service >> Hola», la URL es «http://localhost:8080/WSPrueba/services/Hola?wsdl».

Con esto ya tienen publicado un Web Service de java en Tomcat 7, utilizando como motor de WS Apache Axis2.


Esteban Olate

Articles

Configurando Apache Axis2 en Eclipse Indigo

In Apache Axis2, Servidores on 19/12/2011 by Esteban Olate Etiquetado:

Apache Axis2 es un motor para el uso de Web Services que provee de un soporte extenso de estándares tales como SOAP, WSDL, WS-*, etc. Axis2 no solo permite agregar interfaces de Web Services a aplicaciones Web, también puede ser utilizado como servidor de aplicaciones independiente. A continuación los pasos a seguir para la integración de Axis2 en Eclipse Indigo:

1.-  Debemos obtener Axis2, el cual lo podemos encontrar en el siguiente enlace. Lo descargamos y dejamos en algún lugar de nuestro sistema (Por ejemplo en la raíz de nuestro sistema Windows «c:\» o en Linux en algún directorio como «/opt/»)

2.- En Eclipse ir al menú «Window >> Preference», se abrirá un cuadro de las características de nuestro Eclipse, en el lado izquierdo se encuentran todos los componentes que podemos modificar y en el lado derecho las opciones que podemos cambiar. Nosotros buscaremos Axis2, que se encuentra «Web Services >> Axis2 Prederences»

3.- Deberemos presionar en «Browse…» y buscar la ubicación de Axis2 para este caso se encuentra en «/opt/axis2-1.6.1/», cuando carguemos Axis2 correctamente recibiremos un mensaje que nos dirá «Axis2 runtime loaded successfully».

Con esto ya tenemos configurado correctamente Apache Axis2 en nuestro entorno de desarrollo Eclipse.


Esteban Olate

Articles

Configurando Apache Tomcat 7 en Eclipse Indigo

In Apache Tomcat, Servidores on 19/12/2011 by Esteban Olate Etiquetado:

Tomcat es un servidor Web escrito en Java que soporta el uso de Servlets y JSPs. Básicamente nos provee de un soporte para aplicaciones J2EE. A continuación los pasos a seguir para integrar este servidor a nuestro entorno de desarrollo Eclipse, más específicamente la versión Indigo de este.

Si no tiene Eclipse puede descargarlo desde este enlace, solo tiene que descargarlo y descomprimirlo para usarlo. Una vez instalado Eclipse debe descargar Tomcat, en este caso utilizaremos Tomcat 7. Descargarlo, descomprimirlo y colocarlo en algún lugar de nuestro sistema (Ejemplo en la raíz de nuestro sistema, en la carpeta archivos de programas o para Linux en la carpeta personal, etc…), esta ubicación será utilizada para luego agregar Tomcat en Eclipse. A continuación los pasos a seguir para agregar correctamente el servidor Tomcat a nuestro Eclipse:

1.- En Eclipse ir al menu «Window >> Show View >> Servers», lo que nos abrirá la pestaña de los servidores de eclipse

2.- Luego ir a la pestaña «Servers» y hacer click derecho para agregar un servidor, ir a «New >> Server»

3.- Se abrirá un cuadro donde deberemos escoger el tipo de servidor, nuestro tipo es «Apache >> Tomcat v7.0 Server»

, lo seleccionamos y click en «Next»

4.- A continuación se abrirá un cuadro donde debemos especificar la ubicación del Apache Tomcat en este caso se encuentra en «/opt/apache-tomcat-7.0.23», presionamos el botón «Browse» y buscamos la ubicación, una vez seleccionada presionamos en «Finish»

Y con esto ya tenemos agregado Apache Tomcat 7 para realizar pruebas en nuestro entorno de desarrollo Eclipse.


Esteban Olate

Articles

Uso de mysqli en PHP

In PHP on 13/12/2011 by Esteban Olate Etiquetado: , ,

Cuando se construye una web utilizando PHP y MySQL a menudo suele ocuparse la librería mysql, cuando existe mysqli, la extensión mejorada MySQL que posee PHP. A continuación un ejemplo de cómo implementar la clase mysqli en PHP.

El primer paso es crear la conexión con la base de datos, para esto necesitaremos conocer los datos de nuestro servidor (servidor, usuario, contraseña, nombre de la base de datos):

conexion.php:

<?php
    //Función que nos retornara una conexión con mysqli
    function crearConexion(){
        //Datos para la conexión con el servidor
        $servidor   = «localhost»;
        $nombreBD   = «prueba»;
        $usuario    = «root»;
        $contrasena = «»;
        //Creando la conexión, nuevo objeto mysqli
        $conexion = new mysqli($servidor,$usuario,$contrasena,$nombreBD);
        //Si sucede algún error la función muere e imprimir el error
        if($conexion->connect_error){
            die(«Error en la conexion : «.$conexion->connect_errno.
                                      «-«.$conexion->connect_error);
        }
        //Si nada sucede retornamos la conexión
        return $conexion;
    }
?>

 

El siguiente paso es ocupar este objeto y realizar una consulta, a continuación mostrare como ejecutar una consulta de selección y una consulta de inserción, favor tomar en cuenta la siguiente estructura de tabla:

Estructura de tabla:

Campo Tipo
idUsuario int
nombre varchar(50)

 

consultaInsert.php:

<?php
    //Incluimos el archivo de conexión
    include («conexion»);
    function consultaInsert($idUsuario,$nombre){
        //Comenzamos con un ‘try’, por si algo falla(BD, conexión, etc)
        try{
            //Abrimos una conexión con el servidor
            $conexion = crearConexion();
            //Declaramos nuestra consulta
            $sql = «INSERT INTO usuario VALUES (?,?)»;
            //Preparamos la consulta
            $sentencia = $conexion->prepare($sql);
            /* Le damos los parámetros (símbolos ‘?’),
             * pueden ser de tipo ‘i’ = integer
             *                    ‘d’ = double
             *                    ‘s’ = string
             *                    ‘b’ = BLOB
             */
            $sentencia->bind_param(«is»,$idUsuario,$nombre);
            //Ejecutamos la consulta, si resulta exitosa el método execute()
            //retornará true
            if($sentencia->execute()){
                //Cerramos la conexión y la sentencia
                $conexion->close();
                $sentencia->close();
                //Retornamos true, consulta satisfactoria
                return true;
            }
            //Sino surgió algún error y retornamos una cadena de error.
            else{
                $conexion->close();
                $sentencia->close();
                return «Error en la insercion.»;
            }
            //Si surge alguna excepción la capturamos e imprimimos,
            //retornamos false
        }catch(Exception $e){
            echo $e;
            $conexion->close();
            $sentencia->close();
            return false;
        }
    }
?>

 

consultaSelect.php:

<?php
    //Incluimos el archivo de conexión
    include («conexion»);
    function consultaSelect($idUsuario){
        try{
            $conexion = crearConexion();
            $sql = «SELECT nombre FROM usuario WHERE idUsuario = ?»;
            $sentencia = $conexion->prepare($sql);
            $sentencia->bind_param(«i»,$idUsuario);
            $sentencia->execute();
            /* A diferencia de lo anterior ahora con el método bind_result(),
             * es necesario declarar tantas varibles como datos que se piden
             * para este ejemplo es solo uno, obtenemos el dato que nos retorna
             * la consulta, si viene más de uno será necesario recorrer la
             * $sentencia en un ciclo hasta que el método feth() retorne false.
             */
            $sentencia->bind_result($nombre);
            //Preguntamos si retorno algo, método feth()
            if($sentencia->fetch()){
                $conexion->close();
                $sentencia->close();
                //Retornamos ese algo, referenciando la variable de bind_result()
                return $nombre;
            }else{
                $conexion->close();
                $sentencia->close();
                return «No encontrado»;
            }
        }catch(Exception $e){
            echo $e;
            $conexion->close();
            $sentencia->close();
            return false;
        }
    }
?>

 

Para ejecutar las funciones bastaría con incluir los archivos PHP (consultaInsert.php o consultaSelect.php) y llamar a las funciones respectivamente, los métodos y atributos de mysqli son muy extensos aquí solo he visto los más básicos para consultas sencillas, espero haber explicado bien su funcionamiento.


Esteban Olate

Articles

Expresiones regulares en JavaScript

In JavaScript on 09/12/2011 by Esteban Olate Etiquetado: ,

Las expresiones regulares son un mecanismo bastante potente con el cual se pueden manipular cadenas de caracteres, se pueden realizar búsquedas por patrón y reemplazos de cadena, consiste en establecer un patrón (Ejemplo: solo letras, solo números, palabra en específica, etc…) el cual luego se podrá utilizar ya sea para reemplazar una cadena o buscar el patrón dentro de la misma. Las expresiones regulares en JavaScript se basan en las de Perl, por lo que son muy parecidas. JavaScript provee dos formas de crear una expresión regular, a través de un objeto, el objeto RegExp, y a través de una sintaxis especialmente pensada para ello (Crear un String con el siguiente formato: «/<patrón>/».). A continuación una lista de los caracteres, los más usados, que pueden constituir una expresión regular en JavaScript:

Comodines Significado Ejemplo
 \ Marca de carácter especial /\.com/; Busca la cadena «.com».
 ^ Comienzo de una línea /^a/; Cadenas que comienzan con ‘a’.
 $ Final de una línea /a$/; Cadenas que terminen con ‘a’.
 . Cualquier carácter
(menos salto de línea)
/^….$/; Cadenas de 4 caracteres.
| Indica opciones /^a|^1/; Cadenas que comiencen con ‘a’ o con ‘1’.
() Agrupar caracteres /(abc123)/; Busca la cadena ‘abc123’;
[] Conjunto de caracteres
opcionales.
 /[a-z]/; Busca una letra de la ‘a’ a la ‘z’.
Modificadores Significado Ejemplo
* Repetir 0 o más veces /1*234/; Buscaría: «234»,»1234″,»11234″,etc.
+ Repetir 1 o más veces /1+234/; Buscaría: «1234»,»11234″,»111234″,etc.
? 1 o 0 veces /h?ola/; Buscaría: «hola»,»ola».
{n} Exactamente n veces /1{2}234/; Buscaría: «11234»;
{n,} Al menos n veces /1{2,}234/; Buscaría: «11234»,»111234″,»1111234″,etc.
{n,m} Entre n y m veces /1{2,3}234/; Buscaría: «11234»,»111234″.
Especiales Significado Ejemplo
\d Un dígito. /\d/; Busca un dígito del ‘0’ al ‘9’.
\D Alfabético. /\D/; Busca cualquier caracter que no sea un número.
\w Cualquier alfanumérico,
equivalente a [a-zA-Z0-9_ ]
/\w/; Busca un caracter alfanumérico incluyendo el ‘_’.
\W Opuesto a \w /\W/; Busca cualquier caracter que no sea alfanumérico ni ‘_’.
\s Carácter tipo espacio /12\s34/; Buscaría «12 34».
\S Opuesto a \s /12\S34/; Buscaría «1234».
Flags Significado Modo de uso
 g Explora la cadena completa Las Flags se utilizan al final del patrón después de cerrarlo con ‘/’, Ejemplos de uso:»/[a-z]/i»; Buscaría una letra mayúscula o minúscula. Ejemplo:
«Hola»,»hola»,»HOLA»,etc…»/[a-z]*/ix»; Buscaría letras mayúsculas o minúsculas ignorando los espacios en la cadena. Ejemplo:
«Ho la», «ho la», «HO LA»,etc…
 i No distinguir entre
mayúsculas y minúsculas
 m Permite usar varios ^ y $
en el patrón
 s Incluye el salto de linea
en el comodín ‘.’
 x Ignora los espacios
en el patrón

Ahora aquí les dejo unas expresiones regulares y la forma de validar y reemplazar cadenas con JavaScript:

/* Funcion que reemplaza (borra) los espacios en blanco del inicio
 * y final de una cadena. Ejemplo de uso:
 *    la cadena »  hola  » al usar la función trim(»  hola  «);
 *     resultaría «hola».
 */
function trim(cadena){
    var expresionRegular = /^\s+|\s+$/g;
    return cadena.replace(expresionRegular, «»);
}
/* Función que valida si la cadena contiene solo números.
 *  Ejemplo de uso:
 *   Al usar validaSoloNumerico(«1234») : retorna True.
 *   Al usar validaSoloNumerico(«a123») : retorna False.
 */
function validaSoloNumerico(cadena){
    var patron = /^\d*$/;
    if(!cadena.search(patron))
      return true;
    else
      return false;
}
/* Función que valida si la cadena contiene solo números.
 *  Ejemplo de uso:
 *   Al usar validaSoloTexto(«abcd») : retorna True.
 *   Al usar validaSoloTexto(«1abc») : retorna False.
 */
function validaSoloTexto(cadena){
  var patron = /^[a-zA-Z]*$/;
  // En caso de querer validar cadenas con espacios usar: /^[a-zA-Z\s]*$/
  if(!cadena.search(patron))
    return true;
  else
    return false;
}
/* Función que valida si el correo es tiene un formato valido.
 *  Ejemplo de uso:
 *   Al usar validaCorreoElectronico(«aa@aa.cl») : retorna True.
 *   Al usar validaCorreoElectronico(«aa@@aa.cl») : retorna False.
 *   Al usar validaCorreoElectronico(«@aa.cl») : retorna False.
 *   Al usar validaCorreoElectronico(«aa@.cl») : retorna False.
 *   Al usar validaCorreoElectronico(«aa@cl») : retorna False.
 *   Al usar validaCorreoElectronico(«aa@aa») : retorna False.
 *   etc…
 */
function validaCorreoElectronico(correoElectronico){
    var patron = /^([a-z]+[a-z1-9._-]*)@{1}([a-z1-9\.]{2,})\.([a-z]{2,3})$/;
    if(!correoElectronico.search(patron))
      return true;
    else
      return false;
}

Espero les sirva esta pequeña guía.


Esteban Olate

Articles

Manejo de nodos DOM con JavaScript

In JavaScript on 06/12/2011 by Esteban Olate Etiquetado: , , ,

Gracias a DOM se logran generar páginas Web más dinámicas y de mayor complejidad. Consiste en un conjunto de utilidades que nos permite manipular nuestra página como si fuera un árbol de nodos, donde cada nodo representa a una etiqueta XHTML de nuestra página. Los lenguajes de programación (Como Java, PHP,JavaScript,etc…) permiten manipular estos nodos, es decir, crearlos, modificarlos y eliminarlos. A continuación veremos cómo implementar el uso de nodos DOM en JavaScript.

JavaScript proporciona un objeto, que hace referencia a nuestra página web actual, llamado «document», el cual posee una serie de atributos y métodos que podemos utilizar simplemente escribiendo «document.<nombreMetodo o nombreAtributo>». Para el manejo de nodos DOM JavaScript proporciona una serie de métodos y atributos de los cuales los más usados son los siguientes:

document.getElementById(<id>); Retorna nodo según su id, si no encuentra retorna «undefined».
document.createElement(<tag>); Crea un nodo de tipo elemento según el tag ingresado.
document.createTextNode(<texto>); Crea un nodo de tipo texto con el texto ingresado.
<nodo>.hasChild(); Retorna «true» si el nodo tiene nodo/s hijos, de lo contrario retorna «false».
<nodo>.parentNode(); Retorna el nodo padre del nodo actual.
<nodo>.appendChild(<nodo>); Agrega un nodo hijo al nodo actual.
<nodo>.removeChild(<nodo>); Elimina el nodo recibido por parametro del nodo actual.
<nodo>.removeAttribute(<atributo>); Elimina el atributo ingresado del nodo actual.
<nodo>.setAttribute(<atributo>,<valor>); Asigna atributo al nodo actual.
<nodo>.childNodes; Retorna arreglo con todos los nodos hijos del nodo actual.

Ahora un ejemplo que utiliza algunos de estos métodos, para el cual usaremos dos archivos:

funcionesEjemplo.js:

function crearDiv(){
  //Obtenemos el nodo que hace referencia al elemento ‘body’
  var nodoDestino = document.body;
  //Creamos un elemento div
  var div = document.createElement(«div«);
  //Asignamos un id y le damos algo de estilo css para visualizarlo mejor
  div.setAttribute(«id»,»divPrueba»);
  div.setAttribute(«style»,»background-color:#ccc; height:50px; width:300px;»);
  //Agregamos el elemento creado al ‘body’
  nodoDestino.appendChild(div);
}
function agregaTexto(texto){
  //Obtenemos el nodo anteriormente creado
  var div = document.getElementById(«divPrueba»);
  //Consultamos si la búsqueda retorno undefined
  if(div == undefined)
    alert(«No has creado el div…»);
  else
    //Creamos un nodo de texto y lo agregamos al div
    div.appendChild(document.createTextNode(texto));
}
function cambiarColorLetra(){
  var div = document.getElementById(«divPrueba»);
  if(div == undefined)
    alert(«No has creado el div…»);
  else
    //Modificamos el estilo para cambiar el color de letra
    div.setAttribute(«style»,»background-color:#ccc; height:50px; width:300px; color:green;»);
}
function eliminarNodo(idNodo){
  //Buscamos el nodo y verficamos su retorno
  var nodo = document.getElementById(idNodo);
  if(nodo == undefined)
    alert(«No has creado el div…»);
  else{
    //Obtenemos el nodo padre
    var padre = nodo.parentNode;
    //Removemos el nodo desde el nodo padre
    padre.removeChild(nodo);
  }
}

index.html:

<html>
  <head>
    <title>Manejo nodos DOM con JavaScript</title>
    <!– Incorporamos nuestro script –>
    <script language=»javascript» src=»funcionesEjemplo.js»></script>
  </head>
  <body>
    <input type=»button» value=»Crear div» onclick=»crearDiv();»>
    <input type=»button» value=»Agregar texto» onclick=»agregaTexto(‘Texto de prueba’);»>
    <input type=»button» value=»Cambiar color letra» onclick=»cambiarColorLetra();»>
    <input type=»button» value=»Eliminar div» onclick=»eliminarNodo(‘divPrueba’);»>
  </body>
</html>

Espero haber sido claro y que les ayude…


Esteban Olate

Articles

Hola mundo AJAX (usando metodos POST y GET)

In JavaScript on 05/12/2011 by Esteban Olate Etiquetado: , ,

Anteriormente les mostraba cómo crear un objeto de AJAX válido para diferentes navegadores. Ahora veremos la implementación con dos ejemplos básicos. Para realizar esto debemos contar con los siguientes tres archivos.

scriptAJAX.js:

function crearAjax(){
   var objetoAjax=false;
   if(navigator.appName=="Microsoft Internet Explorer")
     objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
   else
     objetoAjax = new XMLHttpRequest();
   return(objetoAjax);
}
function llamadaAJAX(metodo){
  //Creamos nuestro objeto
  var ajax=crearAjax();
  //Preguntamos si es válido
  if(ajax){
    //Preguntamos si el método es POST
    if(metodo == "post"){
      //Llamada al archivo mediante POST
      ajax.open("POST","archivo.php");
      //Se cambian las cabeceras de nuestro objeto AJAX para poder enviar datos
      ajax.setRequestHeader("Content-Type",
                            "application/x-www-form-urlencoded");
      /* Enviamos datos, si se quiere agregar más se debe colocar el símbolo ‘&’
        al comienzo de cada nuevo dato */
      ajax.send("valor='post'");
    }
    //Preguntamos si el método es GET
    if(metodo == "get"){
      /*  Llamada al archivo mediante GET, en esta ocasión los datos son
          enviados atraves de la URL, por lo que ya no es necesario cambiar
          cabeceras ni enviar nada en el método ‘send()’ */
      ajax.open("GET","archivo.php?valor=get");
      ajax.send(null);
    }
    /* Con esta función controlamos los estados de nuestro objeto AJAX,
       pueden ser estados 1,2,3,4,200,etc..  */
    ajax.onreadystatechange = function(){
      //Preguntamos si nuestro objeto se encuentra en el estado 4 (Cargado)
      if(ajax.readyState==4){
        // Dejamos la respuesta en una variable, de tipo nodo texto (DOM)
        var respuesta = document.createTextNode(ajax.responseText);
        //Obtenemos una referencia al div respuesta
        var div = document.getElementById("resultado");
        //Agregamos el nodo de texto al div
        div.appendChild(respuesta);
      }
    }
  }
}

index.html:

<html>
  <head>
    <title>Hola mundo AJAX!</title>
    <!– Incorporamos el script a nuestra página –>
    <script type="text/javascript" language="javascript" src="scriptAJAX.js"></script>
  </head>
  <body>
    <input type="button" value="Llamada GET" onclick="llamadaAjax('get');" />
    <br />
    <input type="button" value="LLamada POST" onclick="llamadaAjax('post');" />
    <br />
    <div id="resultado" name="resultado"></div>
  </body>
</html>

archivo.php:

<?php
  // Preguntamos si llego una variable llamada ‘valor’ mediante POST
  if(isset($_POST["valor"])){
    // Enviamos mensaje para POST
    echo "Hola mundo! por POST";
  }
  // Preguntamos si llego una variable llamada ‘valor’ mediante GET
  if(isset($_GET["valor"])){
    // Enviamos mensaje GET
    echo "Hola mundo! por GET";
  }
?>

Espero haya quedado claro cómo utilizar los métodos POST y GET con AJAX.


Esteban Olate

Articles

Creando objeto AJAX

In JavaScript on 04/12/2011 by Esteban Olate Etiquetado: ,

La integración de AJAX ha logrado que nuestros sitios Web sean más agiles a la hora de desplegar información o manipular acciones sin esas molestas recargas. Ahora les mostrare como crear con AJAX con una pequeña función JavaScript válida para la variedad de navegadores más usados, quiero decir para iExplorer y todos los demás…

Código:


function crearAjax(){
  /* Declarando variable a retornar con nuestro objeto, retornaremos "false"
   * en caso de algún error
   */
  var objetoAjax=false;
  //Preguntando si nuestro querido usuario aún usa Internet Explorer
  if(navigator.appName=="Microsoft Internet Explorer")
    objetoAjax = new ActiveXObject("Microsoft.XMLHTTP");
  //De lo contrario está usando otro navegador, por supuesto uno mejor
  else
    objetoAjax = new XMLHttpRequest();
  //Retornamos nuestro objeto
  return(objetoAjax);
}

Esta función es válida para las últimas versiones de iExplorer (8,9) y para navegadores como Firefox, Opera, Chrome, y similares.


Esteban Olate