Запросы AJAX

Запросы AJAX

Нам, пользователям, легко отстаивать идею о том, что мы предпочитаем, чтобы информация на просматриваемых страницах обновлялась без необходимости перезагружать страницы. С точки зрения разработчика, мы можем добиться этого с помощью запросов AJAX. В этом уроке мы обсудим, как именно это лучше сделать..

Начнем с нескольких готовых страниц, чей статический HTML и CSS я уже написал. Конечно, вы также можете написать свой собственный код, если хотите — рабочие файлы предназначены только для того, чтобы сэкономить время для вещей, которые уже должны быть понятны..

Просмотр рабочих файлов

Еще пару слов о рабочих файлах. Они включают четыре страницы — Home (index.html), Tabs (tabs.html), Accordion (accordion.html) и Slider (slider.html). Различия между страницами минимальны. Заголовок отражается в тегах title> и h2>, последний используется для заголовка внутри страницы. Кроме того, класс текущего-элемента-меню назначается различным элементам навигации на отдельных страницах..

Следующий тег ссылки может произвести на вас впечатление:

ссылка href = "http://fonts.googleapis.com/css?family=Open+Sans:300subset=latin,cyrillic-ext,cyrillic" rel = "stylesheet" type = "text / css" />

Это позволяет нам использовать на нашем сайте шрифт, который не является безопасным для Интернета. Эта ссылка загружает внешний файл CSS с серверов Google. В зависимости от версии браузеру предоставляется веб-шрифт соответствующего формата. Все современные (и даже некоторые старые браузеры) поддерживают веб-шрифты — IE5.5 +, Chrome, Firefox, Safari и Opera. Так что не беспокойтесь об использовании веб-шрифтов. Я скоро напишу урок, чтобы дать больше разъяснений по теме.

В наших стилях (style.css) почти ничего особенного нет. Для заголовков я использую шрифт Open Sans, который я загрузил из Google Fonts. Для тегов HTML5 я добавил display: block, чтобы у меня не было проблем с их отображением из старых браузеров (IE 7/8)..

В папке js вы также найдете func.js, который снова помогает правильно обрабатывать теги HTML5 в IE 7/8..

Что мы собираемся сделать сейчас, так это загрузить содержимое отдельных страниц, фактически не покидая текущую. Это достигается с помощью запросов AJAX..

AJAX

AJAX означает асинхронный JavaScript и XML (асинхронный JavaScript и XML — не то, чтобы при переводе он вносил ясность).

«Асинхронный JavaScript» означает, что код выполняется в отдельном процессе браузера. Это позволяет нашей странице не зависать. При синхронном коде браузер не позволяет взаимодействовать с контентом. Это может быть прокрутка страницы или нажатие на ссылку. Простым примером синхронного кода является вызов метода alert () с помощью JavaScript. Всплывающее окно блокирует все остальное на странице. В том числе выполнение дальнейших скриптов до закрытия Popup.

XML?

Какую роль играет XML во всей работе? Честно говоря, у нас может даже не быть XML. Мы уже говорили, что это просто язык разметки без строгих тегов. Это полезно для передачи информации. AJAX действительно работает с XML-запросами HTTP (XML-запросы, отправляемые через HTTP). Изначально они использовались для возврата информации в виде XML. Однако ничто не ограничивает нас форматом данных, если мы можем правильно их обработать..

Читать также:  Бандлеры

Чтобы делать запросы AJAX, на вашем компьютере должен быть установлен сервер. Вам нужно загружать страницы через http: // localhost. Для начала я могу порекомендовать просто скачать и установить WAMP. Обещаю в ближайшее время написать руководство по установке серверов.

Давайте начнем

Нам нужно начать с ссылки, чтобы переходить по ссылкам. В результате мы загружаем информацию с других страниц. И самое главное — без подзарядки током:

jQuery (функция ($) {$ (‘nav a’). click (function (e) {e.preventDefault ();});});

Сначала мы выбираем ссылки из тега nav и назначаем им обработчик события клика. Функция, назначенная событию, принимает аргумент, содержащий информацию о самом событии. В нашем случае это переменная e. Вызывая метод preventDefault () для этого объекта, мы предотвращаем действие по умолчанию, которое заключается в том, что браузер оставляет текущую страницу и загружает новую..

Однако в настоящий момент нажатие на ссылки ничего не делает, и мы хотим загрузить новую информацию. Нам нужно сделать запрос AJAX, чтобы получить контент:

jQuery (функция ($) {$ (‘nav a’). click (function (e) {e.preventDefault ();
$ .get ($ (this) .attr (‘href’), function (data, status, XHR) {
}); }); });

ПОЛУЧИТЬ

В функции обработчика событий мы добавляем $ .get. Обычно браузеры загружают новую страницу с помощью запроса GET. Эта функция позволяет нам загружать контент с URL-адреса..

url

Этот URL-адрес передается как первый аргумент функции. В нашем случае это просто атрибут href соответствующей ссылки.

Обратите внимание на элегантность, с которой мы работаем.

Во-первых, URL-адрес, с которого мы будем загружать информацию, не должен вводиться в самом JavaScript. Он не должен зависеть от разметки, к которой он применяется..

Во-вторых, мы берем этот URL из атрибута href ссылки. Мы также можем ввести это как атрибут данных, но в этом случае уместно использовать href. Если пользователь случайно отключил свой JavaScript, щелкнув ссылку, он просто загрузит другую страницу. AJAX не будет, но и ошибок не будет. Мы делаем это для доступности.

Дополнительные аргументы

