Использование метода ajax в jQuery. Краткий обзор

Категория:

В данной статье хотелось бы затронуть тему асинхронного обмена данными между клиентом и сервером с помощью JavaScript библиотеки jQuery. Технология AJAX (Asynchronous Javascript and XML – асинхронный JavaScript и XML) применяется для загрузки данных с сервера и обновления данных на сервере без перезагрузки страницы.

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

Как известно, существует несколько методов в jQuery позволяющих работать с AJAX: $.post(), $.get(), $.load() и $.ajax(). Последняя функция является самой универсальной, так как позволяет полностью получить контроль над работой с AJAX. Далее именно ее и будем рассматривать более подробно.

Пример использования метода ajax в jQuery

  • url – является параметром со строковым значением, указывающий на URL-адрес запроса.
  • cache – параметр управляющий кэшированием. В Данном случае запрещено (false).
  • success - функция, вызываемая в случае, если код статуса в ответе сообщает об успехе. Ответ передается в первом параметре этой функции в формате определенном в свойстве dataType. По умолчанию используется обычный текст (text). В теле самой функции необходимо обработать полученные данные, сохраняя их в переменную или сразу в какой-либо блок на странице. В данном примере все полученное содержимое выводится в блок с идентификатором result_ajax.

Пример использования метода ajax в jQuery

В данном примере дополнительно использован параметр type и data.

Параметр type используется для указания применяемого метода HTTP – POST или GET. Если предполагается передавать данные методом GET, то данный параметр можно не указывать, так как данный метод используется по умолчанию.

Параметр data используется для передачи данных серверу. Можно использовать два варианта передачи, первый это литерал объекта (пример показанный выше на картинке), а второй в качестве обычной строки get запроса, как в примере ниже.

Пример использования метода ajax в jQuery

Также следует обратить внимание, если в качестве обработчика используется событие submit, то обязательно необходимо вернуть return false после всех необходимых действий. Это нужно сделать для того, чтобы страница не перезагрузилась, и не происходило обычной отправки формы на сервер.

Все, статья на этом завершается. Все исходные коды с использованием метода ajax в jQuery прилагаются в архиве для бесплатного скачивания. Для работы скрипта необходимо распаковать и разместить их на Web-сервере с PHP.