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