AJAX, o "Asynchronous JavaScript y XML," se pueden utilizar para generar dinámicamente páginas Web completos sin necesidad de recargar ellos, ayudando a crear una interfaz de usuario fácil y atractiva. AJAX puede hacer uso de las formas para volver a dibujar los elementos de la página en función de la entrada del usuario; a presentar los datos en un formulario con AJAX, utilizar las variables de URL del método GET y una función corta JavaScript para analizar los elementos en el formulario.
Instrucciones
1 Abra el archivo que contiene el código fuente de su sitio web (este archivo probablemente acaba en .htm, .html o .php) usando un editor HTML o un programa de edición de texto como el Bloc de notas. Desplazarse hacia abajo a la forma que tiene la intención de presentar, junto con AJAX y asegurarse de que la apertura <form> tiene un atributo "name". Si no es así, agregue --- por ejemplo, "<form enctype =" forma / multiparte 'name =' ajaxform '> "inicia un formulario con el nombre de" ajaxform. "
2 Añadir la siguiente línea después de la "</ form>" etiqueta de cierre que termina el formulario que va a enviar: "<div onclick =" "style =" submit ( 'ajaxform', 'destination.php', 'ajaxresult') frontera: 2px sólido negro; Ancho: 64px; "> Me Enviar </ div>". Esta línea de código creará un botón que puede hacer clic para enviar el formulario con AJAX.
3 Cambio "ajaxform" al nombre del formulario tiene la intención de presentar, y el cambio "destination.php" a la meta de la forma (el archivo que se encarga de todo tratamiento de datos del formulario). Si el destino, devuelve toda la información que desea cargar usando innerHTML, el cambio 'ajaxresult' para el id de la etiqueta <div> que será cargada con los resultados.
4 Desplazarse hasta la sección de encabezado del documento --- todo lo que entre "<head>" y "</ head>". Después de la "<head>" etiqueta de apertura, añadir un poco de JavaScript para enviar el formulario; copiar y pegar el siguiente código exactamente:
<Script type = "text / javascript">
función de enviar (formname, destino, destino) {
URL = diana + "?";
for (i = 0; i <document.forms [formname] .elements.length; i ++) {
URL = URL + document.forms [formname] .elements [i] .name + "=" + document.forms [formname] .elements [i] .value + "y";
}
URL = URL.substring (0, URL.length - 1);
si (window.XMLHttpRequest) {req = new XMLHttpRequest (); }
else if (window.ActiveXObject) {req = new ActiveXObject ( "Microsoft.XMLHTTP"); }
req.onreadystatechange = function () {submitclose (URL de destino);};
req.open ( "GET", URL, true);
req.send ( "");
}
función submitclose (URL de destino) {
document.getElementById (objetivo) = .innerHTML req.responseText;
}
</ Script>
5 Guarde el archivo y salga de ella. Cuando se carga el archivo en el explorador Web, puede hacer clic en "Me Enviar" para enviar el formulario con AJAX; si nos ha proporcionado un innerHTML válida <div> como el tercer argumento de la función "enviar", los resultados de la consulta forma se cargará en que div; si no, el formulario se haya presentado en silencio sin ninguna indicación al usuario final.