Manual de Ajax Usando El Metodo Post

Manual de Ajax
usando el método
POST
Aprendiendo lo básico de ajax con el
método post
Ajax y El método POST
Por Ajaxman
31/07/2007
Manual de Ajax usando el método POST 2007
Ahora revisaremos como poder utilizar el método “post” con ajax.
Creamos como siempre la pagina que es donde realizaremos las peticiones via
javascript, a otro archivo.
Pagina_dinamica_post.html
_________________________________________________________________
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Metodo post con ajax</title>
<script language=”JavaScript” type=”text/javascript”>
/*<![CDATA[*/
function _Ajax()
{
}
/*]]>*/
</script>
</head>
<body>
<form action=”javascript:_Ajax();” method=”get”>
<input name=”nombre” id=”nombre” type=”text”/>
<input type=”button” name=”aceptar” value=”Aceptar” onclick=”_Ajax();”/>
</form>
<div id=”resultado”>
</div>
</body>
</html>
____________________________________________________________________
Ahora vamos por partes, primero necesitamos agregarle a nuestra página web,
un formulario con un action a javascript, esto es necesario porque, cuando
alguien le da enter y es el ultimo o único campo del formulario este se enviara
la pagina que este, indicada en el action, por eso si, el action es un javascript, el
formulario se enviara a la función.
No es necesario indicarle al formulario que use método POST ya que se

indicara en las funciones javacript.
Al cual, no es necesario agregarle un id, y le asignamos, un evento on click, con

el cual llamamos a una función, en este caso no es necesario agregarle
parámetros, pues no los necesita.
Recordemos que para el nombre de la función no es necesario que se llame

_ajax, se puede llamar de cualquier forma, sin embargo es mejor nombrarla, con
algún nombre que caracterice su funcionamiento.
Generamos El objeto ajax(Si tienes dudas sobre como crearlo puedes checar el
manual de Ajax con metodo GET):
if ( typeof XMLHttpRequest == “undefined” )

XMLHttpRequest = function(){
return new ActiveXObject(
navigator.userAgent.indexOf(”MSIE 5?) >= 0 ?
“Microsoft.XMLHTTP” : “Msxml2.XMLHTTP”
);
};
Luego lo instanciamos de la siguiente manera:
var ajax=new XMLHttpRequest();
Ahora creamos la función que se encargara de hacer la petición a la otra página

web:
function _Ajax()
{
var nombre=document.getElementById(’nombre’).value;
ajax.open(”POST”,”ajax_post.php”,true);
ajax.onreadystatechange=function(){
if(ajax.readyState==4)
{
var respuesta=ajax.responseText;
document.getElementById(’resultado’).innerHTML=respuesta;
}
}
ajax.setRequestHeader(”Content-Type”, “application/x-www-form-
urlencoded”);
ajax.send(”nombre=”+nombre+”&otravariable=1″);
}
Veamos los puntos importantes de la función anterior:
El nombre de la función:
ajax.open(”POST”,”ajax_post.php”,true);
En este ejemplo usaremos el método post y basta con escribirlo en el primer

argumento de nuestro método open
ajax.setRequestHeader(”Content-Type”, “application/x-www-form-
urlencoded”);
Este método nos va a permitir añadir encabezados a nuestro archivo que genere
el proceso, en este caso se le añade
el tipo de contenido usado para enviar el formulario al servidor (cuando el
valor del atributo method sea “post”). El valor por defecto de este atributo es
“application/x-www-form-urlencoded”.
ajax.send(”nombre=”+nombre+”&otravariable=1″);
En el ultimo método vemos que es por donde se envían las variables, como si
fueran por get, aunque en este caso usamos método post, si queremos usar mas
variables, simplemente las concatenamos.
En este caso enviaremos, null, ya que no es necesario enviar más datos.
Ahora creamos la página ajax_post.php
_______________________________
<?php
var_dump($_POST);
?>
_______________________________
y listo, ya tenemos nuestra segunda aplicacion con ajax.
Para los que no sepan que es var_dump, digamos que examina las variables que
uno le indique, en este caso, revisa todas las variables, quien recibió por post y
las muestra.
Puede encontrar este y otros artículos además de más información en la
Página web de www.Ajaxman.net

Manual de Ajax Usando El Metodo Post

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual de Ajax Usando El Metodo Post

Cargado por

Copyright:

Formatos disponibles

Manual de Ajax

Ajax y El método POST

Ahora revisaremos como poder utilizar el método “post” con ajax.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

No es necesario indicarle al formulario que use método POST ya que se

Al cual, no es necesario agregarle un id, y le asignamos, un evento on click, con

Recordemos que para el nombre de la función no es necesario que se llame

if ( typeof XMLHttpRequest == “undefined” )

Luego lo instanciamos de la siguiente manera:

var ajax=new XMLHttpRequest();

Ahora creamos la función que se encargara de hacer la petición a la otra página

Veamos los puntos importantes de la función anterior:

En este ejemplo usaremos el método post y basta con escribirlo en el primer

En este caso enviaremos, null, ya que no es necesario enviar más datos.

Ahora creamos la página ajax_post.php

y listo, ya tenemos nuestra segunda aplicacion con ajax.

Puede encontrar este y otros artículos además de más información en la

Página web de www.Ajaxman.net

También podría gustarte