Руководство для начинающих по AJAX на JQuery

Руководство для начинающих по AJAX на JQuery

От автора: в этом уроке мы разберем несколько JQuery функций и методов, связанных с ajax. А точнее мы рассмотрим сокращенный метод load и основную функцию ajax.

Как работать с методом load

JQuery load довольно простой метод для вытягивания удаленных данных, но в то же время мощный. Ниже представлен его синтаксис:

В таблице представлены возможные параметры:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Параметры колбэк функции:

В списке представлены все возможные значения параметра textStatus:

success

notmodified

nocontent

error

timeout

abort

parsererror

Чтобы лучше понять принцип работы метода load, давайте вернемся к нашему примеру из предыдущего урока. И снова посмотрим на HTML разметку:

Как это выглядит:

Вспомните, нам необходимо обновить содержимое элемента #bio на данные из ответа при нажатии на кнопку. Ниже JQuery код:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Предположим, что запрос успешно прошел (т.е. textStatus равен success или notmodified), тогда результат будет такой:

Также обратите внимание на скриншот ниже, в котором показан успешный запрос:

Левая часть относится к объекту XHR в консоли браузера на чистом JS (в предыдущем уроке). Справа отображается объект jqXHR с помощью метода load. В случае неуспешного запроса должно появиться соответствующее сообщение. Для этого необходимо проверить значение параметра textStatus и отобразить сообщение:

Обратите внимание: если вы запускаете пример с локальной машины (файл Bio.txt хранится на ней), то сообщение об ошибке, скорее всего, будет другим. К примеру, вы можете увидеть следующее сообщение:

И напоследок, стоит упомянуть, что если мы не посылаем данные на сервер объектом, по умолчанию метод load работает через HTTP GET. Метод POST сработает только в том случае, если данные на сервер посылаются в качестве объекта. Ниже представлено Codepen демо.

Теперь давайте изменим формат запрашиваемого с сервера файла. Нужная нам информация теперь хранится в Bio.html, а не в Bio.txt. В этом файле хранится также два параграфа. Если мы хотим загрузить только первый параграф, то мы должны обновить код:

Выглядит это так:

И Codepen демо:

Заключение

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

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree