Ajax занимает довольно высокое место в рейтинге основных причин использования jQuery. JQuery не только устраняет проблемы кроссбраузерности, но и делает синтаксис очень простым в использовании и понимании.
В этом видео мы пытаемся объяснить, что вообще такое Ajax. Мы смотрим на элемент формы, который при отправке выполняет запрос GET или POST (как определено атрибутом метода) на указанный вами URL (как определяется атрибутом действия). Это просто HTML, никакого бэкэнд-кода или JavaScript там вообще нет. Но это представление приведет к тому, что страница изменится, буквально перезагрузится по новому URL-адресу, как при нажатии на ссылку.
Ajax позволяет нам делать этот запрос GET или POST в фоновом режиме, не перезагружая страницу. По сути, в этом весь смысл Ajax. И это очень мощно. Это в значительной степени отвечает за то, почему современные веб-сайты работают и воспринимаются именно так.
Раньше Ajax «заменял» асинхронный JavaScript и XML, но в наши дни это в значительной степени игнорируется, поскольку это мало что значит. Отсюда и де-капитализация. Вы также можете иногда видеть «XHR», что является сокращением от XMLHttpRequest, который является собственной базовой технологией Ajax.
Разница между GET и POST по существу: GET предназначен для получения информации и не должен нести ответственность за изменение данных, а POST предназначен специально для изменения данных. Не стесняйтесь узнать больше об этом в этой ветке StackOverflow.
Сделать запрос GET в jQuery на удивление просто:
$.get( "URL", function(data) ( // do something with data )); ));
URL - это то место, откуда вы надеетесь получить данные. Второй параметр - это функция обратного вызова, которая запускается, когда запрос Ajax был успешным. Самым важным параметром является первый, data, который содержит информацию, полученную в результате запроса.
Запросы Ajax иногда могут терпеть неудачу. Одной из причин этого сбоя может быть сам браузер и его политики безопасности. В самих браузерах заложены правила о том, откуда можно запрашивать контент. Запросы всегда можно отправлять в тот же домен, из которого поступает запрос. Но если задействован другой домен, этот другой домен должен будет специально разрешить это.
Вы можете прочитать все об этом на enable-cors.org. CORS означает «Совместное использование ресурсов между источниками». Мы рассмотрим пример, в котором CORS не включен и запрос Ajax не выполняется. Один стандартный и простой способ исправить это, если сервером является Apache, - установить заголовок, который специально разрешает CORS через файл .htaccess:
Header set Access-Control-Allow-Origin "*"
В видео мы просто перемещаем запрос Ajax в CodePen, который по умолчанию хорошо обрабатывает Ajax.
Легко глупо:
Смотрите Pen fBInl Криса Койера (@chriscoyier) на CodePen