1
00:00:00,550 --> 00:00:03,390
Vamos a comenzar a crear nuestro ejemplo.

2
00:00:03,680 --> 00:00:10,780
Aquí he cargado un HTML ya con un poco de estructura de este título quizá aprendiendo Ayax tiene este

3
00:00:10,780 --> 00:00:15,700
botón y además puedes ver que está en blanco.

4
00:00:15,850 --> 00:00:22,540
Estos archivos van a estar para descargar y empezar no tengas que escribir todo esto vamos a darle de

5
00:00:22,570 --> 00:00:29,500
nada más una revisada rápida lo que aquí nos vamos a encontrar es un índex punto HTML tener un enlace

6
00:00:29,520 --> 00:00:38,270
anormales a una carpeta un archivo de estilos tenemos un contenedor del título Aprendiendo Ayax tenemos

7
00:00:38,270 --> 00:00:44,430
un botón que le dimos una Heydi cargar esto para poder con JavaScript utilizar Get gentlemen en Bayardi

8
00:00:44,430 --> 00:00:50,880
y seleccionar esto tiene el valor de cargar que es el que está aquí que se cargará y tendremos un dip

9
00:00:50,880 --> 00:00:52,680
con Leidi de contenido.

10
00:00:52,830 --> 00:01:00,260
Esto también es Leydi para poder seleccionarlo con JavaScript antes de darle click aquí.

11
00:01:01,600 --> 00:01:09,090
Y voy a crear un nuevo archivo OFarrell en este caso la ponerselo 5.ª JS el 0 5 es porque este video

12
00:01:09,090 --> 00:01:15,720
es el quinto del capítulo en el siguiente video va a mostrar un ejemplo un poco más distinto así que

13
00:01:15,740 --> 00:01:25,640
ese será el 6 antes de movernos al proyecto donde estaremos utilizando Ayax más de forma más exhaustiva.

14
00:01:25,630 --> 00:01:39,580
Una vez que un script recibe JS 0 o 5.2 JS y cierro el script quiero ver y vamos a abrir nuestro ser

15
00:01:39,580 --> 00:01:49,060
o 5.ª JS y vamos a crear una variable vamos a poner en cargar que es el botón que tenemos que poner

16
00:01:49,060 --> 00:01:53,280
el Document punto Puntoticket Element Bayardi.

17
00:01:53,930 --> 00:01:58,190
La idea que quiero es este cargar así que lo copio y pego ahí.

18
00:01:59,420 --> 00:02:07,430
Siguiente vamos a reaccionar a un evento o sea cuando yo doy click aquí quiero que esta función de Ajax

19
00:02:08,060 --> 00:02:09,060
corra.

20
00:02:09,380 --> 00:02:19,750
Así que qué puedo copiar esta variable y agregarle un app bendiciãn y con click y esto va a ejecutar

21
00:02:19,750 --> 00:02:24,840
una función una función que voy a llamar cargar contenido Ayax.

22
00:02:24,880 --> 00:02:34,710
En este caso después de crear esta función función cargar contenido Ayax nuestros parentesis y en nuestra

23
00:02:34,720 --> 00:02:40,630
llave ya quiero poner una alerta y poner aquí funciona nada más para asegurarme que esta parte está

24
00:02:40,630 --> 00:02:44,670
bien que Bendixen está bien y que la función está bien.

25
00:02:44,970 --> 00:02:50,740
Y antes de continuar aquí hay un error en la licencia así que puedo guardar y recargar click aquí vemos

26
00:02:50,740 --> 00:02:52,000
que funciona.

27
00:02:52,300 --> 00:02:59,590
Ya hemos seleccionado nuestro botón le hemos agregado el evento de clic para que ejecute esta función.

28
00:02:59,590 --> 00:03:08,080
Hasta aquí todo lo que hemos visto normalmente en JavaScript siguiente vamos a crear nuestro XML HTTP

29
00:03:08,080 --> 00:03:15,180
request y para eso va a crear una variable Bahr como vimos en la presentación y quizá Cherro nombrarla

30
00:03:15,190 --> 00:03:16,580
como gustes.

