Qu es Ajax?

Ventajas y desventajas
XMLHttpRequest :
Propiedades
Mtodos
Ajax de jQuery
$.Ajax
Otros mtodos de utilizacin de Ajax
Ajax (Asynchronous JavaScript And XML) no es un lenguaje de programacin;
se basa en lenguajes ya existentes como JavaScript, es un conjunto de
mtodos y tcnicas que permiten intercambiar datos entre el cliente y el
servidor de una manera mas rpida y sin necesidad de que la pagina tenga
que ser recargada completamente. Eso hace posible que mientras ests
pidiendo una informacin puedas seguir navegando por la pgina. Ajax se
pens principalmente para transferir datos en formato XML, pero
actualmente Ajax permite el intercambio de datos en mltiples formatos
como: XML, JSON, EBML, texto plano, HTML, etc.
 No es necesario recargar y volver a cargar la pgina completa, lo
que hace que todo sea mas rpido.
El usuario no se da cuenta de que haya demoras porque puede
seguir trabajando mientras las comunicaciones son en segundo
plano.
Todo se puede hacer en una sola pgina que va cambiando gracias
a Ajax y a la informacin recibida del servidor.
 El usuario pierde la capacidad de hacer cosas que con webs
normales podra, como son usar los botones de avance y retroceso
del navegador o poder poner la pgina en favoritos.
Puede llegar a ser mas difcil el desarrollo de aplicaciones webs: el
escribir y depurar el cdigo se vuelve algo mas complicado y
depurar errores puede llegar a ser muy difcil.
Existen problemas y restricciones de seguridad. Hay que tener en
cuenta que no todos los procesos se pueden realizar en el lado del
cliente.
La indexacin para los motores de bsqueda se ve dificultada: no
es lo mismo un contenido constante que es fcilmente rastreable
para un buscador, que un contenido cambiante en funcin de la
ejecucin de JavaScript.
XMLHttpRequest: es un objeto de programacin. Todas las
aplicaciones realizadas con tcnicas de Ajax deben instanciar en
primer lugar este objeto, que es el que permite la comunicacin con
el servidor en segundo plano. Aunque solo he dicho este objeto para
iniciar la conversacin con el servidor en realidad existen dos
maneras distintas de implementar el objeto, y dependiendo de el
navegador que se use hay que poner una o otra.
if (window.XMLHttpRequest){
//para navegadores nuevos
peticion = new XMLHttpRequest();
}
else {
//para versiones de navegadores antiguos
peticion = new ActiveXObject("Microsoft.XMLHTTP");
}
Las propiedades de Ajax son las herramientas necesarias para hacer
las operaciones y comprobaciones necesarias para las
comunicaciones en segundo plano con el servidor.
Esta propiedad almacena el estado de la peticin en un valor numrico.
Los valores definidos son los siguientes:
0: No inicializado (el objeto ha sido creado pero no ha sido invocado con
el mtodo open).
1: Cargando (el objeto est creado pero no ha sido invocado el mtodo
send).
2:Cargado (el servidor no ha respondido an).
3:Interactivo(se han recibido algunos datos, aunque no es posible
emplear la propiedad responseText).
4:Completo(se han recibido todos los datos del servidor).
Es el cdigo de estado HTTP devuelto por el servidor.
200:Ok(Significa que todo esta correcto).
400:Bad Request(El servidor no entiende la peticin porque no ha sido
creada de forma correcta).
401:Unauthorized(El recurso solicitado requiere autorizacin previa).
403:Forbidden(No se puede acceder al recurso solicitado por falta de
permisos).
404:Not Found(El recurso solicitado no se encuentra en la url indicada).
500:Internal Server Error(Se ha producido algn error en el servidor)
//Esto comprobara si est completa la peticin que hemos hecho
if (peticion.readyState==4) {
//Esto comprueba si la peticin se ha hecho correctamente
if (peticion.status==200) {
document.write(peticion.responseText);
};
};
Es el cdigo de estado HTTP devuelto por el servidor en forma de
cadena de texto.

