QUE ES AJAX

El termino AJAX, Asynchronous JavaScript and XML, hace referencia a una combinación de tecnologías y estándares que consiste en la solicitud asíncrona de datos al servidor desde una página web y la utilización de estos para actualizar una parte de la misma, sin obligar al navegador a realizar una recarga completa de toda la página.

TECNOLOGÍAS AJAX

Las tecnologías que nos permiten trabajar con AJAX son:

XHTML y CSS; son los dos estándares definidos por el W3C para la construcción de páginas
JavaScript; permite realizar solicitudes al servidor desde la página Web, recuperar los datos enviados en la respuesta y modificar el aspecto de la
XML; para el envío de datos de forma
DOM; permite organiza los elementos de la página de forma jerárquica.
El objeto XMLHttpRequest; Es el componente esencial en

EL OBJETO XMLHTTPREQUEST

Se trata del componente fundamental de una aplicación AJAX. A través de sus propiedades y métodos es posible lanzar peticiones en modo asíncrono al servidor y acceder a la cadena de texto enviada en la respuesta.

Para poderlo utilizar, deberá ser previamente instanciado desde la aplicación.

MODELO SINCRONO

Como se puede apreciar en el siguiente diagrama, en el modelo síncrono o bien interactúa el usuario con la página o se llevan a cabo procesos en el lado del servidor.

Cuando interactúa el usuario o cliente, el servidor permanece inactivo. Sin embargo cuando se ejecutan los procesos en el servidor, la actividad del lado del cliente se detiene esperando recibir la respuesta a su petición.

MODELO ASINCRONO

Con el modelo asíncrono no existen periodos de inactividad del lado del cliente. Si la página emite una petición, esta será enviada al servidor para su procesamiento pero el cliente puede seguir interactuando en la página.

Una vez que el servidor envíe la respuesta, se actualizará parte de la pagina y el usuario verá reflejado el cambio.

Implementación

function inicia_ajax() {
  //Utiliza un método distinto según el navegador
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
}

function inicia_ajax() {

//Utiliza un método distinto según el navegador

if (window.XMLHttpRequest) {

return new XMLHttpRequest();

}

else if (window.ActiveXObject) {

return new ActiveXObject("Microsoft.XMLHTTP");

}

Envio y recepción de datos

Con texto simple

//Recibe 2 parámetros, los datos que se enviarán al servidor
//y el id del div donde se imprimirá el resultado
function consulta_ajax(datos, div) {
  //Obtenemos el objeto XMLHttpRequest
  var objeto_ajax = inicia_ajax();
  //Petición al servidor por GET, al archivo datos_en el servidor
  //Se envían los datos y por último "true" indica que la conexión será asíncrona
  objeto_ajax.open("GET", "Servidor?datos=" + datos, true);
  //Al recibir respuesta se ejecuta la función anónima
  objeto_ajax.onreadystatechange = function () {
    //Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto
    if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) {
      //Se recoge el resultado con responseText
      var datos_devueltos = objeto_ajax.responseText;
      //Llamamos a la función que imprimirá el resultado en el div
      imprime_resultado(datos_devueltos, div);
    }
  }
  objeto_ajax.send(null);
}

//Recibe 2 parámetros, los datos que se enviarán al servidor

//y el id del div donde se imprimirá el resultado

function consulta_ajax(datos, div) {

//Obtenemos el objeto XMLHttpRequest

var objeto_ajax = inicia_ajax();

//Petición al servidor por GET, al archivo datos_en el servidor

//Se envían los datos y por último "true" indica que la conexión será asíncrona

objeto_ajax.open("GET", "Servidor?datos=" + datos, true);

//Al recibir respuesta se ejecuta la función anónima

objeto_ajax.onreadystatechange = function () {

//Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto

if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) {

//Se recoge el resultado con responseText

var datos_devueltos = objeto_ajax.responseText;

//Llamamos a la función que imprimirá el resultado en el div

imprime_resultado(datos_devueltos, div);

}

objeto_ajax.send(null);

}