Второй аргумент $ .get обычно является объектом с дополнительными аргументами, которые мы хотели бы отправить с нашим запросом GET. В этом случае нам это не нужно, и мы отправляем третий аргумент напрямую..

Читать также:  Запросы AJAX с кешированием

Функция обратного вызова

Это функция, выполняемая при получении результата запроса. Нам нужно сделать это в функции из-за асинхронности кода.

На запрос требуется время, чтобы получить ответ. Сначала он должен достичь сервера. Затем сервер должен обработать его и подготовить результат. Наконец, этот результат должен вернуться к нам. Мы не хотим, чтобы наша страница зависала в это время. Это может быть всего 200 миллисекунд или около того, но это может быть 3-4 секунды. Поэтому мы готовим callback-функцию, которая будет вызвана, как только мы получим результат.

Функция обратного вызова принимает 3 аргумента. Первая — это фактическая информация, которую вернул сервер. Второй аргумент — это ключевое слово о статусе сервера. Наш запрос может вернуть пустой ответ из-за ошибки сервера. Третий аргумент — это объект XHR, содержащий информацию о запросе. XHR — это сокращение от XML HTTP Request, о котором мы упоминали ранее..

jQuery (функция ($) {$ (‘nav a’). click (function (e) {e.preventDefault ();
$ .get ($ (this) .attr) (‘href’), function (data, status, XHR) {if (status == ‘success’) {$ (‘section [role = "main"]’). html ($ (data) .find (‘section [role = "main"]’). html ());} else {// сообщаем пользователю, что мы не можем подключиться к серверу}}); }); });

Обработка ответа в функции обратного вызова

Первое, что нам нужно сделать в нашей функции обратного вызова, — это проверить, является ли статус нашего запроса «успешным». Если да — то все нормально и можно переходить к обработке контента. В противном случае лучше всего было бы отправить пользователю сообщение о том, что у нас возникла проблема с запросом. Затем предложите ему попробовать еще раз. В этом примере я просто оставил комментарий, чтобы напомнить нам, что мы должны делать, но не предпринял никаких действий..

Давайте теперь объясним, что происходит в строке кода, которая выполняется, если наш запрос возвращает результат..

Заменить старый контент новым

Сначала мы выбираем элемент section role = = "main"> и меняем внутри него содержимое HTML. Однако мы получаем этот HTML за несколько шагов. Сначала мы берем содержимое данных как объект jQuery. Мы знаем, что это должна быть просто разметка страницы, но в переменных данных это просто текст. Когда у нас есть страница как объект jQuery, мы можем вызвать метод find (). Таким образом мы можем получить доступ к определенному элементу страницы. Нам снова нужен раздел role = "main">, HTML которого мы берем. Это просто заменяет HTML раздела role = "main"> текущей страницы на HTML-код соответствующего элемента страницы, которую мы хотим загрузить..

Читать также:  Пользовательский параллакс без какихлибо библиотек

По-прежнему будет хорошо обновить навигацию, а также тег заголовка:

jQuery (функция ($) {$ (‘nav a’). click (function (e) {e.preventDefault ();
$ .get ($ (this) .attr) (‘href’), function (data, status, XHR) {if (status == ‘success’) {$ (‘section [role = "main"]’). html ($ (data) .find (‘section [role = "main"]’). html ()); $ (‘title’). html ($ (data) .filter (‘title’). html () ); $ (‘header’). html ($ (data) .find (‘header’). html ());} else {// сообщаем пользователю, что мы не можем подключиться к серверу}}); }); });

Мы обновляем навигацию, просто заменяя HTML всего заголовка, как в разделе.

фильтровать и находить

Однако обратите внимание, что для title> мы используем $ (data) .filter вместо $ (data) .find ()..

Это потому, что в запросах с jQuery мы фактически получаем массив со всеми тегами из head> и body>. Для раздела мы можем использовать find, потому что мы применяем метод для div id = "wrapper" class = "shell">. Но title> является корневым элементом, и чтобы выбрать его среди других, мы должны использовать фильтр. Он возвращает только некоторые элементы, соответствующие указанному селектору CSS..

Если мы протестируем в данный момент, мы увидим, что все в порядке, при первом нажатии на одну из ссылок. Во втором же страница уже перезагружается.

Это потому, что мы фактически заменяем сами ссылки. По этой причине у нас больше нет назначенных им обработчиков событий. Есть два решения:

  1. назначать новые обработчики событий каждый раз, когда мы загружаем новую страницу
  2. чтобы изменить способ установки обработчиков событий, чтобы они не терялись:

jQuery (function ($) {$) (document) .on (‘щелчок’, ‘nav a’, function (e) {e.preventDefault ();
// …}); });

.щелкнуть и .on (‘щелкнуть’)

Вместо того, чтобы изначально выбирать ссылки и устанавливать их для обработчика событий щелчка, мы, таким образом, можем установить обработчик событий щелчка для всего документа. Он остается неизменным, но мы указываем, что хотим, чтобы функция выполнялась только в том случае, если событие щелчка было сгенерировано элементом, соответствующим данному селектору CSS..

Вы можете увидеть окончательный результат на https://magadanski.com/demo/ajax-requests/.

Проблема с этим способом загрузки страниц заключается в том, что адрес по-прежнему указывает на первую открытую. Если вы нажмете F5 или попытаетесь установить ссылку на текущую страницу друга, вы будете разочарованы тем, что адрес действительно указывает на домашнюю страницу. И затем вам нужно объяснить, где вы должны щелкнуть, чтобы увидеть то же самое. Эта проблема решается с помощью диплинкинга, о котором мы поговорим в другом уроке..

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?