Работаем с AJAX и JSON

Если вы начали использовать ajax у себя на сайте, то вероятно озаботились вопросом, в каком формате передавать и принимать данные. Не просто кучу текста, а именно структурированные данные, массив переменных к примеру. Этот вопрос, может быть, уже возникал у вас, когда вы хотели, чтобы сервер выдавал какую-либо информацию в понятном для получателя (приложения какого-нибудь) формате (сами понимаете, что тупо выдавать всё текстом, а потом еще парсить его своими средствами - это боже упаси). Или вы хотели просто сохранить какую-то структуру данных куда-то на потом, как здесь (ссылка), но не знали, надо вам XML или JSON, или еще какая аббревиатура... ну в общем, ща будем вникать.

Для начала разберемся хотя бы с тем, как вообще посылать асинхронные запросы, то бишь ajax.

Я обычно пользуюсь библиотекой jQuery, поэтому и примеры все будут для нее. Ну-с, приступаем.

Первым делом нам нужно подключить данную библотэку (произношение а-ля Гомер Симпсон). Можно, как некоторые люди, скачать ее и загружать со своего сервера, но мы неее, мы слишком круты для этого - будем ее тырить!

Заходим сюда
https://developers.google.com/speed/libraries/devguide#jquery

и копируем сниппет с последней версией

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Его вставляем в <head> своей страницы. Если вы не понимаете, зачем это нужно, то ознакомьтесь, что такое CDN и для чего он предназначен, станет понятнее ;) А если вам лень искать информацию об этом, то кратко: чтоб скрипты эти грузились быстрее у людей.

Едем дальше.

Чтобы непосредственно передать что-то ajax-ом какому-то нашему php-скрипту, в нашем распоряжении имеются следующие функции:
$(element).load()
$.get()
$.post() 
$.getJSON() (по сути то же, что и jQuery.get(), просто формат получаемых данных JSON)
и самая мудреная
$.ajax() 
так что если вы новичок, особо не заморачивайтесь и используйте первые 3-4, они к слову принимают одинаковые параметры:
url (обязательный) - адрес, по которому шлем запрос
data (необязательный) - данные, которые мы передаем; это может быть либо текстовая строка вида var1=hello&var2=world, либо объект вида {var1:'hello',var2:'world'}, но об этом позже
success (необязательный) - функция, которая обработает ответ при удачном исходе

Последняя функция jQuery.ajax() принимает другие параметры, если хотите с ней разобраться, мануал вам в руки и вперед ;)

А в чем разница-то? Функцией get() мы отправляем GET-запросы, функцией post() - POST-запросы. Функция load() рвет шаблон и отправляет LOAD-запросы :) Шутка, нет таких запросов, на самом деле она отправляет GET или POST в зависимости от того, в каком виде вы передадите переменную data. Ну и еще функция load() сразу грузит полученные данные туда, куда вы указали.

Пример:

<div id="cooldiv"></div>
<script type="text/javascript">
$('#cooldiv').load('/loadme.html');
</script>

В div аяксом будет загружено содержимое файла loadme.html. А еще мы можем написать так

$('#cooldiv').load('/loadme.php', {id: 1});

и в скрипте loadme.php получить переменную $_POST['id'] (она будет равна 1 в данном случае), обработать и в зависимости от чего нам там надо отправить обратно нужный текст (т.е. тупо вывести, например функцией echo). Кстати, если мы напишем 

$('#cooldiv').load('/loadme.php', 'id=1');

то тогда надо будет уже смотреть $_GET['id'], ну да ладно. Давайте поподробнее рассмотрим, как эти данные можно собирать из полей страницы.

Скажем, есть у нас такая разметка:

<form>
<p><input type="text" class="inputs4send" name="id" value="1" /></p>
<p><input type="text" class="inputs4send" name="text" value="" /></p>
</form>

Эти данные мы можем выудить с помощью функций serialize() и serializeArray()

Первая вернет это: 'id=1&text=some+text'
Вторая соответственно это: {id:1,text:'some text'}

А вызывать их можно например так 
$('.inputs4send').serialize(); и $('.inputs4send').serializeArray();
или так
$('form input').serialize() и $('form input').serializeArray(),
надеюсь понятно, что они возвращают одно и то же, и в чем вообще разница написания =) Что нет? 8/ Ну тогда прочтите это и ознакомьтесь со всеми примерами.

Теперь пришла пора разобраться с Джейсоном! (звучит как угроза)

Есть разные варианты: 
1) можно запрашивать какие-то готовые данные из js-файла например так $.getJSON('/loadme.js') или
2) запрашивать любой другой функцией (get, post или load) данные, которые выдаст php-скрипт, предварительно преобразовав их в формат JSON, т.е. в PHP мы будем использовать функцию json_encode()

Да, чуть не забыл определение дать: JSON - это простой формат обмена данными, подробнее тут

Разница лишь в том, что $.getJSON вернет сразу объект или массив, а в остальных случаях нам нужно будет использовать функцию $.parseJSON().

Как работать с массивами и объектами в JS, вы уж сами как-нибудь, хотя недурацкие вопросы в комментариях постараюсь без внимания не оставить. Мне иногда говорят, что я мудрено излагаю мысли, так что если вы вдруг не всё поняли, вот вам исходники, авось и легче разобраться будет =)

 Жду с нетерпением
ваших комментариев!
 

Подписаться на RSS

Вы можете нажать "подписаться", чтобы следить за моими новостями!
Так вы всегда будете в курсе появления новостей на сайте =)
О том, что такое RSS можно прочитать здесь.

Подписаться

Подписаться на Twitter

Я специально зарегистрировался в Твиттере, чтобы вы могли следить за обновлениями на сайте =)

Подписаться

Envato marketplace А эти люди занимаются прокатом карнавальных костюмов и масок в Минске. К слову, я им делал сайт.