AJAX empieza con AJAX con una recarga extra a tus aplicaciones web

1. Introducción al AJAX: bienvenido al siguiente nivel off interacción dinámica en tu sitio web usando Ajax. Y si nunca has usado Ajax antes mientras vas a quedarte realmente impresionado con lo que se puede hacer con Ajax, mi nombre es Lawrence y llevo más de 14 años desarrolladora Web. Regularmente desarrollo aplicaciones Web dinámicas, y Ajax es definitivamente una de mis herramientas favoritas para usar para interactuar realmente con el contenido y para crear algún contenido dinámico. Por lo que parchear juntos lenguajes constructores PHP con JavaScript y poder interactuar con ese contenido dinámico realmente hace que un jack de pie además de poder acceder a Jason y archivos de datos y tirar de eso en tu JavaScript se crea ese nuevo nivel de contenido que está disponible dentro de tu archivo JavaScript. Por lo que ya no tienes que conectarte a un archivo fuente de script de trabajo y tirarlo como un objeto. Realmente puedes tener alguna habilidad dinámica para tirar contenido en un formato más legible, que es Jason, y todo esto se hace a través de Ajax. Y dentro de este curso, voy a estar compartiendo mis conocimientos de Ajax con ustedes iban a estar construyendo varias aplicaciones, por lo que estos airen algunos útiles Casos de uso realmente buenos para Ajax. Uno de ellos va a ser este dato de formulario donde podemos hacer una comprobación para ver si este nombre ya está tomado dentro del servidor. Y si no lo es, vamos a poder regresar que está disponible. Eso con sólo escribirlo. Probablemente ya has visto este tipo de formatos antes, y este es Ajax Eso está trabajando aquí. Un oleaje como sacar todos estos datos de Jason. Entonces cosas realmente, verdaderamente increíbles que puedes hacer con Ajax. Por lo que hemos configurado un servidor zam con el fin de alojar nuestros archivos PHP. Entonces tenemos eso corriendo aquí en segundo plano. Si no estás familiarizado con la configuración de un host local, sí tenemos curso adicional que te proporcionará información sobre cómo configurar el host local. Pero no va a ser absolutamente necesario para que practiques Ajax y porque esto va a ser javascript y no necesariamente necesitas conocer PHP tampoco para este curso, porque vamos a estar descubriendo algunos aspecto básico y en realidad puedes simplemente crear un archivo de texto con la respuesta que quieras? Por supuesto, no será dinámico porque la habilidad dinámica realmente lo ha hecho aquí dentro del código PHP. Cuando nos estamos conectando a través del Ajax, pero puedes trabajar con él y eso no necesariamente configuras un host local, tampoco. También vamos a estar brindando todos los enlaces y recursos que tenemos disponibles que estamos utilizando a lo largo de este curso dentro de la sección de recursos de este curso. Por lo que se anima que sí Echa un vistazo y sí descarga esa información. Si no tienes editor de texto, tenemos un listado de algunos grandes editores de texto de código abierto que están disponibles en línea que también puedes descargar. Te doy la bienvenida a nuestro curso de Ajax y empecemos. 2. Qué cubrimos en este curso: bienvenidos a nuestro curso Ajax. Por lo que Ajax es la abreviatura de JavaScript asincrónico y XML. Dentro de este curso, vamos a estar guiándote a través de cómo crear este tipo de formato donde usamos javascript para revisar el servidor. Por lo que hacemos una cantera Ajax sobre al servidor, trayendo de vuelta una respuesta y salida en esa respuesta dentro de nuestro HTML y lo mejor de Ajax. Y lo más útil es que no necesitas tener actualizaciones de página. Entonces puedes ver aquí que lo que sea en escribir aquí, esto realmente está pasando por encima del servidor, los servidores verificando este valor para asegurarnos de que en realidad no tenemos la matriz configurada, y está comprobando si esto está dentro de su rayo. Y si tiene al menos tres caracteres de largo y si no está en su rayo, eso me dice que el nombre está disponible. Pero si sí escribo un nombre que está dentro de ese ary, me va a decir que sólo tengo que recordar un nombre que se toma. Entonces sí tenemos a Jack eso. Dice que se toma nombre. Eso mismo para John name se toma, pero si hacemos algo una variación de ello esto no está disponible o está disponible porque no está dentro de que se devuelva dentro de esa matriz que estamos usando en nuestro servidor. También vamos a estar guiándote a través de cómo sacarte, usar un archivo Jason y crear contenido en tu página HTML. Entonces aquí tenemos un montón de contenido aquí con construido en un quiz con un montón de preguntas, varias respuestas diferentes y pudimos realmente detectar si las respuestas son correctas o incorrectas. Eso simplemente haciendo clic en él, puedes ver si va bien o mal dentro de nuestro cónsul, te vamos a estar mostrando cómo hacer una variación de esto usando un archivo Jason y tirando esos datos usando Ajax para construir tu página HTML requisitos para este curso son una comprensión básica del HTML. No vamos a estar metiendo mucho en CSS. Vamos a usar botas drop como nuestro mecanismo de estilo, y no tenemos ningún CSS dentro de nada de esto dentro de ninguno de este curso. Y podríamos estar hablando de HTML básico así que recogiendo dibs, pero es esencial que sí lo entiendas. Javascript y trabajando con el amanecer. Entonces más adelante en el curso vamos a estar entrando en J query y cómo usar Ajax en J Query también. Entonces una comprensión básica de J. Consulta una comprensión básica de javascript y Jason. Si nunca antes habías visto a Jason, nunca antes uses a Jason. Va a ser realmente fácil de recoger, así que no me preocuparía por eso. Pero es algo que vamos a estar incluyendo dentro de este curso es, Bueno, Bueno, vamos a estar corriendo a través de Jason y trayendo eso en ese archivo Jason como un archivo de datos nuestro dentro de nuestra adición de documento html. También vamos a incluir todos los archivos fuente que vamos a estar usando a lo largo del curso s para que puedas verlos aquí en la parte superior de mi página. Aquí s así vamos a estar incluyendo todos estos archivos fuente. Por lo que vas a poder descargarlos y trabajar con ellos por tu cuenta y probar el código. Por lo que es realmente importante practicar el código para familiarizarse realmente con él y poder trabajar mejor con él y personalizarlo. Teoh, traje. cuales sean tus requisitos para Ajax, así que siempre que estés listo para comenzar Empecemos. Abre tu editor de texto favorito. Y de nuevo, si no tienes editor de texto, tenemos todo un montón de código abierto descargables que están disponibles dentro de la sección de recursos de este curso. 3. Qué es AJAX: bienvenidos a nuestro curso de Ajax, y dentro de este curso, vamos a estar caminando por lo que es Ajax y cómo usarlo. Por lo que Ajax no es un lenguaje de programación, pero es un estándar que se acostumbra con el fin de comunicarse desde el servidor a la página Web . Por lo que sin recargar contenido en el sitio web, realidad eres capaz de obtener resultados dinámicos. Y entonces qué, dentro de este ejemplo, lo que estamos viendo en este momento, Así que estamos escribiendo un nombre y esta es una simulación de si quieres comprobar si ya existe un nombre de usuario y podemos ver aquí que si sí le pegamos a un usuario nombre que existe dentro del sistema, dice nombre se toma, también tenemos la capacidad de presionar el botón para hacer que el cheque esté bien. Pero acabamos de hacer la función key up aquí dentro de Javascript, donde cada vez que estás escribiendo y la clave arriba, hace que chequear aquí, un oleaje eso se puede trabajar fácilmente esto dentro de un formulario. Y probablemente los veas con bastante frecuencia cada vez que tienes estas formas dinámicas, donde puedes crear un nombre de usuario donde comprueba. Si el nombre de usuario está disponible al ingresar en cualquier contenido que esté haciendo aquí arriba . Por lo que esencialmente Ajax solo te permite tener esta habilidad dinámica para obtener contenido en tu sitio web y cambiarlo Como estás en poner contenido por aquí, te permite cambiarlo también dentro de tu vista. Por lo que trabajar con javascript, esto funciona increíblemente bien en Ajax es la abreviatura de JavaScript asincrónico y XML. Entonces en otro ejemplo, vamos a estar hablando de cómo podemos cargar un archivo Jason completo y crear este quiz dinámico aquí solo usando JavaScript, Ajax y un archivo Jason. Entonces si miras la fuente de esto, ves que realmente no hay ningún tipo de html dentro de aquí. Todo esto está cargado de Jason, y luego tenemos nuestras peticiones aquí, así que vamos a estar pasando por eso también. Dentro de este curso, también caminamos por las diferentes funciones Ajax y JavaScript, y lo único importante para recordar dónde lo más importante para recordar con Ajax es que te permite cambiar contenido en tu sitio sin tener una página, recargar, buscar, descargar archivos externos y o formar envíos o lo que quieras hacer. y le permite obtener una respuesta de un servidor. ¿ Y esto realmente Dios te permite tener mucha habilidad dinámica dentro de tu HTML solo usando JavaScript solo? Acabo de ir al expediente de Jason. Y como pueden ver aquí, este es el archivo Jason que en realidad está creando ese quiz que estamos viendo anteriormente . Y se puede ver que es muy sencillo. Es realmente fácil de usar y este es el estándar que vamos a estar usando. Norma preferida sobre XML. Cada vez es más popular usar Jason sobre XML, pero puedes usar Ajax con XML. Se puede utilizar con Jason así como diferentes fuentes de retorno. Para los datos del servidor, pondría información. Entonces por aquí, esto está usando forma adyacente aquí. Sólo estamos despejando el servidor. Entonces estamos despejando al servidor y estamos comprobando si esta entrada se estaba configurando sobre la información de entrada de aquí al servidor y solo estamos revisando para ver y el servidor está determinando lo que estamos poniendo aquí abajo en la parte inferior 4. Haz un cheque dinámico de formulario con AJAX JavaScript: En la lección anterior, habíamos mirado este formulario Ajax donde se podía ingresar una información y se haría una comprobación dinámica al servidor para comprobar si hay disponibilidad para el nombre. Entonces si cansamos un nombre como John, vemos que el resultado se toma su nombre. También incluimos un botón aquí para comprobar el contenido. Eso Esto es si ampliamos nuestro formulario o si quieres tener algún otro disparador para hacer el cheque Ajax real al servidor s. oh, esto es sólo otro disparador que hace la misma comprobación al servidor. Entonces va a ejecutar esa misma función. Ahora veamos el código y el código aquí abajo para el HTML. Entonces tenemos nuestro JavaScript aquí en la parte superior y básicamente tenemos configurado una función JavaScript y luego tenemos toda nuestra información de Ajax aquí y luego justo aquí abajo , dentro del cuerpo del HTML, hemos consiguió nuestro campo de entrada y todo lo que hemos hecho aquí es que hemos agregado en key up y estamos ejecutando esta función en key up. Entonces cada vez que alguien está interactuando con el campo y ellos sí siguen el ritmo lo hace. Se ejecuta esta función la cual ejecuta un cheque. Y hace que Ajax solicite a nuestro servidor. Por lo que comprueba en nuestro archivo servidor el archivo PHP envía ese valor de nombre ese valor de nombre de usuario desde el campo de entrada hacia el servidor y luego hace una comprobación. Y como mencioné antes de este botón aquí, actualmente no se está utilizando cuando hacemos esta comprobación dinámica en key up. Pero hemos dejado eso aquí dentro de este ejemplo, con el fin de indicar que hay diferentes formas de lanzar este disparador eso También podrías agregar eventos de escucha y otros tipos diferentes de formas de activar esta función. Entonces el proceso es que mientras estés engañando a la función en algún momento o sea que este cheque va a ser necesario, ahí es cuando va a activar esa función. Va a hacer esa llamada al servidor y simplemente empezar a mirar el archivo del servidor rápidamente. Entonces esto no va a ser demasiado profundo en PHP. Lo que tenemos aquí es que sólo tenemos un nombre. Entonces solo estamos haciendo get name y estábamos devolviendo esa información de nombre de usuario a PHP. Entonces podemos usarlo como variable dentro de PHP, y hemos dicho, Ah, Ah, los usuarios son ray eso. También puedes hacer esto de manera diferente. Si tienes una base de datos, podrías hacer una conexión a base de datos para comprobar si el nombre existe yo o lo que quieras hacer para traer ese contenido que quieres revisar tu información existente. Y esto es a lo que nos referimos al interactuar con el servidor. Porque JavaScript mismo no puede interactuar con el servidor. Por lo que sí necesita un lenguaje constructor en segundo plano para hacer la interacción eso, ya sea PHP o si se trata de algún otro lenguaje constructor o si simplemente tienes en archivo de salida. Puedes usar Ajax para interactuar con ese archivo de salida, por lo que realmente no está mirando nada. Es sólo mirar este expediente y comprobar esa información de respuesta. Entonces aunque fuéramos a ir a ese archivo PHP por sí mismo y si hiciéramos algo como nombre es igual a John, regresa de nuevo. Se toma nombre. Si retrocedemos algo por debajo que vemos que el mismo resultado el necesita más tres caracteres, y eso es causa de esta declaración condicional. Eso dentro de PHP solo estamos haciendo una longitud de cadena eso estamos tomando en este valor que recibimos de la variable de solicitud de nombre se tomaron en ese ajuste de valor como una variable llamada nombre. Y luego por aquí estamos haciendo una longitud de cuerda. Estamos comprobando para ver la longitud de este nombre, que sea cual sea la longitud de caracteres que esté disponible dentro de esta variable se va a devolver por aquí. Y si son menos de cuatro, entonces se cumple esta condición y hacemos eco. Necesita más necesita ser más de tres personajes. Y si no se cumple esta condición, se ve en lo demás. Y ahí es donde tenemos un par más. Otra declaración condicional. Eso lo otro. Entonces eso no se cumple. Si son menos de cuatro, pondremos esto. Y si son más de cuatro, vamos a ver esta otra condición aquí y aquí. Sólo estamos haciendo un chequeo para ver si está dentro de su rayo. Por lo que estamos comprobando para ver si el nombre está en la matriz del usuario y si devuelve positivo. Entonces si esta condición otra vez, si esta condición es cierta, va a regresar. Sólo va a hacer eco. Se toma nombre y en caso contrario, si no se toma el nombre, y es mayor que cuatro. Se va a hacer eco El nombre está disponible S O. Esta es nuestra lógica, y tu lógica podría ser diferente dependiendo de lo que intentes lograr con esta forma . Eso solo consiguió asegurarse de que tenga sentido cuando trabajas a través de él. Y si no estás familiarizado con PHP, todo esto es una declaración muy simple, muy simple, muy simple, condicional y echo solo genera esa variable o esa información de cadena en la página Web en el navegador Web. Entonces eso es todo lo que realmente está haciendo aquí, y eso es lo que está haciendo esa función PHP. Y esta es la misma función que estamos llamando desde nuestra forma Ajax. Y vemos aquí que cuando sí ejecutamos esa función Ajax, sí consulta en este archivo de tarifa PHP y devuelve cualquier valor que se esté emitiendo aquí. Entonces vamos a meternos más en el código del formulario, y podemos ver aquí que aquí es donde estamos haciendo que nos estamos abriendo. Estamos haciendo una solicitud get para checar dot PHP y estamos enviando un nombre largo igual a nombre de usuario . Y ese nombre de usuario es el valor de este campo de entrada que hemos recogido por aquí, así que acabamos de llamar nombre de usuario y estamos haciendo consiguió documento, get element by i d user name dot value y eso está devolviendo esto. Cualquiera que sea el valor que esté disponible cuando este campo de entrada, está regresando como esta variable y nos permite usar eso dentro de JavaScript. 5. Configuración de XMLHttpRequest la verificación del navegador de XMLHttpRequest: dentro de esta lección, vamos a entrar más en cómo descomponer esta solicitud de Ajax y qué significa todo esto . Por lo que sí se ve como un poco de codificación para obtener ese resultado. Y sin duda es mucho más fácil hacer esto con Jake preocupación, que también te vamos a mostrar en una lección posterior. Pero es importante entender los fundamentos. Y con JavaScript es un poco más fácil entender lo que realmente está pasando detrás bambalinas y lo que es lo que todo esto significa es importante para entender lo que está pasando entre bastidores. Entonces aquí sí tenemos esta H T h m l o XML. Solicitud Http y lo que estamos haciendo esto es configurar este nuevo H XML. Http request eso Lo que estamos haciendo aquí es que solo estamos haciendo un cheque para ver si esto está disponible. Y si esto no está disponible dentro de la ventana, eso también dentro de este curso es importante. Entender cómo funciona el amanecer. Y si no estás familiarizado con el Dom, aquí es donde todos los elementos HTML se cargan en javascript. Nos permite dedo del pie tener acceso y uso de esos elementos Así que si fuéramos a hacer algo como consola, ventana de registro o documento de ley de consola. Simplemente te voy a mostrar lo que pasa aquí ahora cuando vaya al navegador. Entonces estamos usando nuestra consola aquí. Estamos usando cromo porque realmente no tiene un cónsul bastante bueno, y en realidad podemos hacer esto un poco más grande, por lo que es más fácil de leer. Y así lo que hemos hecho aquí es que acabamos de hacer un registro de consola, y hemos enviado todos los valores de la ventana a la consola para que sea legible para nosotros. Y aquí es donde tenemos todas estas diferentes funciones y variables y valores que son accesibles. Entonces esto es lo que se conoce como el Amanecer porque ahora tenemos acceso a toda esta información. Y para este, lo que estamos haciendo es que estamos haciendo un chequeo para ver si existen solicitudes http de Window XML. Y si existe y básicamente todo lo que significa es que solo está revisando para ver si se trata de un navegador moderno. Y si somos capaces de hacer este tipo de solicitud dentro de este navegador eso aquí sí vemos que sí la tenemos. Sí existe. En realidad existe la solicitud http x XML. Eso Esto se debe a que es un navegador nuevo o un navegador moderno s navegadores antiguos como I e cinco o I E seis Usar X activo en lugar del XML. Http. Solicito, uh, y es por eso que estamos fijando eso aquí abajo. Entonces esto no es realmente necesario para que operemos o ejecutemos que Ajax llamó dentro chrome porque chrome es un navegador moderno. Entonces no, nada de esto es realmente relevante hasta que realmente accedas a él con un nuevo navegador antiguo. Y entonces sí necesitas ese Activex para Ajax para que funcione. Entonces esto es para las versiones anteriores de I e D I E s cinco ie seis y tal vez hasta i siete eso dependiendo de la versión anterior. Por lo que esto se está volviendo cada vez menos relevante, en realidad. Entonces si no estás incluyendo eso y si no estás esperando gente en navegadores más antiguos, entonces realmente no tienes que preocuparte por ello, pero generalmente buenas prácticas solo para incluirlo, si alguien se encuentra en un navegador más antiguo y sí necesitan usar Activex en lugar del valor de solicitud http. Entonces con el amanecer, podemos ver aquí que somos capaces de crear este nuevo objeto y estamos atando esta información del objeto como se llama solicitud Ajax. Por lo que establecemos nuestra variable. Están llamando a petición de Ajax. Y por aquí, estamos usando estas variables, y lo vamos a estar usando bastante a menudo, como se puede ver aquí dentro del código, Uh, que estamos usando esto ahora que lo estamos definiendo como un nuevo objeto de XML. Http, request y voluble de vuelta aquí, podemos ver que sí tenemos alguna información aquí que podemos mirar a través y sí tenemos el nombre de la misma a cadena. Y tenemos alguna otra información aquí está bien, dentro de eso. Perdón, chicos hechos tenían una carga recibida. Y esta es sólo la comunicación entre la diferencia. Http. Solicitar objetos. Eso Esto es lo que se está devolviendo para éste. Y esto nos da la capacidad de hacer esa solicitud desde nuestro navegador actual. Y esto probablemente sea más fácil de entender si sí entiendes trabajar con el amanecer s. Entonces si no estás familiarizado con trabajar con el dom, en realidad sí tenemos un curso que va a repasar todos los diferentes objetos del amanecer y cómo usar el amanecer. Entonces pasando a la siguiente línea. Entonces aquí solo estamos configurando este objeto. Y si no podemos configurar en un navegador moderno, configuramos el objeto usando Activex para navegadores más antiguos. Y eso es todo esto lo que está haciendo esto. Entonces lo que podemos hacer es solo espacio que un poco que s o que entendemos que hemos pasado por eso. Acabamos de montar este objeto que hemos tomado. Lo hemos llamado Ajax solicita. Entonces otra vez, sólo una variable. Puedes llamarlo como quieras. Y entonces aquí solo está configurando esa información de objeto en ese valor. Entonces todo esto es que esto solo significa que somos capaces de intercambiar datos con el servidor usando Ajax. 6. Datos de el formulario AJAX envían send: Entonces vamos a ver el fondo de la solicitud del Ajax. Aquí s así aquí. Tenemos petición Ajax. Entonces de nuevo, usar este objeto en esto es configurar esa comunicación detrás de bambalinas. Entonces estamos haciendo solicitud Ajax y estamos haciendo abierto y qué está haciendo esto. Esto es sólo especificar el método y luego la chica que vamos a estar usando y si es asíncrona Entonces si estamos haciendo verdad, eso significa que estamos haciendo un sincrónico Si estamos haciendo falso, eso significa que estamos haciendo sincrónico. Y la principal diferencia entre lo asincrónico y lo sincrónico es que asíncrono. Cuando esto se establece en verdadero, significa que estamos esperando una función que se va a ejecutar una vez que la respuesta esté lista. Entonces una vez que todo esté listo, entonces vamos a pasar y vamos a ejecutar la función, pero sólo cuando es cuando el evento on ready state change es cierto. Y lo que eso significa es que cuando sí tenemos un valor que se devuelve aquí, entonces somos capaces de completar esto y eso es lo que una secuencia asincrónica y sincrónica. Y en la mayoría de los casos, vas a estar configurándolo como verdadero un sincrónico pero Si lo estás configurando en falso, entonces sí tienes que mantener ese cambio en realidad. Eso es get element by i d resultado en nuestro HTML, deberías hacerlo después de que se haya completado el envío porque ya no se va a ejecutar en una sincrónicamente. Se va a estar ejecutando después, pero de nuevo, generalmente, es mejor mantenerlo como cierto por el hecho de que si sí tienes algún problema o problema conexión, sí lo quieres peso del dedo a través de para cargar que sigan. Si es realmente necesario para ese dedo del pie, trabaja dentro de tu JavaScript. Y la mayoría de las veces cuando estás sentado en función Ajax o cualquier llamada de Jack, va a ser una ness n Shal parte de lo que está pasando en la página web. Por lo que sí quieres ponerlo como verdadero, y siempre es mejor mantenerlo como verdadero. Y luego aquí, por supuesto, tenemos la URL, así que solo estamos enviando todos estos datos. Lo estamos enviando como dentro del archivo PHP que hemos aceptado. Obtengo valor de solicitud, y entonces eso es lo que estamos haciendo aquí. Es que esto que esto nos permite realmente incluir fácilmente ese valor de nombre dentro de Ah get. Y aquí tenemos comprobado nombre PHP igual y luego el valor de nombre de usuario. Entonces de nuevo, la diferencia es entre get y post. La mayoría de las veces, yo dependiendo de cuáles sean tus requisitos nuevamente, es que hay las diferencias entre get y post. Y solo tienes que tener presente el hecho de que get no es tan seguro como pósters así como si estás enviando una gran cantidad de datos, va a ser mucho más difícil enviarlo y conseguir. Entonces sería con post, porque post realmente no tiene limitaciones de tamaño. Depende de la configuración de tu servidor , por supuesto, pero puedes enviar un montón más de datos en post entonces puedes obtener. Y también si no quieres, si no quieres que el archivo se guarde en caché. Y si estás actualizando una base de datos en el servidor algo así, es posible que quieras enviarla como post en lugar de enviarla como get. Pero en este caso, porque ahí tenemos a Ray ahí, y en realidad no va a ser algo que estamos tratando de bloquear para este tutorial . Simplemente lo estamos manteniendo como get, pero de nuevo sí tienes esas opciones para que puedas hacer post. Pero entonces tienes que cambiar el formato de cheque en consecuencia también otra vez, si sí necesitas usar post y si estás enviando datos de formulario cifrados, datos de formulario sensibles, tienes que agregar en ese post valor ahí. Entonces lo que he hecho es que acabo de hacer una actualización rápida aquí y también he agregado en el encabezado de solicitud set que sabemos qué tipo de información de encabezado es. Entonces si tenemos algunos datos de formulario sensibles a los datos del formulario, sabemos qué tipo de contenido y luego aquí abajo en la parte inferior, hemos agregado en donde acabamos de tener la función de envío allí. Hemos agregado en nombre igual y así es como podemos pasar ese nombre de usuario. Entonces si tuvieras valores adicionales aquí, podrías hacer algo como esto, agregando en eso y por ciento Y si tuvieras algo así, podrías agregar valores de nombre adicionales dentro de este tipo de formatos. Por lo que esto ahora enviará también el apellido. Pero esto no va a ser necesario. Dentro de nuestro ejemplo, sólo vamos a mantener eso fuera. Eso Cuando cambié la publicación por aquí, también tuve que cambiar la publicación en el archivo PHP. Y cuando voy a acá y lo refresco, puedo ver que sigue funcionando. Todo sigue funcionando como antes, excepto que estamos usando post. Y ahora cuando lo refresco aquí, ya no somos capaces de obtener el valor del nombre en este archivo PHP. Por lo que solo está devolviendo ese valor predeterminado. Entonces a pesar de que cuando sí vamos por encima de seis personajes o cuatro personajes, ya no funciona porque ya no tenemos eso entrar aquí que solo estamos haciendo post eso otra vez. Si estás usando bases de datos, siempre debes asegurarte de que estás usando post porque no quieres que alguien pueda acceder a tu base de datos y hacer un montón de consultas a esta dirección y poder acceder a ella de esa manera. Siempre es una mejor idea, más segura 7. AJAX request readyState: Entonces en la última lección, hablamos de enviar datos al servidor. Eso Lo que sí necesitamos hacer también incluir en nuestra solicitud Ajax es algo para manejar eso si sí tenemos ah server request y somos capaces de recibir información del servidor y eso es lo que esto está haciendo aquí. Esto es sólo comprobar y recibir esa información y captar esos datos que se están devolviendo del servidor. Entonces por aquí estamos haciendo el aroma de los datos sobre el servidor. Y de nuevo, esto entra en el porqué estamos usando verdadero y asíncrono porque lo estamos buscando para cuando termine de cargarse. Entonces va a no ejecutar la función de cambio de estado listo, y esto es lo que se va a incluir aquí. Entonces si el estado listo es igual a cuatro, cuando el estado es igual a 200 entonces salimos esto. Y lo que significa el cambio de estado listo es que esto realmente almacena esta función y siempre el estado listo cambie, Así que una vez que esto se almacena dentro de JavaScript, así pasa y lee todo esto y dice, De acuerdo, bueno, una vez que esto en realidad esta función de estado listo una vez que realmente sí cambia fueron capaces de ejecutar esta función. Por lo que recuerda eso y sabe que va a ejecutar eso, pero sólo cuando el Estado listo sea cierto. Y además, es importante recordar que cada vez que cambia este estado listo que esto realmente ejecutará esa función. Por lo que siempre que haya un cambio en este estado listo, esta función realmente se ejecutará. Y así cuando vamos por aquí y vemos listo Estado igual a cuatro y estamos revisando el valor de Ready State y ahora que cuando hace igual para fueron capaces de saber que estamos respuesta, que la respuesta ha sido completada y que seamos capaces de obtener nuestros datos. Y es por eso que aquí estaban configurando ese HTML interno a nuestro texto de respuesta. Y de nuevo, esta es la solicitud de información Ajax. Por lo que he agregado en Ah, consola aquí, consola cierre sesión de solicitud Ajax. Sólo para que tengamos una mejor idea de lo que está pasando aquí así de nuevo, una vez que ese estado listo cambie, entonces se va a apagar esta función y ejecutar este código, y parte del código ahora se va a la consola los bloqueos podrán mostrarte lo que es saliendo dentro de estos datos de formulario hasta que haya alguna interacción o hasta que se ejecute la función . En realidad no estamos viendo nada de lo que hay dentro de la consola. Entonces cuando sí ejecuto la función, vemos que sí tenemos esta solicitud HTTP XML y tenemos nuestra información devuelta. Eso aquí, tenemos nuestra respuesta. También tenemos nuestro texto de respuesta aquí. Tenemos la respuesta. Tú eres yo y este es ese estatus que buscamos. Entonces estatus de 200 y tenemos nuestra función estatal lista. Entonces otra vez, esto es otra vez Esta es una función que cada vez que cambia y podemos ver aquí hay información muy mínima aquí. Pero hay un alcance de función ahí y alguna información adicional en la que realmente no vamos a meternos. Pero solo es importante recordar que esta es una función a diferencia de algo como texto de respuesta. Y esto es sólo devolver ese valor de cadena así como texto de estado. Está bien, Eso Esto solo nos da algunos comentarios sobre lo que está pasando con este ex XML http, valor de solicitud y ya vuelve a indicar. Son cuatro. Entonces esto en realidad esta es la razón por la que buscamos un estado listo de cuatro y eso solo significa que sabemos que se ha completado. Y sabemos que el estatus es igual a 200 significa que es un éxito. Entonces si no quieres tenerlo en éxito, si eres servidor está devolviendo algo distinto de algunos valores de estado. Entonces si tienes como un 400 o lo que sea que estés configurando eso dentro del servidor, es posible que quieras mirar diferentes opciones para esto. Un oleaje. Pero sólo estamos viendo un defecto de un éxito aquí y un exitoso, um, estado listo de cuatro. Y eso es todo. Todo lo que significa es nos acaban de devolver, y estamos viendo que hay algunos datos que en realidad están siendo devueltos aquí y otra vez . Esto también podría hacerse realmente personalizado también. Y puedes mirar los diferentes estados, ya sean éxito o fallas y o errores, y puedes generar los datos en consecuencia. Entonces aquí sí tenemos lo que sucede cuando se cumplen estos dos criterios. Entonces cuando el estado listo es igual a cuatro y status igual a 200 vamos a documentar todavía elemento por resultado I D y eso es ah, este elemento y simplemente cambiamos ese HTML interno y estamos cargando de nuevo que Ajax solicita. Entonces esa misma cosa que tenemos en la consola log aquí y tenemos nuestro texto de respuesta. Y así volvemos a salir a nuestra consola. ¿ Ves eso? Lo que estamos haciendo es que estamos cargando esto. La información devuelta necesita tener más de tres caracteres, y esa información devuelta cambiará. Por lo que ahora cuando bajamos, se puede ver cuántas peticiones diferentes se han hecho. Y aquí estamos viendo que las respuestas están cambiando, Así que todas estas deberían estar enviando de vuelta ese status 200. Cuando sí tenemos algún texto de respuesta ahí y otra vez, puedes sacar cualquiera de estos valores y usar pulgar. Entonces si quieres ver cuál es la respuesta que eres, l es si quieres registrar eso o si quieres escribir eso en algún lugar, podrías sacar eso también 8. Revisión de formulario dinámico del AJAX: dentro de esta lección. Simplemente vamos a hacer una revisión rápida fuera del formulario documento el formulario HTML y el JavaScript involucrado en él. Entonces como podemos ver aquí, sí tenemos nuestra forma básica. Lo que está haciendo es consultar al servidor y solo verificar si se están utilizando estos nombres . Y en este momento sólo lo tenemos en clave arriba. Y lo que pasa es que cuando sí tenemos una llave arriba , ejecuta esta función. Entonces es solo un JavaScript simple aquí dentro del campo de entrada s En realidad no estamos usando este botón, pero lo vamos a mantener aquí en también este Este archivo va a estar disponible dentro de los documentos de este curso. Eso Cuando sí nos mantenemos al día, ejecuta la función, y esta es la función. Por lo que hemos configurado esa función aquí como una solicitud Ajax. Estamos recogiendo el valor de nombre de usuario de este campo, así que d nombre de usuario. Estamos recogiendo ese valor haciendo get element by i d dot value para devolver esa información de valor . Y entonces lo que estamos haciendo aquí es que estamos haciendo en http request eso si la ventana sí tiene la capacidad de solicitud http XML. Y luego se va a configurar la solicitud Ajax como una nueva función de solicitud http XML y si no está disponible. Entonces si la ventana no es una ventana moderna o un navegador no moderno, debería decir que la va a configurar como un objeto Activex o Activex. Y así una vez eso estos aire haciendo lo mismo solo dependiendo del navegador es así ahora que hemos configurado solicitud Ajax que va a contener esta información de objeto. Estamos en condiciones de utilizar Ajax Solicitar y checar en Ready State. Y lo que esto va a hacer es cuando el estado cambie, va a saber que va a ejecutar esta función. Se va a comprobar el estado de valor listo. Eso regresaba. Estamos comprobando un valor de estado listo de cuatro, lo que significa que hay datos y está listo y 200 solo significa que el estatus es exitoso. Y a partir de aquí sólo estamos configurando hacer de nuevo. Obtener elemento por i d resultado y eso es justo por aquí. D resultado configurando ese HTML interno a Ajax solicitar texto de respuesta. Entonces estamos usando este objeto de solicitud Ajax y estamos tirando hacia atrás ese texto de respuesta y eso fue lo mismo que estamos mirando en la consola. Entonces básicamente, eso es llenar ese inter html con los valores que se devuelven de ahí y luego seguir adelante. Sólo estamos haciendo eso. Estamos usando post ahora, eso antes de que estemos usando get y estamos enviando el valor sobre y get. Pero dentro de éste, hemos actualizado para publicar. Por lo que esto es más seguro de nuevo porque estamos enviando datos del formulario que tuvimos que pasar en esta solicitud Encabezados. Y por aquí tenemos cheque. Entonces esto es solo que tú, Earl o en la ubicación de ese archivo de servidor con el que estás buscando interactuar y para enviar los datos a lo otra vez, no necesariamente tiene que ser archivo PHP ni cualquier otra cosa. Podría ser literalmente cualquier tipo de archivo. Y lo que sea que sea la salida en ese archivo, solo va a salir dentro de ese campo aquí esencialmente, eso es todo lo que esta función realmente está haciendo. Pero nosotros porque sí tenemos algún código de servidor aquí, somos capaces de hacerlo más dinámico, por lo que no sólo estaría devolviendo un conjunto de valores. Está devolviendo algo que vio escrito aquí y luego el Por último aquí estamos haciendo? Cuando estamos haciendo nuestro envío, tuvimos que enviar sobre Ah, valor de nombre de usuario. Y de nuevo, este nombre de usuario es el valor que está disponible dentro de este campo de entrada. Y todo lo que estamos haciendo es que sólo estamos recogiendo eso aquí en Ajax. Solicitud y nombre de usuario aquí. Documento obtener elemento por i. d usuario llamado Valor. Por lo que también podemos hacer eso aquí abajo. Un oleaje si quisiéramos, pero normalmente es mejor solo romper eso y usarlo como variable. Y de nuevo, usar get en realidad va a ser más rápido. Pero si tienes muchos datos y si necesitas tener datos seguros, deberías estar usando post y entonces todo lo que tenemos aquí abajo es solo que tenemos nuestro HTML estándar . Entonces esto es solo un campo de entrada, un botón y un diff. Y de nuevo, este sitio, el código para la forma va a estar disponible dentro de los archivos fuente de este curso s. eres bienvenido a descargar eso y trabajar con eso y probar eso 9. Datos JSON como objeto en JavaScript vs. JSON en el archivo JSON con AJAX: en la lección anterior, miramos la carga y la comunicación con un servidor, recuperando algún contenido dinámico usando Ajax. Entonces en esta lección, vamos a hablar de eso también, obteniendo contenido dinámico del servidor. Pero esta vez, ese archivo Ajax en realidad va a construir donde esa conexión Ajax se va a conectar a un archivo Jason, y va a construir todas estas preguntas que tenemos y va a crear dinámicamente esta quiz que nosotros que hemos creado. Entonces todo esto es solo usando Ajax, Jason y Javascript. Entonces ahora vamos a pasar por el código y el código para este documento que HTML va a ser muy sencillo. Todo lo que tenemos es que d iguala salida. En realidad estamos usando botas bootstrap eso. Drop solo nos está permitiendo tener un poco más de estilo y algunas partes más visualmente atractivas a nuestra forma. Por lo que en realidad no es necesario. Entonces si solo saco eso, y si vuelvo a salir al formulario y si lo refresco, va a quedar un poco diferente. Por lo que no es tan estilizado. Y si no estás familiarizado con Bootstrap, sí tenemos otro curso en el que hablamos de bootstrap también. Y realmente sí funciona. Dónde te permite crear contenido. Contenido realmente agradable. Rápidamente. Es ah CSS html marco JavaScript. Eso realmente te ahorra mucho tiempo. Por lo que vale la pena mirar en su le permite un diseño receptivo. Entonces lo que hemos hecho aquí es que acabamos de obtener nuestra salida y aquí nos estamos conectando. Entonces inicialmente lo que hemos hecho en cursos anteriores donde tenemos a nuestro Jason J s. Y luego somos capaces de analizar toda esa información de ese archivo de datos de Jason. Entonces si tenemos algo como Jason Js eso lo que esto es solo configurar un objeto de datos y nos está dando información dentro de ese objeto. Entonces podríamos literalmente simplemente traer esto a nuestro archivo un oleaje, y podríamos analizarlo como Jason. Y cuando hacemos eso, vemos aquí cuando sí cargamos esa página. Entonces tuve por llegar a una NCAA significaba esos, así que solo voy a refrescar eso en la consola. Y esto es sólo con fines de demostración. Este no es en realidad el archivo Jason que vamos a estar usando, pero se puede ver aquí que unp arsed solo No es un formato realmente utilizable para los objetos, pero cuando lo analizamos, vemos que sí se convierte en un formato utilizable para los objetos eran capaz de pasar por estos diferentes objetos. Somos capaces de escoger algo como contenido y encabezado de contenido y pudimos construir toda esta información en HTML Page eso Acabamos de obtener un ejemplo de eso aquí donde si queremos construir, conseguir Jason Page, podemos ver ahora que hemos traído esto como objeto y podemos ir a página, podemos ver Página Principal s Oh, esto va a ser Jason dot pages van a igualar página principal. Y cuando refresque eso le conviene, deberíamos ver que dentro de nuestro cónsul log aquí que sí tenemos página media. Entonces lo que está haciendo es que se coloca esto todo esto, algunos datos de tipo Jason como un objeto y lo convierte en un objeto utilizable dentro de javascript. Y cuando voy a un sitio como Jason Lint, se puede ver que no va a funcionar muy bien porque todavía tenemos esos datos variables esto sigue siendo un archivo JavaScript, y cuando sí copio este código y me paso a Jason Lint, vamos a conseguir algunos errores aquí. Y eso es porque estamos definiendo este valor de Jason. Entonces si tuviéramos que eliminar los datos de la variable VAR, podríamos simplemente hacer eso estableciendo así. Y cuando validamos, sí se hace válido, Jason. Pero el problema es que si fuera a copiar y pegar esto así, en realidad no lo hace. Ya no es un archivo JavaScript legible. Entonces ahora si lo fuera, vuelve a ese host local para ver que voy a obtener algunos errores aquí porque ya no es legible este archivo dentro de JavaScript porque no lo está configurando como un objeto o un objeto legible. Entonces, en realidad tengo que volver atrás y formateado de esta manera porque recuerda, esto sigue siendo un archivo de script Java y lo que hace que esto realmente no sea la forma más ideal de conseguir el código en la página. Entonces aunque funcionará, no es la forma más ideal de usar un dato de Jason Jason en tu propia página porque solo estás estableciendo un valor y un objeto y estás trabajando a través de él de esa manera. Entonces solo vamos a comentar todo eso porque no vamos a necesitar realmente trabajo con eso. Sólo voy a sacar todo eso del archivo, y en realidad vamos a trabajar con nuestro Jason, nuestro quiz, nuestro quiz, el archivo de Jason. Entonces eso también se va a ubicar en su servidor. Puedes ver aquí cuando vas al quiz dot Jason, ese es un formato muy legible. Y si realmente fuera a sacar todo eso y si se lo llevo a la pelusa de Jason y lo valido, sí vuelve es válido, Jason. Entonces esta es una buena soy buena manera de trabajar con Jason, Pero vamos a tener que usar Ajax para tirar de este Jason Data con el fin de que sea utilizable dentro de JavaScript. Entonces te vamos a estar mostrando cómo hacer eso en las próximas lecciones. 10. AJAX y listo: por lo que inicialmente podrías estar mirando esto y pensando Bueno, ya sabes que esto es muy diferente a la forma en la que realmente hicimos esta solicitud. Habíamos enviado algunos datos y en la clave hacia arriba, preguntamos al servidor, pero en realidad no es tan diferente. Seguimos haciendo esa solicitud Ajax, y todo lo que estamos haciendo es siempre que se inicie la página o el sitio web, solo estamos llamando a esta función. Y esencialmente, eso es todo lo que tenemos aquí dentro. Tenemos a Onley este HTML configurado para hacerlo. Este es nuestro esencialmente o contenedor nuestro contenedor de salida, donde a través de JavaScript debilita html de salida dentro de este contenedor y luego dentro de las etiquetas de script. Lo que tenemos es que solo estamos llamando a esta función. Y ahora aquí es donde el Ajax realmente carga la página. Entonces no vamos a estar esperando, um, por um, nada ningún tipo de gatillo a la disfunción raj. Quieres que la disfunción se ejecute de inmediato y poblar toda esa información del archivo Jason justo en nuestro html para que el para el espectador pueda verla en el navegador. Y en realidad no tenemos que enviar ninguna información porque esto otra vez. Este es un archivo Jason que estamos recogiendo y estamos tirando de nuevo a nuestro JavaScript con el fin de usarlo y construir esa página html. Y por eso vamos a estar pasando en las lecciones posteriores. Cómo estamos construyendo esto enter html y cómo están haciendo eso y también algunas opciones adicionales que podemos agregar a este quiz eso por ahora qué estamos haciendo aquí. Simplemente estamos conectando salida para obtener elemento por salida i d. Entonces otra vez, si no estás familiarizado con el amanecer, sí tenemos otro curso que te guiará por cómo usar el dom y cómo funciona todo dentro del dom. Pero para esta lección, solo es importante entender que estamos configurando esta variable. Y aquí es donde vamos a salir. Son contenidos, son cada HTML Así que sólo estamos usando eso aquí abajo más adelante. Y todo esto está haciendo es que esto está poblando este div con este html interno y aquí es donde simplemente estamos buceando y construyendo ese html y luego también justo como lo que hicimos antes en la forma estaban estableciendo variable que vamos a usar los nuestros son objeto. Por lo que de nuevo, lo teníamos llamado Ajax Request. Aquí, aquí. Acabamos de llamarlo Ajax. Pero de nuevo, podrías nombrarlo lo que quieras, siempre y cuando así tenga sentido. Siempre que estás leyendo a través del frío, así que puedes atarlo de nuevo a Ok, bueno, esto era Ajax, y esto es lo que yo estaba haciendo más mi solicitud Ajax. Y luego mucho como lo que teníamos en la forma aquí. Hemos buscado esas funciones de solicitud XML HDP p. Y si eso está disponible dentro de esa ventana, por lo que está disponible dentro del navegador, se va a ejecutar. Entonces para todos los navegadores modernos, este valor va a ser cierto. Y si es cierto, entonces se cumple esta condición y Ajax es igual a nuevo XML. Http, método de solicitud y va a traer toda esa información como objeto. Y aquí si no es cierto, Así que si no es un navegador moderno y si esto no está disponible, va a tratar de hacer un objeto X activo, y esto debería volver a tapar, como explicamos antes yo e cinco y yo e seis. Y esto es configurar esa funcionalidad básica de Ajax. Y después de eso, estamos listos para ir con la llamada de tomas que vamos a estar caminando en la siguiente lección. 11. Conexión de archivos AJAX JSON: por lo que siguiendo lo que hicimos en la última sección donde configuramos el formulario tenemos nuestro siguiente lo tenemos Así que hemos configurado y revisamos nuestro navegador para ver qué versión es y cómo cargamos en el objeto información sobre nomenclatura en Ajax. Entonces este, es un poco diferente. Acabamos de llamarlo Ajax. Y así aquí estamos haciendo Ajax punto abierto y otra vez, lo mismo que estábamos haciendo aquí abajo. Eso otra vez. El orden no importa tanto. Eso hemos movido eso en función de estado listo debajo eso aquí lo acabamos de tener arriba. Pero de nuevo, eso no va a importar realmente porque siempre y cuando lo sepa siempre que cambie el estado que va a ejecutar esta función. Y así ponemos esto en realidad por debajo porque queremos querer repasar primero este contenido y luego repasar la información de cambio de estado listo. Eso de nuevo solo estamos usando get porque este archivo Jason, es es que está disponible en línea de todos modos. Eso si acabamos de ir a es punto Jason quizá podamos ver ese expediente de Jason Así que no nos preocupa la seguridad como estábamos con la forma en la última. Entonces solo estamos usando get y otra vez, queremos usar esa asíncrona. Por lo que queremos que todos los archivos del dedo del pie bajen primero. Y luego cuando esté listo, va a hacer thes para crear esa salida. Y luego además de la abierta, tenemos cabecera de solicitud de set. Tanto como de nuevo en el formulario donde habíamos establecido esa forma datos de tipo codificado Earl. Entonces el tipo de contenido esta vez el tipo de contenido que estamos haciendo es aplicación, Jason y otra vez, estamos configurando eso cierto mucho como lo hicimos en la forma o por defecto. Habría sido cierto. Eso aquí solo estamos enviando ese encabezado de solicitud de conjunto de solicitudes, Y esto nos permite configurarnos para recibir ese Jason Data y luego aquí, que vas a recorrer en la siguiente lección va a ser el Ajax sobre cambio de estado listo . Entonces de nuevo, está buscando ese estado listo. Y cuando esté listo, va a correr y ejecutar todo ese código ahí. Y luego por último, aquí acabamos de tener Ajax dot send y eso. No hay información que estemos enviando. No hay valores que eso acaba de colocar nulo ahí dentro. Puedes dejarlo en blanco o simplemente podrías cotizarlo. O podrías ponerlo todo ahí si quieres. Y luego por último, tengo este punto de salida unidad inter html acaba de conseguir hallazgo. Y si hacemos una actualización rápida, es posible que veas que hallazgo aparece ahí arriba por un breve segundo. Eso Esto es si estamos teniendo algunos problemas realmente consiguiendo esa página o conectándonos a ese trabajo. Archivo Jason. Queremos tener ese hallazgo ahí o algún tipo de spinner ahí para que el usuario sepa que hay algunos datos cargándonos. No queremos que vengan aquí y vean mientras hay una página en blanco eso ¿qué significa eso Tarifa? Entonces en caso de que el archivo Jason no se cargue, por la razón que sea, no podemos acceder a eso. Nosotros sí queremos tener algo para que el usuario pueda ver cuando sí vienen a esa página Web y digan: OK, bueno, bueno, ahora todavía está encontrando ese archivo. Entonces esto es solo un mensaje para el usuario. Pero lo que está pasando aquí y luego por último disfunción, vamos a estar implementando esto más tarde. Y esto todo lo que esto está haciendo es esto comprobando si mis respuestas airen bien o mal y simplemente poniendo esa respuesta en la consola. Y por supuesto, podrías trabajar a través de esto y crear tus propias no respuestas aquí dentro de estas preguntas. Entonces en la siguiente lección vamos a estar trabajando a través de cómo estamos usando a Jason, y estamos analizando a Jason, como lo que hicimos aquí al principio. Y entonces esto es analizarlo en un formato utilizable que luego podemos sacar del código HTML y construir nuestro durazno HTML. 12. Datos de texto de respuesta AJAX: por lo que de nuevo, igual que lo que hicimos informó html Estamos buscando esto sobre cambio de estado, este cambio de estado listo. Y una vez que cambia el estado, buscamos un estado de cuatro y un estatus de 200. Entonces esto significa que toda esa información Jason que el archivo Jason ha cargado, por lo que quiz dot Jason ha cargado. Y si esta condición es cierta, y si tenemos los datos ahí sentados ahora, podemos usar esos datos y eso es lo que estamos haciendo. Dentro de esta lección, hablaremos de eso, y vamos a hablar a través de todo el frío de JavaScript diferente que hemos entrado aquí. Por lo que mucho de esto es simplemente estilizar esa salida eso todo lo que realmente estamos mirando inicialmente va a ser este texto de respuesta Ajax. Entonces, de nuevo, lo mismo que volvimos aquí, donde obtuvimos un texto de respuesta, acabamos de colocarlo dentro del html interno. Y eso fue sólo un texto muy sencillo que venía de aquí, donde en realidad tengo algo más complejo porque estamos usando un archivo Jason. Entonces tenemos que analizar el Jason como lo que hicimos aquí analizaría hoy y lo convirtió en un formato utilizable, colocándolo como un objeto de datos. Y de nuevo, esto es sólo un nombre de variable. Puedes llamarlo como quieras. Eso acaba de llamar a un dato para realmente simplificar el punto de que se trata de datos que hemos recibido de Jason eso aquí. Tenemos nuestra salida en nuestro HTML. Por lo que solo estamos despejando cualquier entrada que pudiera estar ahí en caso de que queramos cargar múltiples preguntas. Múltiples cuestionarios. Eso podría dar el uso de capacidad para hacer eso. Muy usualmente podemos establecer eso a través del envío de diferentes archivos o fuentes Jason o lo que queramos hacer. Eso esto sólo aclara que Inter html Y yo iba a poco comunes thes los registros de consola y así se puede ver lo que en realidad se está respondiendo. Entonces va a hacer, um, un quiz de datos, contenido y un nombre de datos, porque si miramos hacia atrás el archivo Jason, sí tenemos dos objetos diferentes aquí, Así que tenemos nombre. Entonces el nombre de ello es mi quiz, yo y luego contenido de quiz. Y este es todo el contenido que está disponible dentro de este quiz. Entonces otra vez, muchas formas diferentes de formatear esto y darle estilo a este eso quería todo el contenido del quiz en una sola página. Si quieres de nuevo todas las preguntas en páginas separadas, un montón de diferentes formas de formatear el archivo Jason y luego poder leer un a través en tu JavaScript y emitirlo como html eso aquí. Sólo estamos poniendo en ese contenido del quiz y estamos obteniendo ese nombre de datos. Por lo que estamos tomando en analizar el texto de respuesta. Y aquí es donde en realidad sólo iba a meterme en más trabajar con información de Jason y archivo de Jason más allá del Ajax porque una vez que hemos completado aquí, en realidad hemos completado nuestro proceso Ajax y hemos recibido de vuelta esta información del servidor, y ahora solo es cuestión de trabajar con él y conseguir que se vea como la forma en que queríamos lucir. Entonces cuando refresco la página, puedes ver aquí que me devuelven ese nombre del quiz. Entonces esto otra vez, esto viene de ese nombre Ajax o ese nombre Jason y luego regresamos objeto, objeto, objeto. Y aquí podemos ver que tenemos un objeto, pero está conteniendo las cuatro preguntas como objetos separados. Y entonces también tenemos las respuestas como objetos. Entonces tenemos en objeto dentro de un objeto dentro de los objetos. Y entonces aquí acabamos de tener la respuesta correcta va a ser una. Estamos pasando por un valor de imagen y valor de pregunta. Y de nuevo, la razón para trabajar con el archivo Jason Simplemente hace que sea mucho más simple y fácil leer, a diferencia de lo que estamos viendo antes, cuando teníamos ese archivo Js y todo estaba un poco crujido juntos y no pudimos hacer cambios fácilmente. Entonces aquí, por ejemplo, si quisiéramos agregar preguntas adicionales, va a ser realmente tan simple como simplemente darle otro valor clave y luego darle otro valor asociado. Y ahora, cuando lo refresque, debería tener la pregunta número cinco y así sucesivamente y demás. Así que literalmente podría agregar tantas preguntas como quiera, siempre y cuando tenga diferentes valores clave aquí, y pueda hacer que cualquiera de estas sea correcta, simplemente cambiando ese valor correcto ahí y luego aquí puedo cambiar esa actualización, ese texto de pregunta, y esto es todo lo que acaba de obtener salida aquí texto de pregunta. Entonces ahora que hemos sacado los datos y tenemos usando contenido de quiz, notamos que en el contenido del quiz están los cuatro objetos diferentes y son todos y son todas las diferentes preguntas que tenemos disponibles. Ahora. En este punto, podemos comenzar a trabajar con nuestro texto de respuesta, y de eso estamos hablando en la siguiente lección, simplemente dando vueltas y trabajando con él. Y en cuanto al Ajax, esto va a ser la culminación de lo que necesitamos hablar para Ajax. Porque después de este punto, sólo estamos Hemos analizado ese archivo Jason y con analizado en datos, y ahora solo podemos trabajar con él como un objeto en JavaScript. 13. Creación el innerHTML desde el archivo JSON: Entonces en la última lección, miramos cómo podemos sacar esos datos de ese archivo Jason y colocarlos como un objeto JavaScript. Entonces ahora lo que estamos haciendo aquí es que sólo vamos a recorrer el contenido del cuestionario de datos. Y si recuerdas del último, solo va a recorrer estos elementos que están disponibles dentro de ese objeto. Y de nuevo, si tuviéramos que sumar, si vamos al archivo Jason Y si fuéramos a añadir preguntas adicionales, realmente podemos hacerlo fácilmente. Pregunta cinco. Y yo sólo voy a mantener todo eso igual. En realidad, a lo mejor sólo voy a quitar esos sí se ven un poco diferentes. Y cuando lo refresque, voy a tener todos diferentes Los cinco objetos ahora. Y se podría ver que ahora se ha agregado la Pregunta cinco mientras salimos poniéndola a través . Y en realidad había quitado en esa consola así que no somos capaces de realmente verlo dentro la consola. Pero el contenido del cuestionario sería el mismo. Por lo que todo esto fue este bucle a través. Por lo que estamos buceando a través del objeto en el contenido del quiz de datos y vamos a mirar a través de todos los elementos disponibles en el contenido del quiz. Eso el 1er 1 Una vez que iniciamos el bucle, solo estamos configurando nuestra salida. Ingresa HTML. Entonces de nuevo, aquí habíamos despejado nuestro HTML interno y hay muchas maneras diferentes de hacerlo. Podrías construir eso como una variable y luego publicarlo como enter html aquí en la parte inferior para que no tuvieras que hacer todo esto agregando o podrías subirlo. Es un montón de maneras diferentes de ir, pero para esta lección, solo queremos mantener todo realmente simple y legible. Entonces todo lo que estamos haciendo aquí salida entrar html, estamos agregando o un contenido pendiente en él. Por lo que estamos haciendo lo que sea este insertado externo en HTML es igual. Dos estaban haciendo plus igual dip. Entonces sólo sumamos en ese divot, la parte superior y luego aquí estaban cerrando que hizo eso. Habíamos creado aquí así de nuevo, diferentes formas de hacerlo. Pero esto es solo por legibilidad. Con el fin de trabajar con el contenido JavaScript eso otra vez inter html. Y aquí en realidad estamos agarrando ese objeto de contenido de quiz y estamos agarrando pregunta. Entonces, cualquiera que sea el objeto de valor sea tan 01234 porque aquí tenemos cinco preguntas diferentes. Eso, sea cual sea ese valor, va a devolver ese valor ahí y va a preguntar y obtener una respuesta sobre la pregunta . Y de nuevo, la pregunta es correcta, aquí s así que este es el valor clave. Es sólo texto de pregunta, como es tirar hacia atrás esos valores. Por lo que solo hago una actualización rápida y se puede ver cuando sí refresco la página, esto debe ser cuestionado. Texto uno actualizado Solo para mostrarte la relación ahí, y todo lo que estamos haciendo es solo lo estamos colocando en envejecido para etiquetar HTML y colocando ese valor de retorno en su. También podemos hacer algo así como respuestas de registro de consola porque de nuevo, recuerda, teníamos un montón de respuestas posibles, y esto, nuevo es dinámico. Entonces cambia algunas preguntas a las cinco respuestas. Algunos tenían tres. Algunos tenían 642 Así que creo que cubrimos todos los diferentes valores ahí. Pero sí, las posibilidades son infinitas. Podrías agregar respuestas adicionales o posibles respuestas si quisieras. Dentro de ese quiz, y todo lo que estamos haciendo aquí es simplemente hacer, um, estamos tomando eso al configurarlo como una variable llamada respuesta correcta. Ahí sólo cónsul registrando que en este momento para que puedas tener una mejor idea de lo que estamos listando aquí. Y estamos escuchando por cada objeto. Estamos listando todas las respuestas que están disponibles ahí dentro de la consola ahí. Entonces eso es lo que acabamos de hacer ahí con la consola. Y de nuevo, estamos recogiendo este valor de correcto al igual que hicimos con pregunta. Pero sólo estamos recogiendo correcto. Y cuando volvemos al expediente Jason, vemos que cada uno de estos tiene correcto. Y cualquier pregunta que vaya a ser correcta va a ser la que sea devuelta. Correcto. Entonces esto no va a ser como la matriz donde sólo estamos mirando esos valores estaban mirando 123 45 Y ese va a ser el valor de retorno. Entonces estamos viendo si tiene un valor fuera de uno, ese va a ser el valor correcto. Entonces solo configurando eso como una variable llamada respuesta correcta. Y aquí tenemos cuenta de inicio porque hicimos una cuenta a través de todas las diferentes respuestas y otra vez, estamos empezando con cero, y estamos sumando una a ella s así podríamos haber empezado con una y hecho esa adición aquí más bajo ya que volvimos a recorrer por él, dependiendo de cómo quieras hacer eso. Pero sólo por el bien de legibilidad aquí, lo estamos poniendo en cero, y vamos a incrementarlo aquí a uno. Eso se puso bien. Entonces esto va a ser solo grabando cuántas respuestas estaban consiguiendo bien, y va a empezar en cero. Entonces tal vez podríamos realmente sacar a éste de este espacio porque no queremos tener que actuar necesariamente. Mira a través de eso. Y esto sólo iba a ser un general, tal vez un marcador o algo así. Como quieras llamarlo. Perdón. No, eso fue en realidad no era el marcador. Entonces si queremos hacer un marcador, tendríamos que mantenerlo fuera del bucle. Pero la razón por la que tenemos justo ahí es que estamos estableciendo ese valor que estamos pasando a la función mi respuesta. Y luego desde aquí, estamos revisando para asegurarnos si es si es correcto. Entonces, ¿es por eso que en realidad estamos estableciendo? ¿ Tienes razón? 21 o cero. Entonces solo un valor booleano y lo que estamos haciendo aquí. Estamos revisando para ver si la respuesta correcta. Por lo que de correcto es igual a que empezar conteo. Y si lo hace, los valores podrían ser uno. Si no lo hace, va a ser cero. Entonces si mi respuesta es un valor de uno que estamos pasando, solo es cuestión de solo comprobar si ese booleano existe. Y si existe, entonces sí la respuesta correcta. Y si no existe, si falla o falso retorno sólo haría una respuesta equivocada s. oh, perdón. Ese fue mi error. En realidad no fue el puntaje eso lo que se podría trabajar en la mi respuesta allí abajo. Y luego justo debajo de eso, tenemos de nuevo el html interno de salida. Entonces estamos configurando ese HTML interno. Tenemos algunas clases de caída de botas aquí para efectos más, más elaborados. Y también estamos configurando estas respuestas. Um, así que otra opción aquí para peinar podrías También, si quieres atarlo, si estás usando Jake preocupación, es un poco más fácil empatar en una clase eso, a diferencia de solo javascript nosotros tendría dedo del pie bucle a través, pero estamos configurando estos dinámicamente eso. No podemos simplemente recorrerlo porque este contenido no está realmente cargado. Y cuando hagamos el evento, así lo podríamos recogerlo en ah, botón, botón, click y correr a través de esos valores si establecemos de valor ahí o podríamos hacerlo como, como hemos hecho aquí en click Eso esto para este circunstancia, esto es probablemente ese uso, manera más fácil de ir. Pero de nuevo, si estás usando J Query, hay otras formas de establecer eso. Y todo tiene que ver con el oyente eventos eso con. Si solo estamos usando on click, no tenemos que poner realmente a los oyentes, y eso nos ahorra un poco, acuerdo Ellos están pasando por eso. Entonces todo lo que estamos haciendo HTML interno en la salida. Entonces otra vez, salida aquí elemento por i d Así que dentro de aquí solo está agregando en este código HTML que está agregando en tipo de botón es un montón de clases de botón ahí en click, y aquí es donde está enviando más que obtuvo tasa valor. Entonces es uno o cero, y uno es para correcto. Cero es para incorrecto. Y entonces aquí solo está buceando a través de todas las diferentes respuestas que están disponibles. Entonces otra vez, si bajamos aquí y IHS así que iba a cambiar eso para que puedas ver que en realidad estaban buceando a través del texto que está disponible. Hay o podría parecer que sólo estamos buceando a través, pero no, realidad estamos sacando esa información de Jason y estábamos fuera poniéndola encima del botón como HTML Zwerg, dándole un valor ahí. Entonces volver a eso s para que eso es lo que esto está haciendo es solo hacer lo mismo que hizo aquí con las respuestas. Pero aquí, nos está dando Qué respuesta se está devolviendo. Entonces consulado cerramos sesión aquellos que consolamos bailarines de lago, sin embargo ahí está. Entonces lo que estamos haciendo es que sólo estamos tomando esto una re de objetos y sólo los estamos enumerando . Entonces aquí acabamos de tener todas las diferentes respuestas que están disponibles aquí. Y hicimos click hacia abajo. Podríamos ver, ya sabes, contestar. responde el 1er valor 1. Uno. Si abrimos éste, podemos ver que ahí están disponibles los diferentes valores y podemos ver qué se está devolviendo en los botones. Un oleaje. Entonces aquí tenemos el primer objeto. Este es, uh éste es el correcto, y podemos ver que los sitios de maíz de texto. Y luego, por último, ¿qué estaban haciendo? Estamos cerrando ese div que abrimos al principio, y esto completa nuestra compilación de ese código HTML que estamos colocando dentro de la salida. Y este es el código completado que obtiene salida aquí. Entonces lo que hace es bucles por aquí, bucles a través de todo el botón que están disponibles y luego continúa al siguiente ítem, bucles a través de esos labios hasta los botones al siguiente sueltos a través de esos botones y así sucesivamente. Y así, hasta que llegue al final del archivo y es por eso que este lado formato Jason es mucho mejor y más fácil de usar porque éste, cualquiera puede entrar aquí y decir: Vale, Vale, bueno, ya sabes, quiero construir un quiz. Tendré que hacer listar mi pregunta. Tengo imágenes aquí también, así que si quieres colocar imágenes, fácilmente podrías tirar hacia atrás una fuente de una imagen aquí, colocarla en el HTML interno y tener las imágenes actualizadas también. Y si tuvieras múltiples respuestas, eso algunas preguntas podrían tener una o dos respuestas. Algunos tienen cinco, y esto realmente hace un formato dinámico, dinámico para crear este tipo de cuestionarios 14. Resumen de preguntas JSON AJAX: Entonces solo para terminar de lo que estamos hablando en la última lección donde estamos construyendo, ese Inter html. Entonces básicamente acumula todo este código, y luego lo que hace es colocarlo dentro de esa salida. Div. Y ahí es donde obtenemos esta funcionalidad. Eso también habíamos agregado en Click my answer. Entonces cada vez que se hace clic, enviamos mi respuesta y cualquier valor que hayamos podido recoger aquí dentro este bucle. Entonces siempre que sea igual, va a ser uno. Si no es igual, va a ser cero. Entonces ese valor va a ser colocado aquí dentro de la función y enviado a mi respuesta, recogido como e y leído en I d. Mi respuesta es igual a Epara que también pudiera hacer algo así como solo e. para que también pudiera hacer algo así como solo e recogido como e y leído en I d. Mi respuesta es igual a Epara que también pudiera hacer algo así como solo e. debería funcionar también. Entonces ahora cuando lo refresco, mira la consola tanto vemos que todavía estamos recibiendo esas respuestas correctas y respuestas equivocadas. Y siempre, cuando estés trabajando con JavaScript, intenta reducir tanto como sea posible la configuración y el código de la variable. En ocasiones si quieres poder documentarlo mejor. Es buena idea incluir esas variables, pero para este ejemplo, porque realmente no necesitábamos eso, eso fue sólo un paso agregado. No necesitamos eso. Si es uno, va a aparecer. Si no lo es, si es cero va a hacer respuesta equivocada y luego aquí, yendo más allá, podrías construir alguna funcionalidad adicional, como hemos mencionado anteriormente. Si tuviste una anotación, quieres anotar. ¿ Cuántas respuestas correctas desea desactivar? Se quiere ocultar esa pregunta una vez que haya sido respondida. Eso también se puede hacer, dentro de ese JavaScript y dentro de esta mi función de respuesta. 15. JQuery AJAX introducción: en el apartado anterior. Habíamos hablado de formularios y sólo haciendo este tipo de formulario verifica solo para ver si esos valores se encuentran al aire disponibles dentro de Honore o podrían ser utilizados para una base de datos en línea. Entonces aunque esto se ve bastante similar aquí dentro, vamos a estar usando J Query, y hay muchos beneficios para usar en J. Corey. Me encanta usar J Query, porque realmente hace las cosas mucho más fáciles. Entonces a diferencia de nuestro código Ajax que teníamos que usar para JavaScript. Nos fijamos en el código J. Corey, y es mucho más simple eso aunque no lo estamos haciendo exactamente donde realmente no estamos enviando ese valor todavía. Te vamos a mostrar cómo hacer eso en las próximas lecciones. Pero por ahora, lo que estamos haciendo es que acabamos de montar, agregó la Biblioteca Jaqui. Y si no estás familiarizado con Jake Worry, sí tenemos otro curso que brinda información sobre Jake Worry eso también, justo aquí abajo. Tenemos ese campo de entrada, lo mismo que teníamos aquí abajo. Eliminamos eso en key up y en Click, y solo nos conectamos para agregar esos oyentes y desencadenadores de eventos vía J Query, y es mucho más fácil hacerlo de esa manera también. Y Jake eran realmente que la llamada Ajax se ve una muy, realmente simple ahora eso Por aquí, tenemos tipo botón botón. Entonces es botón. Entonces todo lo mismo. Acabamos de darle un I d. para que podamos conectarnos a ella cuando se haga clic. Y podríamos ejecutar esa función que está disponible. Entonces por defecto, tenemos nuestra función de punto listo de documento s Así que esta es ah J query default. Y de nuevo entra a trabajar con el amanecer. Y cuando el plumón está terminado y listo, todo está cargado y cargado en el dom. Entonces tenemos accesibilidad a todos los diferentes aspectos y objetos que están disponibles dentro de ese documento. Y luego también usar la biblioteca de consultas G nos da un montón de funcionalidad adicional . Entonces con la preocupación de Jake, todo está realmente recortado. Todo lo que estamos haciendo es identificar este elemento, así que sólo estamos usando eso tan similar para conseguir elemento por I d. donde sólo estamos consiguiendo que yo d Lo estamos recogiendo y sólo estamos agregando ese oyente de eventos aquí dentro del J Corey Dom. Entonces cada vez que se haga clic, cada vez que se haga clic en esto d, vamos a correr a través de esta función. Y luego por aquí solo estamos recogiendo ese valor del nombre de usuario y configurándolo en una variable. Y de nuevo, hay diferentes formas de hacer esto. Pero para los efectos de este curso, estamos tratando de mantenerlo realmente simple. Tiene que mi nombre recogiendo el nombre de usuario otra vez, obtener elemento por i d. y recoger ese valor de nombre de usuario y colocarlo en mi nombre. Y entonces esto es todo lo que tenemos que hacer por Ajax. Es mucho más simple de lo que teníamos que hacer antes donde teníamos todas estas líneas de código para Ajax. Todo lo que tenemos que hacer es solo hacer punto Ajax estaban llamando a esa función Ajax en J consulta todo para hacer primero set que eres l Y aquí tenemos que eres más lo mismo que estamos haciendo por aquí, donde estamos poniendo a esa chica y simplemente publicando sobre ese valor que solicitan valor. También tuvimos que actualizar ese archivo PHP para obtener la solicitud get en lugar de post porque todavía lo estamos enviando. Ponte ahora mismo y te mostraremos cómo agregar variables de valores a esto en las lecciones posteriores. Y entonces aquí simplemente tenemos. Si devuelve el éxito, eso es eliminar todo este Estado listo solicita éxito. Entonces si devuelve el éxito, vamos a ejecutar esta función. Y esto está tirando de toda esa información devuelta. Entonces otra vez, ese texto de respuesta. Por lo que realmente se ha simplificado en J Query, y solo estamos llamando a ese resultado. Y aquí mucho como lo que hicimos dentro de nuestro JavaScript. Estamos tomando este elemento con la idea de resultado, y estamos colocando enter HTML y estamos colocando en este elemento lo que se devuelva del servidor cuando hacemos esta consulta. Entonces es realmente una simple es eso, y en próximas lecciones, vamos a pasar por esto cómo pasar valores en do post también. Usando J Query. Y de nuevo, recuerda, cuando estás usando Jake, donde tienes que traer esa biblioteca J coury y para que funcione dentro de tu página. Entonces si dejas eso fuera, JavaScript no va a saber qué significa este signo de dólar. Y no es dar capaz de interpretar y entender qué es lo que estas funciones están haciendo 16. JQuery ajax con respuesta de llamada llamada back: tanto como lo que estábamos haciendo dentro del JavaScript. Tenemos la capacidad de establecer un get o un post. Y lo que estamos haciendo aquí es que solo estamos configurando que tú eres l Y entonces aquí tenemos nuestra función de devolución de llamada. La función de devolución de llamada es lo que sucede una vez que se envía esta solicitud y luego la función de devolución de llamada va a ejecutar eso. Podríamos hacer un resultado de inicio de sesión de consola. Y vamos a darle una indicación de lo que en realidad se está devolviendo. Cuando lanzamos esta función de get o esta llamada de get este Ajax llamado get to this u R l Así que de nuevo, estamos usando ese check dot PHP y hemos guardado ese archivo para conseguirnos. Podemos ver aquí cuando almorzamos. Esa función, vemos que el nombre está disponible si pudiéramos. John, el nombre no está disponible y todo lo que estamos consiguiendo aquí, esto es lo que se está devolviendo. Entonces esto es todo lo que se devuelve. Entonces es un poco diferente a lo que se volvió cuando estábamos usando ese Ajax aquí en el JavaScript regular eso aquí solo estamos obteniendo ese resultado. Y esos son los datos que se están devolviendo, y también hay otra opción para el estatus. Entonces si realmente vamos a hacer estatus, podemos ver aquí que cuando actualizamos la página, tenemos un estado de éxito tanto como lo que estábamos haciendo aquí. Se acaba de romper. Eso ya están listos. Estado sigue regresando ese mismo estatus, pero entiende que 200 es un éxito que es intercambiable. Y cuando haya datos, el estatus va a volver como un éxito. Y aquí es donde podemos hacer una especie de algo similar donde solo estamos haciendo esa llamada inicial que Ajax llama éxito y, si es su éxito, que hace esta función. Y si es un error, puede hacer otra cosa tan bien y tan fácilmente como lo que estamos haciendo antes. Si queremos hacer post, solo tenemos que hacer un poco de reformatear aquí y actualizar esto para tomar una solicitud de post . Vuelve a este formulario, así que ahora lo vamos a enviar como post y ya no podemos enviar la variable dentro de este tipo de formato, por lo que tenemos que enviarla como datos que estén disponibles. Entonces lo que vamos a hacer, sólo vamos a configurar esos datos, y son sólo unos pequeños cambios allí donde trajimos ese valor de datos allí. Y entonces esto de nuevo puede separarse por comas si pasabas por encima de un valor real. Por lo que este es un valor JavaScript. Por lo que no tuvimos que citarlo. Pero si tuvieras un nombre real ahí y si quieres pasarlo, tendrías que citarlo también. Pero debido a que esta es una variable, no tenemos que citar eso dentro del JavaScript. Por lo que ya se ha puesto mi nombre por aquí. También podríamos llevarnos esto y ponerlo ahí si quisiéramos. Pero de nuevo, para la legibilidad buscar, Sólo estamos tratando de mantener todo separado. Y yo solo hice un poco de una actualización aquí para solo mostrarte lo más legible formato um, para el JavaScript. Entonces lo mismo que tenemos nuestras llamadas Ajax estaban usando post lo estaban configurando para publicar, por lo que identificarlo como post en lugar de conseguir y volver a publicar. Si estás enviando datos de formulario, si tienes todo un montón de datos que estás enviando por correo es definitivamente mejor manera ir con ellos, obtén más seguridad. Y luego aquí está nuestra función de devolución de llamada. Entonces literalmente lo mismo que estamos haciendo antes de donde tenemos nuestro propio valor ahí o tú eres l Y entonces aquí tenemos nuestros datos, y luego nos separamos por comentario y coma y trajimos Sácalo. Y entonces esto, por último va a ser la función de devolución de llamada. Y aquí estamos tomando el resultado estaban tomando estatus. No necesariamente necesitamos sacar el estatus a menos que queramos usarlo aquí abajo. Pero si sí queremos usarlo, podemos sacarlo aquí. Entonces solo Cónsul, registrando ese estado y donde poner el resultado dentro de resultado no volverá al código. Podemos ver que el tribunal de hecho, está funcionando de la misma manera que antes. Cuando sí hacemos ese cheque, vemos que se toma el nombre. Hacemos algo más que el nombre está disponible por lo que todo está funcionando exactamente igual que antes con get. A pesar de que ahora estamos usando post 17. JQuery AJAX de restablecimiento de la respuesta en la respuesta en la respuesta en JQuery AJAX: Por lo que en la última lección, hablamos de cómo podríamos implementar Post. Y así habíamos mirado el código así y habíamos hecho nuestro post. ¿ Eres Earl nuestros datos Y entonces tenemos una función de devolución de llamada activada. Y luego una lección anterior habíamos mirado a ponerlo como Ajax haciendo un éxito tú Earl. Entonces vamos a volver a escribirlo dentro de este formato donde solo estamos haciendo en la llamada Ajax . Pero vamos a estar ajustando el tipo, así que lo mismo donde puedes hacer, conseguir o publicar en este caso, queremos establecer como Post. Tenemos la URL por aquí y luego esto otra vez. Este es formato muy legible eso type post you Earl va a ser la chica que estamos conectando a los datos que estamos enviando. Entonces solo el listado de esos datos y otra vez, si esto fuera un variado real o si no fuera un muy ambos era una cadena, algunos datos de cadena, tendríamos que citar eso. Y luego sobre el éxito donde apenas estás publicando esa información de resultado y estamos acelerando el resultado hacia el diff, Entonces lo que sea que se devuelva del servidor. Simplemente nos metemos en ese div. Html y aquí hemos agregado por error. Por lo que ya habíamos hablado con barco antes. Entonces si hay algunos errores, o si se devuelve de vuelta como un error, o si no se trata de un 200 siendo devuelto desde el servidor, por lo que no hay datos disponibles o el servidor configurando ese encabezado 200 podemos sacar el pick up eso y establecerlo como un error. Y entonces podemos consola cerrar sesión todo este eso aquí tenemos X h r, y eso nos da la capacidad de status, text, status, text y air. Entonces esto nos da algo más de información sobre ese cabello. Entonces otra vez, no es necesario. Si tienes un error, solo quieres fallar. Si quieres hacer resultado igual falló. Algo así, simplemente podría hacer eso donde pudiera hacer falló. Y ahora cuando vamos a la cancha, podemos ver que sigue funcionando de la misma manera. Escriba algo. Hacemos una comprobación al servidor. El nombre está disponible. Si hacemos uno que ya está dentro de nuestro array, no está disponible. Y entonces de nuevo, esto podría sacarse también a las bases de datos. Eso si tuviéramos algo para que supongo que estas de esta manera de hacer un fracaso aquí es si hago algo como esto o realmente voy a cambiar la variable minera Así que en realidad no va a tener ese valor minero, así que ojalá salga como un error ahí. Eso realmente imprimimos ese error de PHP, así que esa no era una buena manera de producir un heredero. Probablemente la forma más fácil es solo hacer un Earl separado. Eso va a refrescar otra vez. Entonces esto en realidad lo escribió porque eso era lo que se estaba volviendo de vuelta. Eso Había algún texto dentro de ese PHP. Por lo que no fue capaz de decir si fue un error. Eso aquí. Definitivamente somos capaces de ver si es un error porque en realidad no podemos encontrar que cheques con la Z allá sobre PHP eso aquí podemos ver lo que se está produciendo aquí. Por lo que no nos han encontrado y esta es la respuesta del texto de estado ex HR. Entonces esencialmente, uh, este cuatro o cuatro error y este es el 404 Así que si fuera 200 o por algo más, podríamos enumerar esos errores y no formatear eso o 200 sería éxito. Eso no encontrado es un error 404, y vamos a ver cuál es el área y sólo nos dice que es un error. Y de nuevo, ese texto no se encuentra, por lo que el error no se encuentra valor. Y aquí podemos poner en nuestro fallido eso va a volver a cambiar eso. Y eso fue sólo una demostración de que los errores. Entonces si tienes algún heredero con los datos, si no está regresando de la forma que, como era de esperar, siempre podrías enviar desde el propio servidor, puedes enviar a través de diferentes valores diferentes estados diferentes valores. Entonces, ya sea que estemos haciendo un valor 200 o un valor diferente, puedes establecerlos desde el servidor y enviarlos de vuelta para que automáticamente pudieras por defecto un error. Si quisieras mandar de vuelta algo distinto a los 200. O bien, si quieres indicar un éxito, podrías enviar de vuelta el éxito así de nuevo, dependiendo del marco que estés usando, eso podría muy y cómo estás enviando esa información de vuelta a la llamada de los Jacks. Pero por ahora, solo es importante entender que sí tenemos esta llamada Ajax. Podemos hacer esa llamada de vuelta y pudimos detectar si es un éxito o si es un error y luego emitir datos en consecuencia. Y solo para resumir eso, sí, J query realmente simplifica las cosas a diferencia de lo que teníamos que ver con la edad con JavaScript. Y mi forma preferida de hacer llamadas Ajax definitivamente es trabajar con Jay Query. Pero si necesitas trabajar con JavaScript, sí tenemos eso disponible también. Y siempre es importante. Antes de empezar a trabajar con Jake, preocúpate de entender realmente el JavaScript detrás de él y cómo JavaScript hace g query. Soy toda la funcionalidad diferente que tiene que entrar solo en el JavaScript base para que la consulta J funcione. Pero Jake Array sí simplifica lo que grabas va a ser en el cortejo la biblioteca de codificación que usas y de nuevo, uh , de nuevo, dependiendo del tipo de caída que estés recogiendo, tendrías que elige el mejor método y lo que quieres hacer con él s para que puedas generar eso aquí así como lo que estamos haciendo antes dentro de JavaScript. Y la mejor manera de aprender de nuevo es descargar los archivos fuente que estaban incluyendo dentro la sección de recursos de este curso. En la práctica, funciona con el código e intenta que eso funcione por tu cuenta para que no necesariamente necesites tener un servidor funcionando. Podrías cambiar esto en un archivo de texto y solo tener una respuesta ahí. Pero si sí sabes configurar un servidor host local, o si quieres practicar el dedo dentro de un entorno en vivo en un servidor Web, eres bienvenido a hacerlo también, donde podrías escribir lenguajes constructores como PHP. Pero de nuevo, no importa lo que te estés conectando a él solo Ramat Er lo que va a ser la respuesta del servidor y de nuevo la otra vez. No importa cómo lo estés accediendo. Si estás usando JavaScript orgy query de nuevo, estás recuperando esa respuesta y tu capacidad para trabajar con esos datos respondidos en y esos datos dinámicos sin tener una actualización de página usando Ajax. Y solo para ilustrar aún más que no necesariamente necesita tener un servidor en funcionamiento, un servidor host local trabajando en su máquina aquí. Solo estamos haciendo una consulta sobre el texto de archivo de prueba, que está justo por aquí. Y todo es este archivo de prueba de trabajo. Y cuando salimos y refrescamos la página, lo que sea que entremos, sólo es salir poniendo ese contenido. Por lo que todo el PHP estaba haciendo como estaba actualizando y haciendo dinámico este contenido. Entonces eso provenía del propio PHP, y no necesariamente del JavaScript o de la consulta J para tener esas respuestas dinámicas. Sí necesitas un lenguaje constructor que pueda interpretar los datos que enviaron y hacer algo con él. Personaliza la respuesta, el mensaje de devolución de llamada que se te devuelve, el JavaScript.