Знакомство с 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. Однако вам, скорее всего, пришла в голову следующая мысль: «Это усовершенствование я вряд ли стал бы использовать на своих сайтах». Действительно, зачем кому-то понадобится загружать страницы сайта в записи?

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