Kwork.ru - услуги фрилансеров от 500 руб.

Знакомство с jQuery AJAX функциональностью

В основе AJAX функциональности лежит функция .ajax(). Она позволяет решать любые задачи, связанные с использованием XML HTTP Requests (XHR). Тем, кто уже обладает некоторым опытом работы с AJAX, будет приятно узнать, что в jQuery форме эта функция избавляет разработчика от необходимости установки условного оператора if/else для тестирования поддержки объекта XMLHTTPRequest, (если он не поддерживается, то можно протестировать поддержку ActiveXObject для IE).

Использование функции .ajax()

Блог Миши Рудрастых

Давайте бросим беглый взгляд на некоторую функциональность, доступную в функции .ajax():

jQuery.ajax({
type: //"GET" или "POST",
url: //"url/to/file.php",
dataType: //"script", "xml", "json" или "html"
data: //строковый запрос "name=FileName&type=PDF"
beforeSend://функция обратного вызова
function(){
      alert("Starting Request");
     }
success: //функция обратного вызова
     function(){
        alert("Request successful");
     }
complete: //функция обратного вызова
    function(){
        alert("Request complete");
     }
error: //функция обратного вызова
    function(){
        alert("Request returned and error!");
     }
});
...

К примеру, реализованный в пределах WordPress вызов .ajax() может выглядеть следующим образом:

...
jQuery(".ajaxIt").click(function(){
  //.ajaxIt это класс, присвоенный ссылке в первой записи
jQuery.ajax({
        //url, ведущий на страницу About:
      url: "/wp-jquery/about/",
      data: "html",
      success: function(data){
      //ограничим переполнение и установим высоту первой записи
             jQuery('.post:first')
               .css({overflow: "hidden", height: "310px"})
                 //добавляем данные
               .html(data);
               //сообщение, которое будет показано в тот момент, когда функция начала свою работу
              alert('loaded up content');
             }
    });
  
  });
...

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

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

Мы выполнили первый небольшой проект, связанный с AJAX в WordPress. Однако вам, скорее всего, пришла в голову следующая мысль: «Это усовершенствование я вряд ли стал бы использовать на своих сайтах». Действительно, зачем кому-то понадобится загружать страницы сайта в записи?

Вы правы. Этот проект представлен исключительно для ознакомления. Однако мы не будем на нем задерживаться. Давайте пойдем дальше и взглянем на более доступную и полезную функциональность.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.