Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов…
Что такое AJAX я думаю рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы…
Примечание: Во всех примерах используется сокращенный вариант вызова jQuery методов, используя функцию $ (знак доллара)
jQuery(..).load
Начнем с самого простого – загрузка HTML кода в необходимый нам DOM элемент на странице. Для этой цели нам подойдет метод load. Данный метод может принимать следующие параметры:
- url запрашиваемой страницы
- передаваемые данные (необязательный параметр)
- функция которой будет скормлен результат (необязательный параметр)
Приведу пример JavaScript кода:
$(document).ready(function(){ // по окончанию загрузки страницы
$('#example-1').click(function(){ // вешаем на клик по элементу с id = example-1
$(this).load('ajax/example.html'); // загрузку HTML кода из файла example.html
})
});
Пример подгружаемых данных (содержимое файла example.html):
Example<br/> Data Loaded By AJAX<br/> Bye-Bye
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’а:
$.ajax({
url: '/ajax/example.html', // указываем URL и
dataType : "json", // тип загружаемых данных
success: function (data, textStatus) { // вешаем свой обработчик на функцию success
$.each(data, function(i, val) { // обрабатываем полученные данные
/* ... */
});
}
});
jQuery.get
Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:
- url запрашиваемой страницы
- передаваемые данные (необязательный параметр)
- callback функция, которой будет скормлен результат (необязательный параметр)
- тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
jQuery.post
Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:
- url запрашиваемой страницы
- передаваемые данные (необязательный параметр)
- callback функция, которой будет скормлен результат (необязательный параметр)
- тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)
JavaScript:
$(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'); // указываем явно тип данных
})
});
Файл example.xml:
<?xml version="1.0" encoding="UTF-8"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note>
jQuery.getJSON
Загружает данные в формате JSON (удобней и быстрее нежели XML). Может принимать следующие параметры:
- url запрашиваемой страницы
- передаваемые данные (необязательный параметр)
- callback функция, которой будет скормлен результат (необязательный параметр)
JavaScript:
$(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/>');
});
})
});
Файл example.json:
{
note:{
to:'Tove',
from:'Jani',
heading:'Reminder',
body:'Don\'t forget me this weekend!'
}
}
jQuery.getScript
данная функция загружает и выполняет локальный JavaScript. Может принимать следующие параметры:
- url запрашиваемого скрипта
- callback функция, которой будет скормлен результат (необязательный параметр)
JavaScript:
$(document).ready(function(){ // по завершению загрузки страницы
$('#example-5').click(function(){ // вешаем на клик по элементу с id = example-5
$.getScript('ajax/example.js', function(){ // загрузку JavaScript'а из файла example.js
testAjax(); // выполняем загруженный JavaScript
});
})
});
Файл example.js:
function testAjax() {
$('#example-5').html('Test completed'); // изменяем элемент с id = example-5
}
Отправка Формы
Для отправки формы посредством 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 запрос ввида:
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 запроса:
$("#loading").bind("ajaxSend", function(){
$(this).show(); // показываем элемент
}).bind("ajaxComplete", function(){
$(this).hide(); // скрываем элемент
});
Для локальных событий – вносим изменения в опции метода ajax():
$.ajax({
beforeSend: function(){
// Handle the beforeSend event
},
complete: function(){
// Handle the complete event
}
// ...
});
Для большей наглядности, приведу следующую диаграмму (кликабельно):
Ну и собственно список всех event’ов:
- ajaxStart – Данный метод вызывается в случае когда побежал AJAX запрос, и при этом других запросов нету
- beforeSend – Срабатывает до отправки запроса, позволяет редактировать XMLHttpRequest. Локальное событие
- ajaxSend – Срабатывает до отправки запроса, аналогично beforeSend
- success – Срабатывает по возвращению ответа, когда нет ошибок ни сервера, ни вернувшихся данных. Локальное событие
- ajaxSuccess – Срабатывает по возвращению ответа, аналогично success
- error – Срабатывает в случае ошибки. Локальное событие
- ajaxError – Срабатывает в случае ошибки
- complete – Срабатывает по завершению текущего AJAX запроса (с ошибкои или без – срабатывает всегда).Локальное событие
- ajaxComplete – Глобальное событие, аналогичное complete
- ajaxStop – Данный метод вызывается в случае когда больше нету активных запросов
Так же Вы можете скачать все примеры в одном архиве.
Цикл статей
- jQuery для начинающих
- jQuery для начинающих. Часть 2. JavaScript Меню
- jQuery для начинающих. Часть 3. AJAX
- jQuery для начинающих. Часть 4. Селекторы
This entry was posted
on Wednesday, October 8th, 2008 at 08:30 and is filed under JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
<div id="intro"></div>
<div id="loading" style="display: none">Ð
Здравствуйте. Я пытаюсь использовать функцию load() для загрузки содержания страницы из внешнего url. То есть http://... и т.д. Почемуто не работает. Подскажите пожалуйста работает ли эта функция с внешнеми страницами или нет? И есть ли какойнибудь способ подгружать данные с внешних url использую jquery?
Проблема решена, невнимательно прочитал документацию. Можно удалить последние мои посты.
Антон, сохранил ваш пример себе на комп, полностью со всеми файлами со стилями и библиотекой jQuery. И пример на компе не захотел работать, ничего не происходит при клике. Открыл в HomeSite, он выдал ошибку сценария: Строка: 19, Символ: 21, Ошибка: Permission denied.
Подскажите в чем проблема?
Таки в какой момент появляется ошибка…
ой извините пожалуйста, забыл уточнить, что это я говорю о примере функции jQuery(..).load. Ошибка появляется в тот момент когда я нажимаю на “Click to update”, тоесть когда должно подгрузится содержимое example.html.
Здравствуйте.
Подскажите как правильно использовать функцию jQuery.getScript на моём конкретном примере.
Использую этот скрипт
При помощи функции overlay вывожу контент, который содержит ToolTip.
Как правильно вписать сюда функцию jQuery.getScript, что бы в выводимом контенте работал tooltip?
Оба эти скрипта используют общую библиотеку
overlay
$(function() { // if the function argument is given to overlay, // it is assumed to be the onBeforeLoad event listener $("a[rel]").overlay({ expose: 'darkred', effect: 'apple', onBeforeLoad: function() { // grab wrapper element inside content var wrap = this.getContent().find("div.wrap"); // load the page specified in the trigger wrap.load(this.getTrigger().attr("href")); } }); });и tooltip
$(document).ready(function() { $("#demo img[title]").tooltip('#demotip'); });Попробуйте что-то типа следующего:
$(function() { // if the function argument is given to overlay, // it is assumed to be the onBeforeLoad event listener $("a[rel]").overlay({ expose: 'darkred', effect: 'apple', onBeforeLoad: function() { // grab wrapper element inside content var wrap = this.getContent().find("div.wrap"); // load the page specified in the trigger wrap.load(this.getTrigger().attr("href")); }, onLoad: function() { this.getContent().find("div.wrap img[title]").tooltip('#demotip'); } }); });Сейчас попробую,вот только вопрос:
Искомая картинка img находится в отдельном слое, т.к. [title] нужен только от неё, другие img не используются для tooltip, правильно ли я сделаю дописав код таким образом?
onLoad: function() { this.getContent().find("div.wrap div.mydiv img[title]").tooltip('#demotip'); }Ваш вариант работает.
Правда при задании параметров отображения для tooltip работают не так как должны, отображение смещается совсем не соотносясь с заданными параметрами. Пробовал указывать различные и никогда не получалось соответствия.
onLoad: function() { this.getContent().find("div.wrap img[title]").tooltip({ position: 'center left', tip: '#demotip'}); }Моя попытка указать другой слой потерпела неудачу.
С позиционирование разобрался, помог параметр relative: ‘true’,:
onLoad: function() { this.getContent().find("div.wrap img[title]").tooltip({ position: 'center left', relative: 'true', tip: '#demotip'}); }Теперь пытаюсь победить ситуацию, когда в слое div.wrap есть слой div.mydiv и вот в нём то и есть искомая картинка, т.к. к другим изображениям не надо использовать tooltip, пока терплю неудачу.
Антон, вот сижу экспериментирую с функцией jQuery(..).load, получилось, инфа подгружается, но при этом страница перематывается вверх и из-за этого кажется что страничка обновляется. Как сделать так, чтобы если у меня информация подгружается в середину страницы чтобы я там и оставался на середине страницы?
Подозреваю, что контент подгружается по клику на ссылку с адресом href=”#” – засчет чего и происходит “подскакивание”, чтобы это пофиксить необходимо возвращать false в функции обработчике клика.
Здравствуйте Антон, я тут уже всю голову сломал и не знаю что и делать, делаю галерею фотографий на сайте, и там же ставлю меню вверху страницы простенькое (4 ссылочки), но все как бы должно работать с поддержкой jquery ? Но получается так , что один код начинает работать за место второго и ссылочки открываются в появляющемся окошке лайтбокса . Это точно я как то неправильно встраиваю код , но вот что с ним ума не приложу. Если не затруднит посмотрите и опишите где косяк, заранее благодарен.
вот сам код
<link rel="stylesheet" href="jquery.fancybox/lavalamp_test.css" type="text/css" media="screen"> <script type="text/javascript" src="jquery.fancybox/jquery-1.1.3.1.min.js"></script> <script type="text/javascript" src="jquery.fancybox/jquery.easing.min.js"></script> <script type="text/javascript" src="jquery.fancybox/jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script> <link rel="stylesheet" type="text/css" href="jquery.fancybox/jquery.fancybox.css" media="screen"> <script type="text/javascript" src="jquery.fancybox/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.fancybox/jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.fancybox/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a").fancybox(); }); </script> <style>здравствуйте.
есть форма. в ней – поля файл и текст.
форма перехватывается jquery и аяксом отдается на сервак.
в мозилле всё замечательно.
а вот в осле и опере…
если отправлять текст без файла, то тоже замечательно.
как только цепляем файл (картинко 50 кб), ничего никуда не уходит.
пробовал оба метода ajaxSubmit и ajaxForm.
множество других форм с текстовыми полями – работают.
вот сама форма:
вот обработчик (правила валидатора я вырезал):
$("#ufile_jForm").validate({ submitHandler: function(form) { jQuery(form).ajaxSubmit({ target: "#result", dataType: "json", timeout: 3000 });кстати, о тех 2 ссылках в статье про отгрузку файлов: первый вариант не работает с оперой, а второй вовсе не открывается.
Как лучше реализовать AJAX, при помощи jQuery или через javascript без всяких фреймворков?
дак jQuery это и есть фреймворк…
Добрый день!
Помогите решить проблему.
В сайте использую библиотеку jQuery.
Во всех браузерах скрипты работают нормально за исключением IE, который выдаёт ошибку “Исключение брошено и не поймано” и ссылается при этом на jquery.js
Заранее очень благодарен!!!
Если запостите ссылку на ресурс, то возможно помогу…
Подскажите пожалуйста, использую метод load, но скрипт отвечает не сразу, а с задержкой, как сделать во время этой задержки бегающий кружок(картинку вставить).
ps разумеется в тотже dom элемент на странице.
Смотреть в сторону ajaxStart
Проблема: Не получается передать переменную NAME в testpage.php, для того что бы уже дальше с ней работать.
index.html
<html> <head> <script type="text/javascript" src="js/jquery-1.4.min.js"></script> <script type="text/javascript"> $(document).ready(function (){ $.ajax({ url: 'testpage.php', data: "name=John", type: 'POST', dataType: 'html', success: function (result){alert (result);} }); }); </script> </head> <body> <div id="ajaxload"></div> </body> </html>testpage.php
После долгого шивеления мозгами в моей умной голове я понял, что ошибка спряталась в PHP файле, а точнее в строке $_POST['name']=$name;. Её нужно заменить на $name=$_POST['name']; и всё…
Здравствуйте!
пример с постраничной навиг. мы по ссылке передаем на эту же стр. параметры.
не могу нигде найти, примеры вывода кроме алертов и такого .. $(“#content”).html(data); -возврат таким образом не подходит.
Я не имею возможности с манипуляциям, массивом-переменными.
Что можете посоветовать?
Заранее благодарен!
Парни отправляю запрос на обработчик, в обработчике получаю даные и отправляю обратно в div но вместо русских букв квадратики. Где что недописал?
Привет,помогите если можете.
Вот только начал разбираться с библиотекой jQuery и у меня появилась проблемка.
При нажатии на ссылку выполняется POST-запрос, затем в загружаются ссылки.
ПРоблема состоит в том чтобы при НАЖАТИИ на одну из появившихся ссылок появились ссылки относящиеся к нажтой ссылке при чем из этогоже index.php файла и в этом же самом диве – .
jQuery("#tasks").click(function(){ jQuery.post("index.php", function(data){ jQuery("#main").html(data); return false; }); });как это сделать??
Как можно сделать это,чтобы
Подозреваю, нужно смотреть в сторону live метода, дабы на подгружаемый контент автоматически вешались нужные обработчики событий…