-
¿Cómo hacer AJAX con PHP y HTML
-
funciones AJAX permite que las páginas web para actualizar el contenido HTML sin que el usuario tenga que actualizar la página o navegar a una página diferente. El código HTML de una página puede llamar a una función de JavaScript, que a su vez puede llamar a un script PHP. El script PHP puede obtener los datos adicionales, a veces a partir de una base de datos y el formato en el formato XML, volviendo esto a la función de JavaScript. El código JavaScript puede entonces escribir estos nuevos datos en el HTML, por lo que la nueva información aparece como el usuario interactúa con la página web.Instrucciones
1 Crear un nuevo documento HTML. Escriba el siguiente código en un archivo en blanco en su editor de texto y asigne al archivo una extensión ".html" cuando la guarda:
<Html>
<Head>
<Script type = "text / javascript">
processData funcionar () {
//Adquirir Nuevos Datos
}
</ Script>
</ Head>
<Body>
<Div id = "actualización"> Algunos contenidos </ div>
<Input type = valor "botón" = "me presione" onclick = "processData ()" />
</ Body>
</ Html>Cuando el usuario hace clic en el botón que aparece en esta página, el navegador llamará a la función de JavaScript en la sección de cabecera de la página.
2 Crear un objeto XMLHttpRequest. Agregue el siguiente código dentro de la función de JavaScript:
xmlhttp var;
si (window.XMLHttpRequest) {xmlhttp = new XMLHttpRequest (); }
else {xmlhttp = new ActiveXObject ( "Microsoft.XMLHTTP"); }Esto permite que la página Web para manejar los diferentes navegadores.
3 Envíe su solicitud de datos a un script PHP. Agregue el siguiente código dentro de la función de JavaScript, dejando espacio para el código antes de que:
xmlHTTP.open ( "GET", "get_data.php", true);
xmlHTTP.send ();Esto indica al navegador para solicitar información adicional a la secuencia de comandos PHP especificada.
4 Crear su script PHP. Abra un nuevo archivo en un editor de texto y guardarlo como "get_data.php" para que coincida con el parámetro al método de envío que utilizó en su código JavaScript. Escriba el siguiente código de ejemplo:
<? Php
echo "nuevos datos";
?>Este es un simple ejemplo para la demostración, pero se puede añadir cualquier procesamiento PHP que necesita, incluyendo consultas de bases de datos. También puede construir su texto de respuesta en formato XML si éste se adapte a su sitio.
5 Manejar la respuesta de su script PHP. En su función de JavaScript, antes de la línea en la que se abre el objeto XMLHttpRequest, agregue el código siguiente:
xmlHTTP.onreadystatechange = function () {
si (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) {
// Manejar los datos de respuesta
}}Cuando JavaScript recibe una respuesta del script PHP, este código se ejecutará. El código comprueba que la respuesta es válido. Dentro de esta sentencia condicional, puede agregar código para escribir los nuevos datos en su página HTML.
6 Actualizar el contenido de su página. En la sentencia condicional respuesta JavaScript, agregue el código siguiente:
document.getElementById ( "actualizar") innerHTML = xmlHTTP.responseText.;
Este código identifica el elemento div en la página y luego escribe el texto de respuesta desde el código PHP en ella.
7 Guarde los archivos y subirlos a su servidor. Vaya a la página y haga clic en el botón para comprobar que la función trabaja. Debería ver el contenido de la modificación elemento div.
Consejos y advertencias
- Puede pasar los datos de la función JavaScript para el script PHP, así como recibir datos.
- AJAX guiones a veces surgen problemas con el almacenamiento en caché del navegador. Para evitar esto, se puede agregar una variable de números aleatorios para el código JavaScript al final de la cadena de URL de script PHP.