Con XML

//Recibe 2 parámetros, los datos que se enviarán al servidor 
//y el id del div donde se imprimirá el resultado 
function consulta_ajax(datos, div) { 
  //Obtenemos el objeto XMLHttpRequest 
  var objeto_ajax = inicia_ajax(); 
  //Petición al servidor por GET, al archivo datos_cServidor
  //Se envían los datos y por último "true" indica que la conexión será asíncrona 
  objeto_ajax.open("GET", "Servidor?datos=" + datos, true); 
  //Al recibir respuesta se ejecuta la función anónima 
  objeto_ajax.onreadystatechange = function () { 
    //Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto 
    if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) { 
      //Se recoge el resultado con responseXML
      var datos_xml= objeto_ajax.responseXML; 
      //Llamamos a la función que imprimirá el resultado en el div 
      imprime_resultado(datos_xml, div); 
    } 
  } 
  objeto_ajax.send(null);

//Recibe 2 parámetros, los datos que se enviarán al servidor

//y el id del div donde se imprimirá el resultado

function consulta_ajax(datos, div) {

//Obtenemos el objeto XMLHttpRequest

var objeto_ajax = inicia_ajax();

//Petición al servidor por GET, al archivo datos_cServidor

//Se envían los datos y por último "true" indica que la conexión será asíncrona

objeto_ajax.open("GET", "Servidor?datos=" + datos, true);

//Al recibir respuesta se ejecuta la función anónima

objeto_ajax.onreadystatechange = function () {

//Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto

if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) {

//Se recoge el resultado con responseXML

var datos_xml= objeto_ajax.responseXML;

//Llamamos a la función que imprimirá el resultado en el div

imprime_resultado(datos_xml, div);

}

objeto_ajax.send(null);

Para extraer los datos del XML devuelto usaremos javascript.

<span class="com">//Recibe los datos y el id del div donde se va a imprimir </span>
<span class="kwd">function</span><span class="pln"> imprime_resultado</span><span class="pun">(</span><span class="pln">datos_xml</span><span class="pun">,</span><span class="pln"> div</span><span class="pun">)</span> <span class="pun">{</span> 
  <span class="com">//Guardamos el elemento raíz del documento</span>
  <span class="kwd">var</span><span class="pln"> registro </span><span class="pun">=</span><span class="pln"> datos_xml</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">"registro"</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">];</span>
  <span class="com">//Guardamos el primer cliente</span>
  <span class="kwd">var</span><span class="pln"> codigo </span><span class="pun">=</span><span class="pln"> registro</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">"cliente"</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">];</span>
  <span class="com">//Guardamos el contenido de la primera etiqueta codigo</span>
  <span class="kwd">var</span><span class="pln"> codigo </span><span class="pun">=</span><span class="pln"> cliente</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">"codigo"</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">childNodes</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">nodeValue</span><span class="pun">;</span>
  <span class="kwd">var</span><span class="pln"> nombre </span><span class="pun">=</span><span class="pln"> cliente</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">"nombre"</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">childNodes</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">nodeValue</span><span class="pun">;</span>
  <span class="kwd">var</span><span class="pln"> telefono </span><span class="pun">=</span><span class="pln"> cliente</span><span class="pun">.</span><span class="pln">getElementsByTagName</span><span class="pun">(</span><span class="str">"telefono"</span><span class="pun">)[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">childNodes</span><span class="pun">[</span><span class="lit">0</span><span class="pun">].</span><span class="pln">nodeValue</span><span class="pun">;</span>
  <span class="com">//Por último imprimimos el resultado en el div</span><span class="pln">
  document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="pln">div</span><span class="pun">).</span><span class="pln">innerHTML </span><span class="pun">=</span> <span class="str">"Código: "</span> <span class="pun">+</span><span class="pln"> codigo </span><span class="pun">+</span> <span class="str">", Nombre: "</span> <span class="pun">+</span><span class="pln"> nombre </span><span class="pun">+</span> <span class="str">", Teléfono: "</span> <span class="pun">+</span><span class="pln"> telefono</span><span class="pun">;</span>
