Ajax se puede utilizar para recuperar información de un servidor sin tener que recargar una página web entera. Ajax (o AJAX) puede ser muy útil si sólo desea cargar una pequeña cantidad de información pero mantener la mayor parte de la página de la misma. Ajax o JavaScript asíncrono y XML, logra esto mediante el intercambio de pequeñas cantidades de datos con el servidor en segundo plano, de acuerdo con W3Schools. El objeto XMLHttpRequest se utiliza para intercambiar datos de forma asíncrona con el servidor, mientras que JavaScript se utiliza para mostrar la información.
Instrucciones
Empezando
1 Abrir un editor de texto o HTML. Si usted no tiene un editor HTML, un simple editor de texto como el Bloc de notas o TextEdit será adecuada.
2 Incluir los elementos esenciales de un documento HTML: "html", "cabeza" y "etiquetas del cuerpo". Los documentos HTML se componen de etiquetas o palabras clave encerrada entre paréntesis angulares. Por ejemplo, una etiqueta de apertura "html" se parece a esto: <html>. etiquetas de cierre incluyen una barra diagonal antes de la palabra clave. La siguiente es la estructura de una página web básica con algunos elementos adicionales (<p> crea párrafos, <a> crea vínculos y <img> incluye imágenes):
<Html>
<Head>
<Title> Mi Página Web </ title>
</ Head>
<Body>
<H1> Mi primer encabezado </ h1>
<P> Escribir texto en esta sección para crear un párrafo. </ P>
<a href="This"> http://www.example.com "> Este es un enlace a una página de ejemplo en la web. </a>
<Img width = "250" height = "200" alt = "mi perro" />
</ Body>
</ Html>
3 Incluir los elementos que desee cambiar con el Ajax. Este y todos los elementos estructurales de una página Web, pasará entre las etiquetas "body".
Por ejemplo, añadir un botón para cambiar un poco de texto en su página. Definir el texto que desea cambiar mediante la inclusión de una etiqueta "div" en todo el texto con un selector de ID (en este caso id = "changeText").
<Body>
<Div id = "changedDiv"> <p> Este texto será cambiado con AJAX </ p> <div>
<Botón de tipo "botón" = onclick = "loadXMLDoc ()"> Haga clic para cambiar el contenido </ botón>
</ Body>
AJAX Guión y Open () Método
4 Escriba la función que llevará a cabo la secuencia de comandos de AJAX en la sección "cabeza" de su documento HTML. Incluir esta función, la función "loadXMLDoc ()", en una etiqueta de JavaScript "guión". Por ejemplo:
<Head>
<Script type = "text / javascript">
función loadXMLDoc ()
{
.... (Script de AJAX se ve aquí)
}
</ Script>
</ Head>
5 Añadir la escritura de AJAX para la función. Incluir el objeto XMLHttpRequest y objeto ActiveX. Estos datos permitirán que se presentarán a o cargarse desde un servidor. Incluir lo siguiente entre las llaves de la "loadXMLDoc ()" función:
si (window.XMLHttpRequest)
{// Para IE7 +, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest ();
}
más
{// Para IE6, IE5
xmlhttp = new ActiveXObject ( "Microsoft.XMLHTTP");
}
6 Añadir el método genérico "open ()" al final de la función. Esto enviará una solicitud al servidor. El siguiente es el formato genérico:
abierta (método, URL, asíncrono)
7 Sustituir la palabra "método" en "abrir (método, URL, asíncrono)" por "GET" o "POST". Use "GET" a menos que va a actualizar un archivo o base de datos en el servidor, el envío de grandes cantidades de datos o el envío de la entrada del usuario en el servidor, en cuyo caso se debe utilizar "POST". "GET" es más rápido que "POST", pero "POST" es más robusto. Su "abierta (método, URL, asíncrono)" ahora debería tener este aspecto:
xmlhttp.open ( "GET", url, asíncrono) o
xmlhttp.open ( "POST", url, asíncrono)
8 Sustituir la palabra "url" en el genérico "abierta (método, URL, asíncrono)" con el archivo en el servidor que desea cargar cuando se hace clic en el botón. Por ejemplo, reemplazar el texto en nuestro ejemplo con un documento de texto llamado "helloWorld.txt:"
xmlhttp.open ( "GET", "helloWorld.txt", asíncrono)
9 Sustituir la palabra "asíncrono" con "verdadero" para permitir solicitudes asíncronas. Esto permite JavaScript para ejecutar incluso cuando el servidor está ocupado o lento sin detener la aplicación. Aquí está el método abierto final ():
xmlhttp.open ( "GET", "helloWorld.txt", "verdadero")
Listo Estado y método send ()
10 Agregue el siguiente código anterior "xmlhttp.open (" GET "," helloWorld.txt "," verdadero ")" para especificar la función que se ejecutará cuando listo:
xmlhttp.onreadystatechange = function ()
{
si (xmlhttp.readyState == == 4 && xmlhttp.status 200)
{
document.getElementById ( "exampleDiv") innerHTML = xmlhttp.responseText.;
}
}
Cuando los cambios de estado listos desde 0 a 4, la función se ejecutará (0: solicitud no se ha inicializado; 1: Se establece la conexión con el servidor; 2: solicitud ha sido recibida; 3: Solicitud de procesamiento; 4: solicitar terminado y la respuesta está listo) . El estado es 200 cuando la página se encuentra (== estado 404 significa que no se encontró la página).
11 Incluir el método de "send ()" por debajo "xmlhttp.open (" GET "," helloWorld.txt "," verdadero ")" para enviar la solicitud al servidor fuera. Este es el "send ()" método:
xmlhttp.send ()
12 Revisar todo el código, que debe tener este aspecto:
<Html>
<Head>
<Script type = "text / javascript">
función loadXMLDoc ()
{
si (window.XMLHttpRequest)
{// Para IE7 +, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest ();
}
más
{// Para IE6, IE5
xmlhttp = new ActiveXObject ( "Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
si (xmlhttp.readyState == == 4 && xmlhttp.status 200)
{
document.getElementById ( "changedDiv") innerHTML = xmlhttp.responseText.;
}
}
xmlhttp.open ( "GET", "ajax_info.txt", true);
xmlhttp.send ();
}
</ Script>
</ Head>
<Body>
<Div id = "changedDiv"> <h2> Cambiar este texto con AJAX </ h2> </ div>
<Botón de tipo "botón" = onclick = "loadXMLDoc ()"> Haga clic para cambiar el contenido </ botón>
</ Body>
</ Html>