if (peticion.readyState==4) {
if (peticion.status==200) {
//Esto imprimira el estado del servidor en forma de cadena de texto
alert(La respuesta del servidor es+peticion.statusText)
};
};
Esta propiedad contiene la respuesta del servidor en forma de cadena
de texto.

if (peticion.readyState==4) {
if (peticion.status==200) {
//Esto imprimira la cadena de texto obtenida por el servidor
alert(La respuesta del servidor es+peticion.responseText)
};
};
 La respuesta del servidor en formato XML. El objeto que devuelve se
puede procesar como un objeto DOM.
<?php
header(Content-type): text/xml)
echo <?xml versin=1.0?><mensaje>esto es</mensaje>; ?>

if (peticion.readyState==4) {
if (peticion.status==200) {
var xml= peticion.responseXML;
var mensaje= xml.getElementsByTagName(mensaje)[0];
var texto=mensaje.childnodes[0].modeValue;
alert(La respuesta del servidor es+texto);
};
};
Esto hace que una funcin se ejecute cada vez que cambia el valor de
readyState(el valor del estado de la peticin).

function realizarPeticion (url, metodo, funcion) {

peticion.onreadystatechange=funcion;

peticion.open(metodo, url, true);

peticion.send(null);

}
Los principales mtodos son:
Open()
Send()
Abort()
GetAllResponseHeaders()
GetResponseHeader()
SetRequestHeader()
 Open():Establece los parmetros de la peticin que se realiza al
servidor. Los parmetros necesarios son el mtodo HTTP y la URL
del destino y acepta otros tres parmetros de forma opcional.
open(string mtodo,string url,[boolean asncrono,string usuario,string password]);

Send():Realiza la peticin HTTP al servidor. El mtodo send

necesita un parmetro que indica la informacin que va a enviar
junto con la peticin HTTP. Si no se envan datos adicionales hay
que poner null.
send(Null);
function realizarPeticion (url, metodo, funcion) {

peticion.onreadystatechange=funcion;

peticion.open(metodo, url, true);

peticion.send(null);
}
 GetResponseHeader(): Devuelve una cadena con el contenido de la
cadena solicitada.
GetResponseHeader(Content-Type);

GetResponseHeaders():Devuelve una cadena de texto con todas

las cabeceras de la respuesta del servidor
alert(peticion.getResponseHeader(Content-type))

var cabeceras=peticion.getResponseHeaders;
alert(cabeceras);
Permite establecer cabeceras personalizadas en la peticion HTTP. Es
necesario cuando envas parmetros mediante el mtodo post.
setRequestHeader(cabecera,valor)
function realizarPeticion (url, metodo, funcion) {

peticion.onreadystatechange=funcion;

peticion.open(metodo, url, true);

peticion.setRequestHeader(Content-Type,application/x-www-form-
urlencoded);
peticion.send(query_string);

}
Se usa para cancelar la peticin que has hecho al servidor.

function cancelar() {

peticion.abort();

}
Usando lo aprendido probad a hacer un ejercicio simple de Ajax que
consiste en sacar la informacin de un documento de texto e
imprimirla en la pagina.
var nombre=rafa;

$.Ajax(
{
url:usuarios.php,
type:POST,
data:nombre
})
.done(function(data){
$(#respuesta).html(data);
})
.fail(function(data){
alert(error);
})
.always(function(data){
alert(completo);
})
function verificar () {
var usu=$('#nombre').val();
var con=$('#pass').val();
$.get("usuarios.php?nombre="+usu+"&pass="+con),function(data)
$("#resultado").html(data);
};
}
$(document).ajaxStart(function{
$(resultado).html(funciona)
});

$(#boton).clickt(function{
$(resultado).load(algo.html)
});