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