En esta parte del tutorial utilizaremos la tecnología ajax a través del objeto XMLHttpRequest para realizar peticiones al servidor a través de los métodos GET y POST.
AJAX = Asynchronous JavaScript and XML
AJAX es una tecnología que permite intercambiar datos con un servidor y actualizar partes de una web sin tener que recargar la página.
Los dos archivos de ejemplo del capítulo son los siguientes ...
index.php
<!DOCTYPE HTML>
<html>
<head>
<script>
function ajax(id, file, method, params, loading)
{
if (loading === undefined)
{
loading = function(){return "";}
}
if (window.XMLHttpRequest)
{
var ajax = new XMLHttpRequest();
}
else
{
var ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.onreadystatechange = function()
{
document.getElementById(id).innerHTML = loading();
//Si la petición se ha llevado a cabo correctamente
if (ajax.readyState == 4 && ajax.status == 200)
{
document.getElementById(id).innerHTML = ajax.responseText;
}
}
//Comprobamos el tipo de método seleccionado GET o POST
if (method == "GET" || method == "get")
{
file = file + "?" + params;
ajax.open(method, file, true);
ajax.send();
}
else
{
ajax.open(method, file, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(params);
}
}
window.onload = function()
{
var params = "campo1=hola&campo2=mundo";
ajax("contenedor", "ajax.php", "POST", params, function(){return "Cargando ..."});
}
</script>
</head>
<body>
<div id="contenedor"></div>
</body>
</html>
ajax.php
<?php
if (isset($_POST["campo1"]) && isset($_POST["campo2"]))
{
$campo1 = $_POST["campo1"];
$campo2 = $_POST["campo2"];
echo "Campo1=$campo1&Campo2=$campo2";
}
No hay comentarios:
Publicar un comentario