31
00:03:16,630 --> 00:03:20,470
Sin embargo la mayoría de los ejemplos de Internet van a nombrarlo como hasta aquí.

32
00:03:20,470 --> 00:03:28,390
Como dije es una convención casi todo mundo así lo utiliza Niubó para crear una nueva instancia XML

33
00:03:29,140 --> 00:03:31,540
HTTP request.

34
00:03:31,540 --> 00:03:38,790
Es importante que se escriba como hasta aquí con mayúsculas y minúsculas en el orden que están puestas.

35
00:03:39,490 --> 00:03:50,490
Abrimos la conexión con un comentario y vamos a poner poco para arriba X H.R como nombramos la variable

36
00:03:51,150 --> 00:03:57,300
gracias a esta instancia tengo acceso a todos los métodos y voy a poner aquí Open vamos a abrir nuestra

37
00:03:57,300 --> 00:04:04,900
conexión en este caso va a ser ket vamos a obtener información y voy a crear un nuevo archivo botón

38
00:04:04,900 --> 00:04:10,490
derecho Nofal a poner aquí texto bajo prueba apuntó txt.

39
00:04:10,510 --> 00:04:18,420
Vamos a ponerle un texto que diga Hola desde un archivo txt suponiendo que vamos a leer la información

40
00:04:18,420 --> 00:04:24,720
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

41
00:04:24,720 --> 00:04:26,640
dependiendo de lo que te pidan.

42
00:04:26,640 --> 00:04:33,260
En este caso vamos a ser un ejemplo sencillo obteniendo este texto al dar clic en el botón Siguiente

43
00:04:33,430 --> 00:04:40,770
es la web real en este caso sería texto bajo prueba punto txt y por último si queremos que sea síncrono

44
00:04:41,220 --> 00:04:48,390
o asíncrono le damos Tru como dije esto lo vamos a ser un poco más adelante.

45
00:04:49,170 --> 00:04:56,560
En este ejemplo hay que darle Tru para que lo cargue de forma síncrona hasta este momento nada más hemos

46
00:04:56,620 --> 00:05:00,010
creado la instancia y hemos abierto la conexión.

47
00:05:00,010 --> 00:05:05,740
Sin embargo no hemos enviado ninguna petición al servidor ni nada de eso.

48
00:05:05,780 --> 00:05:12,550
Todo eso se va a hacer cuando estemos en x h recent pero antes de enviar la petición es importante dentro

49
00:05:12,550 --> 00:05:23,000
de estas dos colocar X Acher on Rabbi Strait Change y esto va a ejecutar una función que se va a ejecutar

50
00:05:23,020 --> 00:05:25,490
cada que este método cambie.

51
00:05:26,120 --> 00:05:35,630
Si recuerdas este método se ejecutaba cada vez que Redi Toit tenía un cambio es decir cuando Sain cuando

52
00:05:35,630 --> 00:05:42,020
no se inicializar la conexión Reddy State estaba en cero pero cuando cambiaba de 0 a 1 esta función

53
00:05:42,020 --> 00:05:50,990
se ejecutaba cuando cambiaba de cero uno a dos de 1 a dos se vuelve a ejecutar cuando es de 2 o 3 se

54
00:05:50,990 --> 00:05:54,100
vuelve a ejecutar así hasta llegar a 4.

55
00:05:54,110 --> 00:05:59,870
Sin embargo lo que tenemos que asegurarnos es con un IBF poner X H.R punto

56
00:06:03,080 --> 00:06:14,630
greatly estoy que sea igual a 4 si recuerdas 4 era cuando la respuesta ha finalizado y es exitosa cuando

57
00:06:14,630 --> 00:06:22,130
la respuesta ha finalizado y tenemos una respuesta y quizá Cherres status igual a 200 y esta será cuando

58
00:06:22,130 --> 00:06:29,300
la respuesta del Estado fue correcto es decir estamos revisando que sea correcta y que tengamos ya una

59
00:06:29,300 --> 00:06:36,350
respuesta ya que le puedo poner un control punto log se cargó correctamente.

60
00:06:38,340 --> 00:06:46,110
Es decir ya estamos aquí vamos no se cargó correctamente podemos guardar y recargar y voy a dar al botón

