AJAX o Ajax es JavaScript y XML asíncrono. Se utiliza para intercambiar datos con un servidor y actualizar una parte de una página web sin volver a cargar toda la página web en el lado del cliente. La visualización y el comportamiento de la página web existente no se interfieren en absoluto al intercambiar y actualizar los datos. Ajax también se considera un grupo de tecnologías que tiene 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 pasos por pasos usando Notepad ++. Se requieren algunos conocimientos básicos de HTML, DOM, JavaScript y un servidor web local o servidor web remoto. WampServer se usa en este artículo para una prueba.

Método uno de dos:
Codificación

  1. 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" está configurado dentro de la carpeta "wamp" debajo del directorio "www" donde instaló WampServer.
  2. 2 Abra cualquier editor de texto. Notepad ++ se utiliza como editor de texto en este artículo.
  3. 3 Crea un nuevo archivo en el editor de texto. Escriba lo siguiente: 
     
    Oh oh! ¿A dónde fue la flor amarilla?
    Puede escribir lo que quiera dentro de la etiqueta html

    aquí.
  4. 4 Guarde el archivo como un documento de texto con el nombre "ajax-data.txt".” En realidad, puede asignarle un nombre al archivo que desee, pero asegúrese de ingresar el mismo nombre de archivo para la codificación en esta línea: 
     xmlhttp.open ("GET", "ajax-data.txt", verdadero);
    Sin embargo, la etiqueta HTML

    se usa para el encabezado para que se vea más grande y más invisible.
  5. 5 Crea un nuevo archivo para una página web. Este archivo es para un archivo HTML para ver el programa Ajax en un navegador web.
  6. 6 Copie el siguiente código: 
      <html> <cabeza> <título>Mi primer programa de Ajax por mí</título>  <guión> function loadXMLDoc () var xmlhttp; if (window.XMLHttpRequest) // código para IE7 +, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest ();  else // código para IE6, IE5 xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");  xmlhttp.onreadystatechange = function () if (xmlhttp.readyState == 4) && xmlhttp.status == 200)    document.getElementById ("myImage"). innerHTML = xmlhttp.responseText;  xmlhttp.open ("GET", "ajax-data.txt", verdadero); xmlhttp.send ();  </guión> </cabeza> <cuerpo estilo="text-align: center;">  <div carné de identidad="Mi imagen"> <h2>Haga clic en el botón de abajo para hacer que la flor desaparezca.</h2> <img src="MyPicture.png" anchura="500px" altura="300px" título="Flor amarilla" alt="una imagen de una flor amarilla"/> </div> <br/>  <botón tipo="botón" al hacer clic="loadXMLDoc ()">Haga clic aquí para hacer desaparecer la imagen!</botón> </cuerpo> </html>
  7. 7 Guarda el archivo. Haga clic en el botón Guardar en la barra de menú. El cuadro "Guardar como" está abierto. Ingrese un nombre para su documento. En este artículo, el nombre del archivo es "índice".
  8. 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.
  9. 9 Seleccione "Archivo de lenguaje de marcado de hipertexto".” Asegúrese de que tiene "html" dentro del paréntesis. Haga clic en guardar después de seleccionar el "html".
  10. 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. Haz clic y selecciona "Iniciar en Chrome" o cualquier navegador que esté siendo instalado en tu sistema. Google Chrome se usa para las pruebas en este artículo. Puede tener algunos otros navegadores instalados dentro de Notepad ++. Puede seleccionar su navegador favorito. Otra opción, puede hacer clic en el icono de WampServer en la barra 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.
  11. 11Haga clic en el botón debajo de la imagen para probar el guión.
  12. 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 con el nuevo encabezado llamado "Oh oh! ¿A dónde se fue la flor amarilla? "

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

  1. 1 La sección del cuerpo El cuerpo de HTML tiene la sección "div" y un botón. Esta sección se usará para mostrar la información devuelta por el servidor. El botón llama a una función llamada "loadXMLDoc ()," si se hace clic en ella. 
     DOCTYPE html> <html> <cabeza> <título>Mi primer programa de Ajax por mítítulo> cabeza> <tipo de cuerpo="text-align: center;">  <div id="Mi imagen"> <h2>Haga clic en el botón de abajo para hacer que la flor desaparezca.h2> <img src="MyPicture.png" anchura="500px" altura="300px" título="Flor amarilla" alt="una imagen de una flor amarilla"/> div> <br/>  <tipo de botón="botón" al hacer clic="loadXMLDoc ()">Haga clic aquí para hacer que la imagen desaparezca!botón> cuerpo> html>
  2. 2 La sección de la cabeza La sección principal del archivo HTML tiene una etiqueta de script que contiene la función "loadXMLDoc ()". 
     <cabeza> <título>Mi primer programa de Ajax por mítítulo>  <guión> función loadXMLDoc()  var xmlhttp; Si (ventana.XMLHttpRequest) // código para IE7 +, Firefox, Chrome, Opera, Safari xmlhttp = nuevo XMLHttpRequest();  más // código para IE6, IE5 xmlhttp = nuevo ActiveXObject("Microsoft.XMLHTTP");  xmlhttp.onreadystatecambiar = función()  Si (xmlhttp.ReadyState == 4 && xmlhttp.estado == 200)  documento.getElementById("Mi imagen").innerHTML = xmlhttp.responseText;   xmlhttp.abierto("OBTENER","ajax-data.txt",cierto); xmlhttp.enviar();  guión> cabeza>
  3. 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 variable = new ActiveXObject ("Microsoft.XMLHTTP");.
    • Para manejar todos los navegadores modernos, necesita verificar si los navegadores soportan 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 usará el método del objeto XMLHttpRequest llamado "abrir ()" y "enviar ()". xmlhttp.open ("GET", "ajax_info.txt", verdadero); xmlhttp.send ();.