Este liviano documento, te permitirá enviar peticiones al servidor y operar con la respuesta ya sea aplicando un innerHTML en algún elemento del DOM, o simplemente guardar el resultado en una variable.
La sintaxis es bastante flexible:
Código Javascript
:
Ver originalajax(url) /////////////////////////////////////// Retorna la pagina definida | «Dato requerido»
ajax(url,dato) ////////////////////////////////// Puede o no enviar datos a la pagina | null predeterminado
ajax(url,dato,metodo) /////////////////////////// Puede definir el método "POST" o "GET" | "POST" predeterminado
ajax(url,dato,metodo,async) ///////////////////// Puede definir si la consulta es asincrónica | false predeterminado
ajax(idcontenedor,url) ////////////////////////// Escribe el resultado en el elemento
ajax(idelemento,url,dato)
ajax(idelemento,url,dato,metodo)
ajax(idelemento,url,dato,metodo,async)
ajax(idelemento,url,dato,metodo,async)
De este modo si deseas trabajar en Javascript con el resultado obtenido usaras algo así:
Código Javascript
:
Ver originalvar dato = "id="+id;
var mivariable = ajax("mipagina.php",dato);
alert(mivariable);
si deseas modificar un elemento del DOM podrías usar algo así:
Código Javascript
:
Ver originalvar dato = "id="+id;
ajax("#mielemento","mipagina.php",dato);
Note la aclaración #... El signo numeral indica que es un identificador de un elemento de la pagina por tanto es necesario que tenga en cuenta la sintaxis. Con la anterior fracción de código Javascript podría usted escribir el resultado obtenido en cualquier elemnto que soporte innerHTML, por ejemplo:
fichero: ajax.js
Código Javascript
:
Ver original/*Funcion que permite Obtener un objeto XMLHttpRequest
/*para manejar la conexion(AJAX) desde JavaScript hacia el Servidor */
function ObjetoXMLHttpRequest() {
var conexionxmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
// esto en caso de que el navegador lo soporte
conexionxmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
conexionxmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return conexionxmlhttp;
}
function metodo_ajax(contenedor, url, dato, metodo, asincronico) {
//Se crea el objeto para manejar la conexion AJAX
var xmlhttp = ObjetoXMLHttpRequest();
//Funcion que va a procesar la peticion al servidor en caso de que se espere respuesta
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var respuesta = new String();
respuesta = xmlhttp.responseText;
contenedor.innerHTML = respuesta;
document.body.appendChild(contenedor);
}
};
//Apertura para el envio de la peticion
xmlhttp.open(metodo, url, asincronico);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(dato);
};
function ajax(contenedor, url, dato, metodo, asincronico) {
var respuesta = null;
var eliminar = false;
var acceso = null;
if (typeof contenedor === "undefined") {
alert("Error de sintaxis: No ha dispuesto ningun parametro");
} else {
//Preparamos las variable a utilizar
asincronico = asincronico || false;
if (contenedor[0] === "#") {
contenedor = contenedor.replace("#", "");
dato = dato || null;
metodo = metodo || "POST";
acceso = "id";
} else {
metodo = dato || "POST";
dato = url || null;
url = contenedor;
contenedor = "nk-contenedor-oculto-ajax";
eliminar = true;
}
//Controlar el contenido de las variables
if (metodo !== "POST" && metodo !== "GET") {
alert("Error de sintaxis: El metodo " + metodo + " no existe");
} else {
//En caso de no existir un contenedor creamos uno temporal, «Escogi un textarea por sus propiedad de usar tanto innerHTML como value
if (contenedor === "nk-contenedor-oculto-ajax") {
midiv = document.createElement('textarea');
midiv.id = contenedor;
midiv.setAttribute("hidden", "hidden");
} else {
midiv = document.getElementById(contenedor);
}
if (midiv) {
metodo_ajax(midiv, url, dato, metodo, asincronico);
} else {
alert("Error de sintaxis: El objeto " + contenedor + " no existe")
}
}
var midiv = document.getElementById(contenedor);
respuesta = midiv.value;
if (eliminar) {
midiv.parentNode.removeChild(midiv);
}
midiv = null;
return respuesta;
}
};
Finalmente les dejo una implementación CopyPaste:
fichero: respuesta.php
Código PHP:
<?php
echo "imagina que hiciste algo con ese " . $_POST['id'];
?>
fichero: principal.html
Código HTML:
Ver original<!DOCTYPE html>
<script type="text/javascript"> function Enviame_al_Div(id) {
dato = "id=" + id;
ajax("#miDiv","resultado.php", dato);
}
<select id="miopcion" onclick="Enviame_al_Div(this.value)">
Aun debo perfeccionar algunas cosas, pero esta bastante completo para mi.