28 Апр
Опубликовал: Иван Тепляков, категория: Javascript, php
Эта тема достаточно хорошо освящена на просторах интернета. Цель поста – подробный практический пример.
Вообще ajax запросы с появлением таких яваскриптовых библиотек как JQuery, Prototype, Dojo и др. стали очень легко и быстро реализуемые. Всю рутинную работу по созданию объекта XMLHttpRequest берет на себя библиотека, нам остается только указать к какому скрипту на сервере надо слать запрос и опции. Проблема возникает, когда скрипт лежит на другом домене. Тогда привычный $.ajax(options) не помогает из-за политики безопасности.
На помощь приходит технология JSONP (JSON Padding). Не буду вдаваться в теоретические подробности ибо воды налито и так не мало, перейдем к практике.
Задача: вывести комментарии к материалу на сайте. Сложность в том, что база и интерфейс лежат на другом сервере.
Создаем там php-скрипт, который будет нам отдавать список комментариев в json формате.
Например так:
// принимаем id материала, к которому нужны комменты $material_id = intval($_GET['id']); if (isset($material_id) && !empty($material_id)) { $posts = /* получаем из базы комменты для материала */ } else { $posts = array(); // отдаем пустой массив } echo $_GET['callback'] . '(' . posts2txt($posts) . ');';
Пишем функцию post2txt(), которая будет перебирать массив с комментариями и оформлять их в JSON объект, чтобы например получился результат:
{
posts: [
{ "htmltxt" : "Автор1 - комментарий"},
{ "htmltxt" : "Автор2 - комментарий"}
]
}С этим, я думаю, проблем ни у кого не возникнет.
Что мы в результате имеем: сервер отдает нам яваскрипт-функцию, которая исполнится на сервере с которого мы будем делать запрос сюда. Теперь перейдем к клиентской части.
В место, где мы хотим, чтобы выводились комментарии пишем:
<div id="cmnts">Идет загрузка комментариев... (Или можно gif поставить)</div> <script type="text/javascript" language=javascript> $(document).ready(function(){ $.getJSON('http://www.zr.ru/forum/zr_tools/getcomments.php?id=<?= $material_id ?>&callback=?', function(data){ /* в переменную data придут данные*/ $("#cmnts").html(""); /* очищаем div от прелоадера */ $.each(data.posts, function(i,item){ $("#cmnts").append(item.htmltxt); /* вставляем комменты в элемент на странице */ }); }); }); </script>
Собственно соль в добавлении «&callback=?» в конец строки адреса скрипта. Туда JQuery будет генерировать случайное число для имени callback-функции.
Оставить комментарий