61
00:06:46,110 --> 00:06:55,510
derecho inspector y en la consola damos clic y vamos a presionar nuestro botón y vemos que dice ese

62
00:06:55,510 --> 00:07:03,010
cargo correctamente es decir tenemos una respuesta ya que texto prueba que existe y ahí si la conexión

63
00:07:03,010 --> 00:07:04,230
correctamente.

64
00:07:04,230 --> 00:07:09,610
Si yo le pusiera un 2 y recargará doy clic en Cargar.

65
00:07:09,790 --> 00:07:18,460
Vemos que nos da un error 404 que en este caso fue 200 aquí de que el error sería el 404 porque hay

66
00:07:18,460 --> 00:07:18,880
un error.

67
00:07:18,880 --> 00:07:25,640
Este archivo no existe texto prueba y vemos que desde ese cargo correctamente.

68
00:07:26,000 --> 00:07:36,870
Aquí antes de esta función de este stiff quiero mostrarte si le damos Consol log x H.B regístrate y

69
00:07:36,870 --> 00:07:44,550
guardamos cambios si recargamos cargar vemos que nos va a imprimir el 2 el 3 y el 4 si recuerdas en

70
00:07:44,550 --> 00:07:49,120
la anterior presentación vimos que representaba cada uno de estos números.

71
00:07:49,280 --> 00:07:56,000
Sin embargo este código nada más se ejecuta en el 4 que es cuando tenemos ya una respuesta del servidor

72
00:07:56,540 --> 00:08:05,350
por lo normal estos 2 y 3 no se revisan aquí es muy rara la ocasión salvo que quieras comprobar que

73
00:08:05,350 --> 00:08:07,150
la conexión se esté haciendo.

74
00:08:07,300 --> 00:08:15,250
Entonces tendrías que checar regístrate 2 y luego 3 para saber que se envió correctamente antes de finalizar

75
00:08:15,250 --> 00:08:16,450
este ejemplo.

76
00:08:16,770 --> 00:08:25,250
Vamos a darle a equipar contenido nos sacaron una variable igual a document un toque Element Bayardi

77
00:08:26,170 --> 00:08:33,840
y tenemos este Dip con el de contenido abrimos paréntesis si ponemos ahí dentro el contenido después

78
00:08:33,840 --> 00:08:43,120
tendremos contenido punto INER HTML para cambiar el HTML de este dip que de momento no tiene nada igual.

79
00:08:43,140 --> 00:08:44,730
Podemos poner aquí texto anterior

80
00:08:47,550 --> 00:08:57,420
y lo vamos a cambiar por igual a x Acher punto respondés texto y es importante también responsables

81
00:08:57,630 --> 00:09:06,630
registered on revista Change status todos estos deben de llamarse así ya que todos estos existen gracias

82
00:09:06,630 --> 00:09:12,780
a XML HTTP recuestan con esto finalizamos este ejemplo.

83
00:09:12,790 --> 00:09:18,910
Vamos a guardar y a recargar vemos que aquí tenemos texto anterior esto viene de aquí tendí damos clic

84
00:09:19,150 --> 00:09:25,930
y vemos que ahora dice Hola desde un archivo txt y pudiste ver que no tuvimos que recargar nuestra página

85
00:09:26,460 --> 00:09:33,850
nada más damos clic aquí recibimos una respuesta del servidor que comprobamos aquí en el distrito 4

86
00:09:33,850 --> 00:09:41,920
y en el estar 200 y gracias a esta respuesta la estamos enviando a nuestro Dib y estamos actualizando

87
00:09:41,920 --> 00:09:48,480
la información de nuestra página web y aquí hemos hecho nuestro primer ejemplo con Ayax.

88
00:09:48,480 --> 00:09:56,940
En el siguiente vídeo vamos a ver cómo hacerlo utilizando un archivo de PHP que será lo más común que

89
00:09:56,940 --> 00:09:58,380
estaremos implementando.

90
00:09:58,380 --> 00:10:05,910
Esta técnica aplica para cualquier lenguaje sin embargo PHP es el más común para este tipo de proyectos

91
00:10:05,910 --> 00:10:07,700
así que vamos a verlo en el siguiente vídeo.