№16: Вступ до Ajax - CSS-хитрощі

Anonim

Ajax займає там досить високе місце з найбільших причин використовувати jQuery. JQuery не тільки вирішує проблеми між браузерами, але і робить синтаксис дуже простим у використанні та розумінні.

У цьому відео ми намагаємось пояснити, що таке "Аякс". Ми розглядаємо елемент форми, який при подачі робить запит GET або POST (як визначається атрибутом методу) до вказаної вами URL-адреси (як визначається атрибутом дії). Це лише HTML, там взагалі не відбувається внутрішнього коду або JavaScript. Але це подання призведе до того, що сторінка зміниться, буквально перезавантажиться за новою URL-адресою, подібно до натискання посилання.

Ajax дозволяє нам робити цей запит GET або POST у фоновому режимі, не перезавантажуючи сторінку. По суті, це вся суть Аяксу. І це дуже потужно. Це головним чином відповідає за те, чому сучасні веб-сайти працюють і почуваються так, як вони.

Раніше Ajax "виступав за" асинхронні JavaScript і XML, але це в основному ігнорується в наші дні, оскільки це не означає багато. Також звідси декапіталізація. Ви також можете іноді побачити “XHR”, що скорочується від XMLHttpRequest, що є рідною основною технологією Ajax.

Різниця між GET та POST полягає по суті: GET призначений для отримання інформації і не повинен нести відповідальність за зміну даних, а POST - спеціально для зміни даних. Не соромтеся читати більше про це в цьому потоці StackOverflow.

Зробити запит GET у jQuery надзвичайно просто:

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

URL-адреса - це місце, звідки ви сподіваєтесь отримати дані. Другим параметром є функція зворотного виклику, яка запускається, коли запит Ajax був успішним. Найважливішим параметром є перший, дані, який містить інформацію, отриману з запиту.

Запити Ajax іноді можуть провалитися. Однією з причин цього збою може бути сам браузер та його політика безпеки. Самі браузери враховують правила щодо того, звідки можна вимагати вміст. Запити завжди можна надіслати до того самого домену, з якого надходить запит. Але якщо йдеться про інший домен, для цього іншого домену потрібно буде спеціально дозволити.

Ви можете прочитати все про це на enable-cors.org. CORS означає "Спільне використання ресурсів". Ми розглянемо приклад, коли CORS не ввімкнено, а запит Ajax не вдається. Одним із стандартних і простих способів виправити це, припускаючи, що сервером є Apache, є встановити заголовок, який спеціально дозволяє CORS через файл .htaccess:

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

У відео ми просто переміщуємо запит Ajax до CodePen, який за замовчуванням добре обробляє Ajax.

Легко сирне:

Дивіться Pen fBInl від Chris Coyier (@chriscoyier) на CodePen