# 16: Introducción a Ajax - Trucos CSS

Anonim

Ajax ocupa un lugar bastante alto en las principales razones para usar jQuery. JQuery no solo soluciona los problemas entre navegadores, sino que hace que la sintaxis sea muy fácil de usar y comprender.

En este video intentamos explicar qué es el Ajax. Observamos un elemento de formulario, que cuando se envía, realiza una solicitud GET o POST (según lo determinado por el atributo de método) a la URL que especifique (según lo determinado por el atributo de acción). Eso es solo HTML, no hay código de backend ni JavaScript en absoluto. Pero ese envío hará que la página cambie, literalmente se recargue en la nueva URL, como hacer clic en un enlace.

Ajax nos permite realizar esa solicitud GET o POST en segundo plano, sin recargar la página. En esencia, ese es el objetivo del Ajax. Y es muy poderoso. Es en gran parte responsable de por qué los sitios web modernos funcionan y se sienten como lo hacen.

Ajax solía “representar” JavaScript y XML asíncronos, pero eso se ignora en gran medida en estos días porque no significa mucho. También de ahí la descapitalización. A veces también puede ver "XHR", que es la abreviatura de XMLHttpRequest, que es la tecnología central nativa de Ajax.

La diferencia entre GET y POST es esencialmente: GET es para obtener información y no debería ser responsable de cambiar los datos y POST es específicamente para cambiar los datos. Siéntase libre de leer más sobre eso en este hilo de StackOverflow.

Hacer una solicitud GET en jQuery es increíblemente fácil:

$.get( "URL", function(data) ( // do something with data )); ));

La URL es de donde espera obtener los datos. El segundo parámetro es la función de devolución de llamada que se ejecuta cuando la solicitud Ajax fue exitosa. El parámetro más importante es el primero, datos, que tiene la información que obtuvo de la solicitud.

Las solicitudes de Ajax pueden fallar a veces. Una de las razones de ese error podría ser el propio navegador y sus políticas de seguridad. En los navegadores se incorporan reglas sobre dónde se puede solicitar el contenido. Las solicitudes siempre se pueden realizar al mismo dominio del que proviene la solicitud. Pero si hay un dominio diferente involucrado, ese dominio diferente deberá permitirlo específicamente.

Puede leer todo sobre eso en enable-cors.org. CORS significa "intercambio de recursos entre orígenes". Vemos un ejemplo en el que CORS no está habilitado y la solicitud de Ajax falla. Una forma estándar y fácil de solucionarlo, asumiendo que el servidor es Apache, es establecer un encabezado que permita específicamente CORS a través del archivo .htaccess:

Header set Access-Control-Allow-Origin "*"

En el video, simplemente trasladamos la solicitud de Ajax a CodePen, que maneja bien Ajax de forma predeterminada.

Fácil cursi:

Vea el Pen fBInl de Chris Coyier (@chriscoyier) en CodePen