Простые решения, простая жизнь!Привет. Сегодня речь пойдет о том, как в Вашем веб-приложении легко и просто настроить взаимодействие между основной страницей и динамически подгружаемым содержимым.
Естественно – будем использовать AJAX. Естественно – через Jquery. На серверной стороне - PHP
Самый простой способ – когда у нас есть контейнер с id и мы с помощью команды на JavaScript $(id).load(‘script.php’,post_data); загружаем в него какое-то содержимое (Наверное, все так делали). И все хорошо, все элементарно. Но не очень функционально, и не всегда может нам подойти. Зато – мы получаем ответ в нужной нам DOM структуре в данный элемент. Хорошо? Хорошо.
Данный формат хорошо подходит, когда нужно запихнуть содержимое только для одного элемента. Для множества блоков – нам нужно делать либо несколько запросов, что плохо с точки зрения нагрузки, либо выполнять какие-то скрипты на стороне клиента, которые встраивают данные в блоки динамически. Поскольку возможных команд может быть много, а блоки всегда могут быть разными – приходится использовать универсальную обратную функцию от сервера EVAL и наш запрос бы звучал так:
$.post('script.php',post_data,function(data){
eval(data);
});
Хорошо? Плохо. EVAL– это плохо. Зато работает? Да, работает. Почему плохо? Потому что не безопасно. Зато универсально. Слишком универсально. Наше приложение при неудачно полученных данных может само себя покорежить на стороне клиента, либо привести к выполнению вредоносного кода. Да и медленная она. Все таки – от сервера должны идти данные, а скрипт должен делать какие-то выводы и дергать уже предусмотренные функции.
Тогда встает вопрос – как же передать множество данных и разделить их?
Можете использовать разделитель на стороне клиента и сервера. В качестве разделителя можно использовать какой-либо редко встречаемый символ, например ||
На стороне клиента функция будет выглядеть как
$.post('script.php',post_data,function(data){
var arr=data.split('||');
if(arr[0]=='…')…
});
Уже лучше. Мы действительно передаем данные. Правда мы передаем данные без разделения на ключи и значения. Мы только можем узнать, сколько данных передано, а что это за данные – можно только догадываться.
На помощь приходит JSON
JSON– формат, позволяющий серилизировать массив с одну строку с разделением ключ-значение. Для разделения используются символы {“key”:”val”}, с экранированием ключевых символов {}:”. JSONтакже может содержать многоуровневый массив, что очень удобно при разборе данных.
Чтобы зашифровать массив на стороне сервера PHP– используется простая функция json_encode($array); Все. Правда – если у Вас до сих пор кодировка Windows-1251 – для шифровки кириллицы – Вам придется сконвертировать все элементы массива в UTF-8 (Еще один аргумент в пользу кодировки UTF-8). Если же вы все таки используете другую кодировку - Вам придется применить iconvдля каждого элемента массива. Пример реализации расписан, например, здесь
И передаем клиенту данные при помощи обычного вывода echo(), или die()
Клиенту на своей стороне надо расшифровать строку в массив. В Jquery уже предусмотрели подобную функцию. Общий запрос теперь будет выглядеть так:
$.post(‘script.php’,post_data,function(data){
ansver=$.parseJSON(data);
if (ansver['error'])alert('Ошибка'+ansver['error']);
if (ansver['text'])…
…
});
Теперь мы можем элементарно добраться до любого элемента массива, узнать, что он есть и выполнить сразу несколько заранее предусмотренных действий. А чтобы нам было совсем удобно – в Firebug существует вкладка JSON, которая поможет нам увидеть все получаемые данные для расшифровки. Теперь мы можем также передавать отладочную информацию, которая не будет отражаться в программе (если потребуется).
Среди еще одного плюса такого подхода – универсальность и не привязанность данных к содержимому. Сервер передает лишь данные, как ответ на запрос клиента, а что с ними делать – клиент решает сам. В каком виде их отобразить, или показать ошибку – это все делается на стороне клиента. Нам больше не нужно привязываться к верстке на стороне сервера, или использовать любой вызов JavaScript функций.
Все. Элементарно, универсально, эффективно.
А есть ли альтернативы? Да. XML, SOAP. Но с ними сложнее. По этому, я о них рассказывать не буду. Они больше используются для сопряжения разных систем между собой.
Пример вывода данных JSON через Firebug