Vamos a comenzar a crear nuestro ejemplo.
Aquí he cargado un HTML ya con un poco de estructura de este título quizá aprendiendo Ayax tiene este
botón y además puedes ver que está en blanco.
Estos archivos van a estar para descargar y empezar no tengas que escribir todo esto vamos a darle de
nada más una revisada rápida lo que aquí nos vamos a encontrar es un índex punto HTML tener un enlace
anormales a una carpeta un archivo de estilos tenemos un contenedor del título Aprendiendo Ayax tenemos
un botón que le dimos una Heydi cargar esto para poder con JavaScript utilizar Get gentlemen en Bayardi
y seleccionar esto tiene el valor de cargar que es el que está aquí que se cargará y tendremos un dip
con Leidi de contenido.
Esto también es Leydi para poder seleccionarlo con JavaScript antes de darle click aquí.
Y voy a crear un nuevo archivo OFarrell en este caso la ponerselo 5.ª JS el 0 5 es porque este video
es el quinto del capítulo en el siguiente video va a mostrar un ejemplo un poco más distinto así que
ese será el 6 antes de movernos al proyecto donde estaremos utilizando Ayax más de forma más exhaustiva.
Una vez que un script recibe JS 0 o 5.2 JS y cierro el script quiero ver y vamos a abrir nuestro ser
o 5.ª JS y vamos a crear una variable vamos a poner en cargar que es el botón que tenemos que poner
el Document punto Puntoticket Element Bayardi.
La idea que quiero es este cargar así que lo copio y pego ahí.
Siguiente vamos a reaccionar a un evento o sea cuando yo doy click aquí quiero que esta función de Ajax
corra.
Así que qué puedo copiar esta variable y agregarle un app bendiciãn y con click y esto va a ejecutar
una función una función que voy a llamar cargar contenido Ayax.
En este caso después de crear esta función función cargar contenido Ayax nuestros parentesis y en nuestra
llave ya quiero poner una alerta y poner aquí funciona nada más para asegurarme que esta parte está
bien que Bendixen está bien y que la función está bien.
Y antes de continuar aquí hay un error en la licencia así que puedo guardar y recargar click aquí vemos
que funciona.
Ya hemos seleccionado nuestro botón le hemos agregado el evento de clic para que ejecute esta función.
Hasta aquí todo lo que hemos visto normalmente en JavaScript siguiente vamos a crear nuestro XML HTTP
request y para eso va a crear una variable Bahr como vimos en la presentación y quizá Cherro nombrarla
como gustes.
Sin embargo la mayoría de los ejemplos de Internet van a nombrarlo como hasta aquí.
Como dije es una convención casi todo mundo así lo utiliza Niubó para crear una nueva instancia XML
HTTP request.
Es importante que se escriba como hasta aquí con mayúsculas y minúsculas en el orden que están puestas.
Abrimos la conexión con un comentario y vamos a poner poco para arriba X H.R como nombramos la variable
gracias a esta instancia tengo acceso a todos los métodos y voy a poner aquí Open vamos a abrir nuestra
conexión en este caso va a ser ket vamos a obtener información y voy a crear un nuevo archivo botón
derecho Nofal a poner aquí texto bajo prueba apuntó txt.
Vamos a ponerle un texto que diga Hola desde un archivo txt suponiendo que vamos a leer la información
de este archivo en un ejemplo real pues tolderías de una base de datos o tal vez de algún x de un txt
dependiendo de lo que te pidan.
En este caso vamos a ser un ejemplo sencillo obteniendo este texto al dar clic en el botón Siguiente
es la web real en este caso sería texto bajo prueba punto txt y por último si queremos que sea síncrono
o asíncrono le damos Tru como dije esto lo vamos a ser un poco más adelante.
En este ejemplo hay que darle Tru para que lo cargue de forma síncrona hasta este momento nada más hemos
creado la instancia y hemos abierto la conexión.
Sin embargo no hemos enviado ninguna petición al servidor ni nada de eso.
Todo eso se va a hacer cuando estemos en x h recent pero antes de enviar la petición es importante dentro
de estas dos colocar X Acher on Rabbi Strait Change y esto va a ejecutar una función que se va a ejecutar
cada que este método cambie.
Si recuerdas este método se ejecutaba cada vez que Redi Toit tenía un cambio es decir cuando Sain cuando
no se inicializar la conexión Reddy State estaba en cero pero cuando cambiaba de 0 a 1 esta función
se ejecutaba cuando cambiaba de cero uno a dos de 1 a dos se vuelve a ejecutar cuando es de 2 o 3 se
vuelve a ejecutar así hasta llegar a 4.
Sin embargo lo que tenemos que asegurarnos es con un IBF poner X H.R punto
greatly estoy que sea igual a 4 si recuerdas 4 era cuando la respuesta ha finalizado y es exitosa cuando
la respuesta ha finalizado y tenemos una respuesta y quizá Cherres status igual a 200 y esta será cuando
la respuesta del Estado fue correcto es decir estamos revisando que sea correcta y que tengamos ya una
respuesta ya que le puedo poner un control punto log se cargó correctamente.
Es decir ya estamos aquí vamos no se cargó correctamente podemos guardar y recargar y voy a dar al botón
derecho inspector y en la consola damos clic y vamos a presionar nuestro botón y vemos que dice ese
cargo correctamente es decir tenemos una respuesta ya que texto prueba que existe y ahí si la conexión
correctamente.
Si yo le pusiera un 2 y recargará doy clic en Cargar.
Vemos que nos da un error 404 que en este caso fue 200 aquí de que el error sería el 404 porque hay
un error.
Este archivo no existe texto prueba y vemos que desde ese cargo correctamente.
Aquí antes de esta función de este stiff quiero mostrarte si le damos Consol log x H.B regístrate y
guardamos cambios si recargamos cargar vemos que nos va a imprimir el 2 el 3 y el 4 si recuerdas en
la anterior presentación vimos que representaba cada uno de estos números.
Sin embargo este código nada más se ejecuta en el 4 que es cuando tenemos ya una respuesta del servidor
por lo normal estos 2 y 3 no se revisan aquí es muy rara la ocasión salvo que quieras comprobar que
la conexión se esté haciendo.
Entonces tendrías que checar regístrate 2 y luego 3 para saber que se envió correctamente antes de finalizar
este ejemplo.
Vamos a darle a equipar contenido nos sacaron una variable igual a document un toque Element Bayardi
y tenemos este Dip con el de contenido abrimos paréntesis si ponemos ahí dentro el contenido después
tendremos contenido punto INER HTML para cambiar el HTML de este dip que de momento no tiene nada igual.
Podemos poner aquí texto anterior
y lo vamos a cambiar por igual a x Acher punto respondés texto y es importante también responsables
registered on revista Change status todos estos deben de llamarse así ya que todos estos existen gracias
a XML HTTP recuestan con esto finalizamos este ejemplo.
Vamos a guardar y a recargar vemos que aquí tenemos texto anterior esto viene de aquí tendí damos clic
y vemos que ahora dice Hola desde un archivo txt y pudiste ver que no tuvimos que recargar nuestra página
nada más damos clic aquí recibimos una respuesta del servidor que comprobamos aquí en el distrito 4
y en el estar 200 y gracias a esta respuesta la estamos enviando a nuestro Dib y estamos actualizando
la información de nuestra página web y aquí hemos hecho nuestro primer ejemplo con Ayax.
En el siguiente vídeo vamos a ver cómo hacerlo utilizando un archivo de PHP que será lo más común que
estaremos implementando.
Esta técnica aplica para cualquier lenguaje sin embargo PHP es el más común para este tipo de proyectos
así que vamos a verlo en el siguiente vídeo.