Уголок веб-разработчика

сайт для веб-мастеров и веб-разработчиков


Реклама на сайте
как разместить свою рекламу?



Блог о веб-разработке!



AJAX и jQuery. Передача параметров из PHP в JavaScript. Использование JSON
(изменения от 10.12.2012)

Автор: Михаил Пестречихин
Источник: http://www.codething.ru/ajax_json.php

Кто программирует AJAX-приложения, часто сталкивается с задачей передачи параметров из PHP или другого языка программирования в JavaScript. Обычно при этом передаются данные из базы данных, доступ к которым имеет только серверный скрипт. Как отобразить их на клиентском компьютере, не перезагружая страницу? Об этом и написана эта статья.

Скажем пару слов о JSON (JavaScript Object Notation). Это текстовый протокол обмена данными, чем-то похожий на более привычный XML, но данные записываются в нем более компактно. Изначально он был разработан для нужд JavaScript (отсюда и получил свое название), но в данное время используется более широко.

Например, если мы хотим записать массив из PHP в JSON, то вот что из этого выйдет.

Исходный массив:

$n = array("Min" => 15, "Sec" => 44);

Этот же массив в формате JSON:

{"Min":"15","Sec":"44"}

Подробная нотация формата JSON и его приложения для различных языков программирования приведены на сайте http://www.json.org/

Рассмотрим простой пример, который будет состоять из двух файлов.

Первым файлом будет PHP-скрипт, который будет формировать JSON-запись, содержащую текущие минуты и секунды.

Вторым файлом будет HTML-страница, содержащая JavaScript с применением библиотеки jQuery, который будет с периодичностью в 1 секунду вызывать PHP-скрипт, получать запись JSON и выводить её содержимое в контейнер веб-страницы.

Файл №1. json.php

<?
	header('Content-Type: application/x-javascript; charset=utf8');
	$n = array("Min" => date("i"), "Sec" => date("s"));
	echo json_encode($n);
?>

В первой строке файла в функции header() мы задаем формат вывода JSON-записи, указываем, что документ является JavaScript'ом в кодировке UTF-8.

Во второй строке формируем ассоциативный массив с полями Min и Sec, в которые записываем текущие значения минут и секунд.

В третьей строке формируем JSON-запись из созданного массива.

Внимание! Функция json_encode() будет работать только в PHP версии 5.2 и выше.

Файл №2. example.html

<html>
<head>
	<script src="jquery.js"></script>
</head>
<body>
	<div id="info">Загрузка...</div>
	<script>
		function json_example()
		{
			$.getJSON('json.php', function(data) {
				s  = "";
				$.each(data, function(key, val) { 
					s = s + key+' => ' + val + '<br/>' 
				});
				$("#info").html(s);
			});
		}
		setInterval(json_example, 1000);
	</script>
</body>
</html>

В HTML-странице создается контейнер info. Функция json_example(), выполняющаяся 1 раз в секунду, использует jQuery-функцию $.getJSON(), с помощью которой получает JSON-запись с сервера, вызывая файл json.php. Далее, полученная JSON-запись разбивается на пары "ключ - значение" функцией $.each(), собирается в HTML-виде в переменную s и выводится в контейнер info, т.е. на экран в клиентском приложении.

Скачать исходные файлы примера (33 кб):
http://codething.ru/files/json.zip

Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. PHP-скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файлы.

Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/

Хотите дополнить - пишите: studio@pestr.ru

Статьи по теме

AJAX и jQuery. Динамическое обновление контента. Основы;
AJAX и jQuery. Как загрузить скрипт JavaScript динамически?;
Скрипт для голосования своими руками на PHP и MySQL с использованием AJAX;
Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery.







Rambler's Top100
© Студия Михаила Пестречихина, 2008-2017
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.
Хостинг «Джино»