Función AJAX con xmlhttp a consciencia

Teniendo la función Ajax explicada en:

http://dudasweb.blogspot.com/2009/05/prueba_29.html

Vamos a ver la función y sus diversas características que ara meter los datos en nuestra web.

El ejemplo de esa función ya vista en la otra entrada fue:

function seccion(){
var capa=document.getElementById("contenido");
var ajax=nuevoAjax();
ajax.open("GET", "principal.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(null);
ajax.onreadystatechange=
function() {
if (ajax.readyState==4) {
capa.innerHTML=ajax.responseText;
}else{
capa.innerHTML="Cargando...";
}
}
}

Primeramente podemos ver:

var capa=document.getElementById("contenido");

El cual será el div , spam etc.. donde se coloquen los datos recogidos por AJAX

La siguiente línea que puede ser alterada es:

ajax.open("POST", "principal.html", true);

donde principal.html es el archivo con los datos que se pondrán en este caso en el div con id='contenido' , se pondrá 'GET' cuando no se le pasen valores a 'principal.php' y 'POST' cuando se le pasen valores.

Los valores si los tiene los pasará en la siguiente línea, solo se puede pasar un valor, si desea enviar más deberá concatenarlos, y luego al recibirlos en 'principal.php desconcatenarlos.

En este caso no se le pasan valores como podeis ver:

ajax.send(null);

Para pasarles valores por ejemplo sería asi, donde se le pasa lo que hay en la variable 'id' y se recogerá en 'principal.php' con el nombre de 'id' por ejemplo asi: $id=$_POST['id'];

ajax.send("id="+id);

Por último los datos de 'principal.php' se pondrán en 'contenido':

capa.innerHTML=ajax.responseText;

Error: No me salen los acentos utilizando AJAX

Para que te salgan los acentos lo que se debe hacer es poner la línea siguiente arriba del todo del fichero con los datos que se van a poner con AJAX, sin que haya nada antes de ella en el fichero:

<?header("Content-Type: text/html; charset=iso-8859-1");?>

AJAX con xmlhttp

Una de las formas de utilizar AJAX es con xmlhttp que sirve para realizar peticiones http o https.

AJAX sirve para pintar en tu web sin tener que hacer la petición al servidor, de esta forma te ira más rapida la web.

La explicación sencilla de que es lo que hace AJAX es simplemente poner datos en una determinada parte de la web sin recargarla.

Para ello el boton, link etc... que quieres que sea para que al pincharle cambie la parte deseada de tu web llamara a la función AJAX, la cual ara la petición para meter los datos dichos en la función en la parte de tu web que le has dicho.

Vamos a verlo que seguro que lo entendereis mejor

Primeramente debeis tener la función AJAX de xmlhttp la cual es esta y no se debe modificar:

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;
}

Ahora necesitamos 3 objetos:

1. El lugar de la web donde se pondran los datos pedidos por AJAX.
2. La función que ara que se pongan en el.
3. El link, boton etc... que llamara a la función anteriormente.

1. Por ejemplo en un div o un span etc...
<div id="contenido"></div>
2. En esta función hace que el contenido del archivo "principal.html" se pone en el elemento "contenido". Aquí se explicará todo su contenido y diversas formas de formarla:
http://dudasweb.blogspot.com/2009/06/funcion-ajax-con-xmlhttp-consciencia.html
function seccion(){
var capa=document.getElementById("contenido");
var ajax=nuevoAjax();
ajax.open("GET", "principal.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(null);
ajax.onreadystatechange=
function() {
if (ajax.readyState==4) {
capa.innerHTML=ajax.responseText;
}else{
capa.innerHTML="Cargando...";
}
}
}

3. Por ejemplo en un boton, span,link etc...
<span onclick="seccion()">Meter datos nuevos</span></