miércoles, 3 de septiembre de 2014

Tutorial Javascript parte 29 - AJAX get y post




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