Cómo utilizar el método POST en AJAX

Cuando los desarrolladores incluyen funciones AJAX dentro de las páginas Web, lo que permite al usuario ver los nuevos elementos de datos desde el servidor sin tener que volver a cargar la página. Una función AJAX utiliza JavaScript para llamar a un script del lado del servidor, a continuación, para procesar el resultado de esa llamada secuencia de comandos cuando el script del servidor devuelve. Opcionalmente, el código JavaScript puede enviar datos a la secuencia de comandos del servidor, que puede ser útil si el guión está consultando una fuente de datos. AJAX puede utilizar el método GET o POST para enviar datos al servidor.

Instrucciones

1 Cree su formato HTML para llamar a la función AJAX. El siguiente código de ejemplo muestra:
<Input type = "button" value = "conseguir más" onclick = "getData (" contenido ")" />
<Div id = "contenido"> Nuevos datos aquí </ div>

Esto incluye un elemento para escribir los nuevos datos en, así como un botón para llamar al procesamiento de AJAX. Cuando el usuario hace clic en el botón, la función JavaScript especificado se ejecutará. El código puede capturar opcionalmente la información de entrada del usuario.

2 Poner en práctica su función de JavaScript para iniciar el procesamiento de AJAX. El esquema siguiente función de ejemplo demuestra:
función getData (elemID) {
xmlHTTPObject var;
si (window.XMLHttpRequest) {xmlHTTPObject = new XMLHttpRequest (); }
else {xmlHTTPObject = new ActiveXObject ( "Microsoft.XMLHTTP"); }
// Respuesta de instalación
xmlHTTPObject.open ( "POST", "? retrieve_data.php var = hola", true);
xmlHTTPObject.send ();
}

Este código se muestra llamar al script del lado del servidor, en este caso un script PHP, pasándole una variable arbitraria para la demostración. Si el código de captura de datos por parte del usuario, se puede incluir en lugar de la sección "var = hola". La línea de "respuesta de instalación" es donde el código se especifique lo que debe ocurrir cuando el servidor responde.

3 Crear la secuencia de comandos del lado del servidor. La función utiliza un script PHP llamado "retrieve_data.php" pero se puede utilizar un archivo de su propia elección y modificar JavaScript para reflejar que, si lo prefiere. El siguiente ejemplo de código PHP funciona con la muestra de JavaScript:
<? Php
$ Passed_var = $ _POST [ 'var'];
echo "<p>" $ pasado "</ p>"..;
?>

En este ejemplo se escribe simplemente la variable pasada en el formato HTML para la demostración. Su propio código podría consultar una fuente de datos como una base de datos en el script del lado del servidor y, opcionalmente, puede dar formato al texto de respuesta en el formato XML.

4 Instruir JavaScript para manejar la respuesta del servidor. Agregue el siguiente código dentro de su "get_data" función de JavaScript, antes de la línea de abrir el objeto XMLHttpRequest:
xmlHTTPObject.onreadystatechange = function () {
si (xmlHTTPObject.readyState == 4 && xmlHTTPObject.status == 200) {
document.getElementById (elemID) .innerHTML = xmlHTTPObject.responseText;
}}

Este código utiliza el parámetro de su elemento HTML pasa cuando se llama a la función de identificar el elemento que escribir el texto de respuesta en. Se puede llevar a cabo opcionalmente posterior procesamiento JavaScript en la respuesta.

5 Guarde los archivos y subirlos a su servidor Web. Vaya a la página y haga clic en el botón para probarlo. Debería ver el nuevo contenido escrito al elemento "div" en la página. Dependiendo de su conexión, puede haber un pequeño retraso. Se pueden añadir etapas de procesamiento adicionales a cualquier parte del código, incluyendo el HTML, JavaScript y PHP.

Consejos y advertencias

• AJAX puede utilizar secuencias de comandos ASP, así como PHP.
• Hay un montón de lugares en los que el código AJAX puede salir mal, así que asegúrese de probar sus páginas correctamente.