jQuery значительно облегчает создание AJAX запросов.

Создание AJAX запросов с помощью jQuery

jQuery - это библиотека JavaScript позволяющая ускорить написание кода.

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

Для того, чтобы использовать возможности jQuery ее необходимо вначале подключить. Чтобы сделать это, добавьте код расположенный ниже в head секцию Вашей страницы:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Создание AJAX запросов на "чистом" JavaScript имеет несколько недостатков:

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

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

Синтаксис:

$("селектор").load(url,данные,функция)

селектор выбирает элемент, в котором будет отображен результат AJAX запроса.

url адрес, на который будет отправлен AJAX запрос.

данные является необязательным параметром. Данные, которые будут переданы вместе с запросом.

функция является необязательным параметром. Функция, которая будет вызвана после выполнения запроса.

$(document).ready(function(){
 
   $("#but1").click(function(){
      $("#par1").load("testfile.txt");
   })

});

В примере ниже мы пересылаем скрипту add.php переменную x со значением 4 и переменную y со значением 5 он в свою очередь принимает эти переменные, производит их сложение и отправляет результат обратно.

$(document).ready(function(){
   
   $("#but1").click(function(){
      $("#par1").load("add.php","x=4&y=5");
   })

});

Сопровождающие функции

Сопровождающие функции позволяют выполнять различный код в зависимости от состояния выполнения AJAX запроса.

Функция ajaxSend() выполнит переданный в нее код во время отправления AJAX запроса.

Функция ajaxComplete выполнит переданный в нее код, когда выполнение AJAX запроса будет завершено, при этом неважно произошла при этом ошибка или нет.

$(document).ready(function(){

   $("#par1").ajaxSend(function(){
      $("#img1").css("display","block");
   })
   $("#par1").ajaxComplete(function(){
      $("#img1").css("display","none");
   })
   $("#but1").click(function(){
      $("#par1").load("add.php","x=10&y=100");
   })

});

Функция ajaxSuccess выполнит переданный в него код, если выполнение AJAX запроса будет завершено успешно.

Функция ajaxError выполнит переданный в него код, если выполнение AJAX запроса будет завершено с ошибкой.

$(document).ready(function(){

   $("#par1").ajaxSend(function(){
      $("#img1").css("display","block");
   });
   $("#par1").ajaxComplete(function(){
      $("#img1").css("display","none");
   });
   $("#par1").ajaxError(function(){
      alert("Выполнение AJAX запроса завершено с ошибкой.");
   });
   $("#par1").ajaxSuccess(function(){
      alert("AJAX запрос успешно выполнен!");
   });
   $("#but1").click(function(){
      $("#par1").load("add.php","x=10&y=100");
   });
   $("#but2").click(function(){
      $("#par1").load("abb.php","x=10&y=100");
   });

});

Низкоуровневые AJAX запросы

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

Низкоуровневые AJAX запросы предоставляют более широкую функциональность, но более сложны в использовании.

Синтаксис высокоуровневого AJAX запроса:

$("#par1").load("add.php","x=4&y=5")

Синтаксис аналогичного низкоуровневого AJAX запроса:

$.ajax({
   url:"add.php", 
   data:"x=4&y=5", 
   success:function(result){
      $("#par1").html(result)
   }
});

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

Сделайте сами

Задание 1 реализуйте подпункты перечисленные ниже путем добавления на страницу соответствующего jQuery кода:

1. Создайте AJAX запросы, которые должны после нажатия на соответствующие кнопки обращаться к файлам autumn.txt, winter.txt, summer.txt, и spring.txt и затем отображать результат запроса в абзац с id=par1.
2. После нажатия на кнопку с id=but5 элемент span c id=let1 должен содержать первую букву кодового слова, span c id=let2 вторую и т.д. (подробнее задание данного пункта объяснено в редакторе).
3. Выполните предыдущий пункт используя низкоуровневый метод .ajax(). После нажатия на кнопку с id=but6 элемент span c id=slet1 должен содержать первую букву кодового слова, span c id=slet2 вторую и т.д.

$(document).ready(function(){

//Пишите код здесь

});