<span class="pun">}</span>

//Recibe los datos y el id del div donde se va a imprimir

function imprime_resultado(datos_xml, div) {

//Guardamos el elemento raíz del documento

var registro = datos_xml.getElementsByTagName("registro")[0];

//Guardamos el primer cliente

var codigo = registro.getElementsByTagName("cliente")[0];

//Guardamos el contenido de la primera etiqueta codigo

var codigo = cliente.getElementsByTagName("codigo")[0].childNodes[0].nodeValue;

var nombre = cliente.getElementsByTagName("nombre")[0].childNodes[0].nodeValue;

var telefono = cliente.getElementsByTagName("telefono")[0].childNodes[0].nodeValue;

//Por último imprimimos el resultado en el div

document.getElementById(div).innerHTML = "Código: " + codigo + ", Nombre: " + nombre + ", Teléfono: " + telefono;

}

Con JSON

/Recibe 2 parámetros, los datos que se enviarán al servidor 
//y el id del div donde se imprimirá el resultado 
function consulta_ajax(datos, div) { 
  //Obtenemos el objeto XMLHttpRequest 
  var objeto_ajax = inicia_ajax(); 
  //Petición al servidor por GET, al archivo datos_clientes.php 
  //Se envían los datos y por último "true" indica que la conexión será asíncrona 
  objeto_ajax.open("GET", "datos_clientes.php?datos=" + datos, true); 
  //Al recibir respuesta se ejecuta la función anónima 
  objeto_ajax.onreadystatechange = function () { 
    //Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto 
    if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) { 
      //Se recoge el resultado con responseText
      var datos_json= objeto_ajax.responseText; 
      //Llamamos a la función que imprimirá el resultado en el div 
      imprime_resultado(datos_json, div); 
    } 
  } 
  objeto_ajax.send(null); 
}

/Recibe 2 parámetros, los datos que se enviarán al servidor

//y el id del div donde se imprimirá el resultado

function consulta_ajax(datos, div) {

//Obtenemos el objeto XMLHttpRequest

var objeto_ajax = inicia_ajax();

//Petición al servidor por GET, al archivo datos_clientes.php

//Se envían los datos y por último "true" indica que la conexión será asíncrona

objeto_ajax.open("GET", "datos_clientes.php?datos=" + datos, true);

//Al recibir respuesta se ejecuta la función anónima

objeto_ajax.onreadystatechange = function () {

//Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto

if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) {

//Se recoge el resultado con responseText

var datos_json= objeto_ajax.responseText;

//Llamamos a la función que imprimirá el resultado en el div

imprime_resultado(datos_json, div);

}

objeto_ajax.send(null);

}

Para leerlo en Cliente

//Recibe los datos y el id del div donde se va a imprimir 
function imprime_resultado(datos_json, div) { 
  //Ejecutamos la función para convertir el archivo Json en un objeto JavaScript
  var datos = JSON.parse(datos_json);
  //Guardamos el codigo
  var codigo = datos[0].codigo;
  var nombre = datos[0].nombre;
  var nombre = datos[0].telefono;
  //Por último imprimimos el resultado en el div
  document.getElementById(div).innerHTML = "Código: " + codigo + ", Nombre: " + nombre + ", Teléfono: " + telefono;
}

//Recibe los datos y el id del div donde se va a imprimir

function imprime_resultado(datos_json, div) {

//Ejecutamos la función para convertir el archivo Json en un objeto JavaScript

var datos = JSON.parse(datos_json);

//Guardamos el codigo

var codigo = datos[0].codigo;

var nombre = datos[0].nombre;

var nombre = datos[0].telefono;

//Por último imprimimos el resultado en el div

document.getElementById(div).innerHTML = "Código: " + codigo + ", Nombre: " + nombre + ", Teléfono: " + telefono;

}