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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

success

notmodified

nocontent

error

timeout

abort

parsererror

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Предположим, что запрос успешно прошел (т.е. 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.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

JavaScript. Полное руководство

Изучите самый популярный язык разработки и станьте высокооплачиваемым профи

Подробнее

Метки:

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

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

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

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