AJAX
Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы...
Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)
jQuery(..).loadНачнем с самого простого - загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры: 1. url запрашиваемой страницы 2. передаваемые данные (необязательный параметр) 3. функция которой будет скормлен результат (необязательный параметр) Приведу пример JavaScript кода: Code $(document).ready(function(){ $('#example-1').click(function(){ $(this).load('ajax/example.html'); }) });
Пример подгружаемых данных(содержимое файла example.html): Code <p>Example<br/> Data Loaded By AJAX<br/> Bye-Bye</p>
Пример работы
jQuery.ajaxЭто самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр - объект включающий в себя все настройки (выделены параметры которые стоит запомнить): - async - асинхронность запроса, по умолчанию true
- cache - вкл/выкл кэширование данных браузером, по умолчанию true
- contentType - по умолчанию "application/x-www-form-urlencoded"
- data - передаваемые данные - строка иль объект
- dataFilter - фильтр для входных данных
- dataType - тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
- global - тригер - отвечает за использование глобальных AJAX Event`ов, по умолчанию true
- ifModified - тригер - проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false
- jsonp - переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)
- processData - по умолчанию отправляемые данный заворачиваются в объект, и отправляются как "application/x-www-form-urlencoded", если надо иначе - отключаем
- scriptCharset - кодировочка - актуально для JSONP и подгрузки JavaScript`ов
- timeout - время таймаут в миллисекундах
- type - GET либо POST
- url - url запрашиваемой страницы
Локальные AJAX Event`ы: - beforeSend - срабатывает перед отправкой запроса
- error - если произошла ошибка
- success - если ошибок не возникло
- complete - срабатывает по окончанию запроса
Для организации HTTP авторизации: - username - логин
- password - пароль
Пример javaScript`а: Code $.ajax({ url: '/ajax/example.html', dataType : "json", // тип загружаемых данных success: function (data, textStatus) { $.each(data, function(i, val) {
}); } });
jQuery.getЗагружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры: 1. url запрашиваемой страницы 2. передаваемые данные (необязательный параметр) 3. callback функция, которой будет скормлен результат (необязательный параметр) 4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
jQuery.postДанный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST`а. Может принимать следующие параметры: 1. url запрашиваемой страницы 2. передаваемые данные (необязательный параметр) 3. callback функция, которой будет скормлен результат (необязательный параметр) 4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default) JavaScript: Code $(document).ready(function(){ $('#example-3').click(function(){ $.post('ajax/example.xml', {}, function(xml){ $('#example-3').html(''); $(xml).find('note').each(function(){ $('#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'); }) });
Файл example.xml: Code <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>
Пример работы
jQuery.getJSONЗагружает данные в формате JSON(удобней и быстрее нежели XML). Может принимать следующие параметры: 1. url запрашиваемой страницы 2. передаваемые данные (необязательный параметр) 3. callback функция, которой будет скормлен результат (необязательный параметр) JavaScript: Code $(document).ready(function(){ $('#example-4').click(function(){ $.getJSON('ajax/example.json', {}, function(json){ $('#example-4').html('');
$('#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/>'); }); }) });
Файл example.json: Code { note:{ to:'Tove', from:'Jani', heading:'Reminder', body:'Don\'t forget me this weekend! } }
Пример работы
jQuery.getScriptДанная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры: 1. url запрашиваемого скрипта 2. callback функция, которой будет скормлен результат (необязательный параметр) JavaScript: Code $(document).ready(function(){ $('#example-5').click(function(){ $.getScript('ajax/example.js', function(){ testAjax(); }); }) });
Файл example.js: Code function testAjax() { $('#example-5').html('Test completed'); }
Пример работы
Отправка ФормыДля отправки формы посредством jQuery можно использовать любой из перечисленных способов, а вот для удобства "сбора" данных из формы лучше использовать плагин jQuery Form
Отправка ФайловДля отправки файлов посредством jQuery можно использовать плагин Ajax File Upload или One Click Upload
Взаимодействие с PHPДля организации работы с PHP использую бибилотеку jQuery-PHP, удобно если Вам нравится jQuery ;), подробней читаем в статье PHP библиотека для jQuery.
Примеры использования JSONPОтдельно стоит отметить использование JSONP - ибо это один из способов осуществления кросс-доменной загрузки данных. Если немного утрировать - то это подключение удаленного JavaScript`a, содержащего необходимую нам информациию в формате JSON, а так же вызов нашей локальной функции, имя которой мы указываем при обращении к удаленному серверу (обычно это параметр callback). Чуть более наглядно это можно продемонстрировать следующая диаграмма (кликабельно):
При работе с jQuery имя callback функции генерируется автоматически для каждого обращения к удаленному серверу, для этого достаточно использовать GET запрос ввида: Code http://api.domain.com/?type=jsonp&query=test&callback=?
Вместо последнего знака вопроса (?) будет подставлено имя callback функции. Если же Вы не хотите использовать данный способ, то Вам необходимо будет явно указать имя callback функции, используя опцию jsonp при вызове метода jQuery.ajax().
Google ПоискПример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье "jQuery + AJAX + (Google Search API || Yahoo Search API)"
Yahoo ПоискПример получения и обработки результатов поиска используя Yahoo, более подробную информацию найдете в статье "jQuery + AJAX + (Google Search API || Yahoo Search API)"
JSONP APIПриведу так же небольшой список открытых API с поддержкой JSONP: - Google - поиск и большинство сервисов
- Yahoo - поиск и большинство сервисов
- Flickr
- MediaWiki - соответственно и все производные - Wikipedia, Wiktionary и т.д.
- Digg
- CNET
- aideRSS
СобытияДля удобства разработки, на AJAX запросах висит несколько event`ов, их можно задавать для каждого AJAX запроса в отдельности, либо глобально. На все event`ы можно повесить свою функцию. Пример для отображения элемента с id="loading" во время выполнения любого AJAX запроса: Code $("#loading").bind("ajaxSend", function(){ $(this).show(); }).bind("ajaxComplete", function(){ $(this).hide(); });
Для локальных событий - вносим изменения в опции метода ajax(): Code $.ajax({ beforeSend: function(){
}, complete: function(){
}
});
Для большей наглядности, приведу следующую диаграмму (кликабельно):
Ну и собственно список всех event`ов: - ajaxStart - Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
- beforeSend - Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
- ajaxSend - Срабатывает до отправки запроса, аналогично beforeSend
- success - Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
- ajaxSuccess - Срабатывает по возвращению ответа, аналогично success
- error - Срабатывает в случае ошибки. Локальное событие
- ajaxError - Срабатывает в случае ошибки
- complete - Срабатывает по завершению текущего AJAX запроса (с ошибкои или без - срабатывает всегда).Локальное событие
- ajaxComplete - Глобальное событие, аналогичное complete
- ajaxStop - Данный метод вызывается в случае когда больше нету активных запросов
Так же Вы можете скачать все примеры в одном архиве.
|