Ajax — какое модное слово сейчас, но на самом деле єто всего лишь несколько методов в javascript. И в каждом современном фрэймворке есть функции AJAX, не исключением является JQuery. В данной статье я покажу пример того как пользоваться функциями AJAX с помощью JQuery.
Начнём с документации приведенной на официальном сайте
Ajax Запросы:
jQuery.ajax( параметры ) Вернёт: XMLHttpRequest
загрузит удалённую страницу при помощь HTTP запроса.
load( url, data, callback ) Вернёт объект: jQuery
Загрузит HTML из удалённого файла и создаст объекты DOM.
jQuery.get( url, data, callback, type ) Вернёт: XMLHttpRequest
загрузит удалённую страницу при помощь HTTP запроса GET.
jQuery.getJSON( url, data, callback ) Вернёт: XMLHttpRequest
Отправит запрос типа JSON методом GET.
jQuery.getScript( url, callback ) Вернёт: XMLHttpRequest
Загрузить и ваполнить на текущей страничке ответ JavaScript запрос методом GET.
jQuery.post( url, data, callback, type ) Вернёт: XMLHttpRequest
загрузить удалённую страничку по HTTP POST запросом.
Ajax События:
ajaxComplete( callback ) Создаст объект: jQuery
Задаёт функцию выполняемую, когда AJAX запрос завершён.
ajaxError( callback ) вернёт объект: jQuery
Задаёт функцию выполняемую, если AJAX запрос вернул ошибку.
ajaxSend( callback ) вернёт объект: jQuery
Задаёт функцию выполняемую, выполняемую перед AJAX запросом.
ajaxStart( callback ) вернёт объект: jQuery
Задаёт функцию выполняемую после того как AJAX запрос стартовал, но остаётся не активным.
ajaxStop( callback ) вернёт объект: jQuery
адаёт функцию выполняемую после того как все AJAX запросы завершатся.
ajaxSuccess( callback ) вернёт объект: jQuery
адаёт функцию выполняемую после того как AJAX запрос будет выполнен УСПЕШНО.
Разное:
jQuery.ajaxSetup( options )
Устанавливает глобальные настройки AJAX запросов.
serialize( ) вернёт: сериализованую строку
сериализует объекты и элементы в строки.
serializeArray( ) вернёт: сериализованый массив
Итак документацию мы разобрали а теперь практическое применение.
Ни что так хорошо не помогает понять работу как хорошо написанный пример :)
Листинг примеров:
1) Загрузка HTML кода в необходимый нам DOM элемент на странице
$(document).ready(function(){ // по окончанию загрузки страницы
$('#example-1').click(function(){ // вешаем на клик по элементу с id = example-1
$(this).load('ajax/example.html'); // �
в данном случае мы подгрузим елементы из ajax/example.html
2) Для организации HTTP авторизации делаем такой код
$.ajax({
url: '/ajax/example.html', // указываем URL и
dataType : "json", // тип загружаемых данных
success: function (data, textStatus) { // вешаем свой обработчик на функцию success
$.each(data, function(i, val) { // обрабатываем пол�
3) Отправка данных на сервер методом POST
$(document).ready(function(){ // по завершению загрузки страницы
$('#example-3').click(function(){ // вешаем на клик по элементу с id = example-3
$.post('ajax/example.xml', {}, function(xml){ // загрузку XML из файла example.xml
$('#example-3').html('');
$(xml).find('note').each(function(){ // заполняем DOM элемент данными из XML
$('#example-3').append('To: ' + $(this).find('to').text() + '<br/>')
.append('From: ' + $(this).find('from').text() + '<br/>')
.append('<b>' + $(this).find('heading').text() + '</b><br/>')
.append( $(this).find('body').text() + '<br/>');
});
}, 'xml'); // указываем явно тип данных
})
});
ответ в формате XML
<?xml version="1.0" encoding="UTF-8"?>
<note>
4) Загружает данные в формате JSON (или другими словами возвращаем ответ в виде переменных яваскрипт)
$(document).ready(function(){ // по завершению загрузки страницы
$('#example-4').click(function(){ // вешаем на клик по элементу с id = example-4
$.getJSON('ajax/example.json', {}, function(json){ // загрузку JSON данных из файла example.json
$('#example-4').html(''); // заполняем DOM элемент данными из JSON объекта
$('#example-4').append('To: ' + json.note.to + '<br/>')
.append('From: ' + json.note.from + '<br/>')
.append('<b>' + json.note.heading + '</b><br/>')
.append( json.note.body + '<br/>');
});
})
});
пример ответа который должен вернуть се
Базовые методы мы изучили теперь перейдём к обработчикам событий. О самих методах читаем чуть выше :)
1) ajaxComplete( callback )
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<span>Request Complete.</span>");
});
2) ajaxSend( callback )
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<span>Starting request at "
+ settings.url
+ "</span>");
});
3) ajaxStart( callback )
$("#loading").ajaxStart(function(){
$(this).show();
});
4) ajaxStop( callback )
$("#loading").ajaxStop(function(){
$(this).hide();
});
5) ajaxSuccess( callback )
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<span>Successful Request!</span>");
});
Всё изучив это материал вы стали гуру))))
ну ещё на последок мааааааленький такой примерчик
Итак создадим два файла: events.html — где будут размещен элемент (например обычная ссылка), щелчок мышью на которой будет инициировать ajax запрос, и файл events.php — обработчик ajax-запросов.
Затем простенький HTML-код:
<ul>
<li>
<a href="http://www.linkexchanger.su/wp-admin/#" id="a1">
Выполнить Ajax-запрос
</a>
<span id="loading">Выполняется Ajax-запрос...</span></li>
<li>
<span id="message">Ajax-з
кусочек из таблицы стилей:
#loading {
display:none;
padding-left:10px;
}
#message {
display:none;
padding-left:10px;
}
и полностью javascript-код:
<script type="text/javascript">
$(document).ready(function(){
// --------------
$("#a1").click(
function () {
$.ajax({
type: "POST",
data: "n=3",
url: "events.php"
});
});
// --------------
$("#loading").ajaxStart(function(){
$(this).show();
$("#message").hide();
});
$("#loading").ajaxStop(function(){
$(this).hide();
});
$("#message").ajaxComplete(function(){
$(this).show();
});
});
</script>
По клику на элементе а с идентификатором а1 будет выполнен ajax-запрос к файлу events.php. Тип запроса POST и в качестве данных передадим некий параметр n=3
По событию ajaxStart будет показан элемент с идентификатором #loading, изначально скрытый. #message по этому же событию будет скрыт. По событию ajaxStop надо будет скрыть элемент #loading, а по событию ajaxComplete показать элемент #message.
файл events.php
<?php
if($_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest') {
if ($_POST) {
for($i=0;$i<count ($_post['n']);$i++)>
} else {
echo "Не передан параметр!";
Ну вот и всё.