Last active
December 28, 2015 04:28
-
-
Save gepser/7442157 to your computer and use it in GitHub Desktop.
HTML y JavaScript para una consulta AJAX simple sin usar JQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script> | |
| function loadXMLDoc() | |
| { | |
| var xmlhttp; | |
| var pal; | |
| //Campo de Texto que tendrá la plabra o dígito que deseemos enviar como parámetro para consultar | |
| pal = document.getElementById("txtPalabraBusqueda").value | |
| //GIF para el loader mientras se espera | |
| document.getElementById("divAjax").innerHTML="<center><img src='/ajax-loader.gif'></center>"; | |
| if (window.XMLHttpRequest) | |
| { | |
| xmlhttp=new XMLHttpRequest(); | |
| } | |
| else | |
| { | |
| xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); | |
| } | |
| xmlhttp.onreadystatechange=function() | |
| { | |
| if (xmlhttp.readyState==4 && xmlhttp.status==200) | |
| { | |
| //Div que se actualizará con la respuesta de la página secundaria | |
| document.getElementById("divAjax").innerHTML=xmlhttp.responseText; | |
| //Acá se puede llamar una segunda función AJAX para que se ejecute hasta que esta termine, es decir en cascada. | |
| //segunda_funcion_ejemplo(); | |
| //En esa otra función que sería similar a esta se puede llamar a una tercera y así sucesivamente para hacer la cascada de funciones tan grande como sea necesario. | |
| } | |
| } | |
| //En la página secundaria se harán consultas a la Base de Datos o cualquier cálculo y lo regresamos con un Response.Write | |
| xmlhttp.open("GET","ajxPaginaSecundaria.asp?pal=" + pal,true); //asp es sólo un ejemplo, podría ser php o cualquier página de cualquier lenguaje de servidor | |
| xmlhttp.send(); | |
| } | |
| //Para hacer la consulta AJAX cuando se presione ENTER (dentro del input porque está en un OnKeyPress) | |
| function pulsar(e) { | |
| tecla = (document.all) ? e.keyCode :e.which; | |
| if (tecla==13){ | |
| loadXMLDoc() | |
| return (tecla!=13) | |
| } | |
| } | |
| </script> | |
| </header> | |
| <body> | |
| <table width="100%" align="center" border="0"> | |
| <tr> | |
| <td> | |
| TITULO | |
| </td> | |
| </tr> | |
| </table> | |
| <form id="frmConsulta" name="frmConsulta"> | |
| <table align="center"> | |
| <tr> | |
| <td>Palabra</td> | |
| <td> | |
| <input type="text" id="txtIncidente" name="txtPalabraBusqueda" maxlength="15" onkeypress="return pulsar(event)"> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td colspan="2" align="center"> | |
| <p> </p> | |
| <input type="button" value="Consultar" onclick="loadXMLDoc()"> | |
| </td> | |
| </tr> | |
| </table> | |
| </form> | |
| <div id="divAjax"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment