Cómo programar en Ajax (con imágenes)

Tabla de contenido:

Cómo programar en Ajax (con imágenes)
Cómo programar en Ajax (con imágenes)

Video: Cómo programar en Ajax (con imágenes)

Video: Cómo programar en Ajax (con imágenes)
Video: Como instalar NASM y el editor Geany en Linux Ubuntu 2024, Marcha
Anonim

AJAX o Ajax son JavaScript y XML asíncronos. Se utiliza para intercambiar datos con un servidor y actualizar una parte de una página web sin recargar toda la página web en el lado del cliente. La visualización y el comportamiento de la página web existente no se interfiere en absoluto mientras se intercambian y actualizan los datos. Ajax también se considera un grupo de tecnologías que tienen HTML, CSS, DOM y JavaScript que se utilizan para marcar, diseñar y permitir al usuario interactuar con la información en la página web. En este artículo, le mostrará cómo escribir un programa simple en Ajax paso a paso usando Notepad ++. Se requieren conocimientos básicos de HTML, DOM, JavaScript y un servidor web local o un servidor web remoto. WampServer se utiliza en este artículo para una prueba.

Pasos

Método 1 de 2: codificación

3929304 1
3929304 1

Paso 1. Prepare una imagen para escribir un programa Ajax

Guarde la imagen en la misma carpeta donde guardará sus archivos HTML y de texto que muestran el programa Ajax. En este artículo, el directorio "ProgramInAjax" se configura dentro de la carpeta "wamp" en el directorio "www" donde instaló WampServer.

3929304 2
3929304 2

Paso 2. Abra cualquier editor de texto

Notepad ++ se utiliza como editor de texto en este artículo.

3929304 3
3929304 3

Paso 3. Cree un nuevo archivo en el editor de texto

Escriba lo siguiente:


¡Oh, oh! ¿A dónde se fue la flor amarilla?

Puede escribir lo que quiera dentro de la etiqueta html aquí.

3929304 4
3929304 4

Paso 4. Guarde el archivo como un documento de texto con el nombre de “ajax-data.txt

” En realidad, puede nombrar el archivo como desee, pero asegúrese de ingresar el mismo nombre de archivo en la codificación en esta línea:

xmlhttp.open ("OBTENER", "ajax-data.txt", verdadero);

Sin embargo, la etiqueta HTML se usa para el encabezado para que parezca más grande e invisible.

3929304 5
3929304 5

Paso 5. Cree un nuevo archivo para una página web

Este archivo es para un archivo HTML para ver el programa Ajax en un navegador web.

3929304 6
3929304 6

Paso 6. Copie el siguiente código:

  Mi primer programa de Ajax por mí Ponga el código Ajax a continuación.  


Haga clic en el botón de abajo para hacer desaparecer la flor

3929304 7
3929304 7

Paso 7. Guarde el archivo

Haga clic en el botón guardar en la barra de menú. Se abre un cuadro "Guardar como". Ingrese un nombre para su documento. En este artículo, el nombre del archivo es "índice".

3929304 8
3929304 8

Paso 8. Haga clic en la flecha desplegable para elegir la extensión del archivo

En el campo "Guardar como tipo", haga clic en la flecha desplegable para elegir la extensión del archivo.

3929304 9
3929304 9

Paso 9. Seleccione “Archivo de lenguaje de marcado de hipertexto

” Asegúrese de que tenga "html" entre paréntesis. Haga clic en guardar después de seleccionar "html".

3929304 10
3929304 10

Paso 10. Pruebe el archivo HTML en un navegador web

Abra la página web en un navegador web. Vaya a "Ejecutar" en la barra de menú superior. Haga clic en él y seleccione "Iniciar en Chrome" o cualquier navegador que se esté instalando en su sistema. Google Chrome se utiliza para las pruebas en este artículo. Es posible que tenga instalados otros navegadores dentro de Notepad ++. Puede seleccionar su navegador favorito. Otra opción, puede hacer clic en el icono de WampServer en las barras de tareas en la parte inferior de la pantalla y seleccionar "Localhost". Debería ver su directorio allí y hacer clic en el archivo de índice.

Paso 11. Haga clic en el botón debajo de la imagen para probar el script

3929304 12
3929304 12

Paso 12. Tu página web final

Su página web debe actualizarse con la información que ingresó en el archivo de texto al principio. La flor y el encabezado deben reemplazarse por el nuevo encabezado llamado “¡Oh, oh! ¿A dónde se fue la flor amarilla?

Método 2 de 2: Explicación del código

3929304 13
3929304 13

Paso 1. La sección del cuerpo

El cuerpo de HTML tiene la sección "div" y un botón. Esta sección se utilizará para mostrar la información devuelta por el servidor. El botón llama a una función llamada "loadXMLDoc ()", si se hace clic en él.

   Mi primer programa de Ajax por mí   Aquí va una imagen para probar el programa Ajax.

Haga clic en el botón de abajo para hacer desaparecer la flor

Un botón va aquí

3929304 14
3929304 14

Paso 2. La sección de la cabeza

La sección de cabecera del archivo HTML tiene una etiqueta de secuencia de comandos que contiene la función "loadXMLDoc ()".

 Mi primer programa de Ajax por mí Ponga el código Ajax a continuación. 

Paso 3. Más explicación

Lo más importante de Ajax es el objeto XMLHttpRequest. Se utiliza para intercambiar datos con el servidor y todos los navegadores modernos admiten el objeto.

  • La sintaxis para crear un objeto XMLHttpRequest () es variable = new XMLHttpRequest (); pero al mismo tiempo la sintaxis para crear versiones antiguas de Internet Explorer (IE5 e IE6) que usa un objeto ActiveX es variable = new ActiveXObject ("Microsoft. XMLHTTP");.
  • Para manejar todos los navegadores modernos, debe verificar si los navegadores son compatibles con el objeto XMLHttpRequest. Si lo hace, crea un objeto XMLHttpRequest. Si no lo hace, creará un objeto ActiveX para él.
  • Luego enviará una solicitud al servidor. Se utilizará el método del objeto XMLHttpRequest llamado “open ()” y “send ()”. xmlhttp.open ("OBTENER", "ajax_info.txt", verdadero); xmlhttp.send ();.

Consejos

  • Otra opción para obtener una vista previa del resultado, puede abrir su navegador favorito y escribir "localhost / ProgramInAjax" en la barra de direcciones web para mostrar la página web. Debería poder ver la página web si asigna a su archivo HTML el nombre "index.html".
  • Guarde su archivo html con más frecuencia durante su trabajo. Presionar Ctrl y S al mismo tiempo para los usuarios de Windows ahorrará más tiempo.
  • Asegúrese de agregar su archivo HTML guardado en la misma ubicación donde están su imagen y archivo de texto de datos.
  • Cuando asigna un nombre a un archivo, se distingue entre mayúsculas y minúsculas cuando agrega esos nombres en el código. Por ejemplo, "myImage" es diferente de "MyImage" o "myimage".

Recomendado: