Ajax в Dojo

Сегодня мы рассмотрим, как пользоваться механизмами для работы с Ajax в Dojo. Про Ajax я уже писал в другой статье, но то было для библиотеки jQuery. Но все равно советую прочитать сначала ее, прежде чем продолжать чтение дальше. Иначе некоторые моменты могут быть непонятными.

Ajax в Dojo реализован через так называемый XMLHttpRequest. Первым делом рассмотрим самый простой случай: когда скрипт на php вернет нам какой-то html-код, а мы этот код присвоим какому-нибудь элементу на странице. Причем сделаем это без перезагрузки страницы (на то и Ajax :) ). Формат этого простого случая называется AHAH.

Сделаем так, чтобы при нажатии кнопки мы узнали о номере версии PHP.

Для этого напишем очень простой скрипт, который будет просто возвращать номер версии PHP: <? echo phpversion(); ?>. И поместим этот код в файл version.php.

Теперь нам нужно создать страницу, на которой и будет происходить действо:

ahah.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dojo AHAH Demo</title>
	<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
</head>
<body>
	PHP version: <span id="php_version"></span>
	<br /><br />
	<input type="button" id="my_button" value="Get It!" />
	<script type="text/javascript">
	dojo.addOnLoad(function() {
		var my_button = dojo.byId("my_button");
		dojo.connect(my_button, "onclick", function() {
			dojo.xhrGet({
				url: "version.php",
				handleAs: "text",
				load: function(response, ioArgs) {
					dojo.byId("php_version").innerHTML = response;
					return response;
				},
				error: function(response, ioArgs) {
					console.error("HTTP status code: ", ioArgs.xhr.status);
					return response;
				}
			});
		});
	});
	</script>
</body>
</html>

Предполагается, что ahah.html лежит в одной директории с version.php.

Как видим, для взаимодействия с php-скриптом мы использовали функцию dojo.xhrGet. В качестве параметра url мы указали путь к нашему скрипту (кстати, можно указывать и реальный url-путь, а не только относительный в пределах сервера). Параметр handleAs определяет, как обрабатывать результат, и может принимать одно из следующих значений: text (по-умолчанию), json, json-comment-optional, json-comment-filtered, javascript, xml.

Нас интересуют пока только два: text и json. Если Вы просто хотите в каком-то элементе поставить текст или html-код через php-скрипт, делайте это с атрибутом handleAs, равным text.

Также мы определяем две функции, которые будут выполнены сразу после успешной или неуспешной операции: load и error. Т.е. как только скрипт version.php загрузился и вернул текст, срабатывает функция load (если все ок) или функция error (если произошла ошибка).

В этом простом примере мы скриптом просто вернули какой-то текст. Но бывают ситуации, когда нам нужно вернуть не один, а несколько текстов. И тогда на помощь приходит формат AJAJ, а механизм называется JSON.

Пусть теперь наш php-скрипт вернет не только версию PHP, но и текущее время, а также строку, которую мы ему передадим (тем самым продемонстрируем, как передавать параметры в php-скрипт).

Переименуем наш скрипт version.php в info.php и сделаем его содержимое таким:

info.php

<?
	echo "{'version': '<b>".phpversion()."</b>',
	       'time': '".date('H:i:s')."',
		 'string': '".$_REQUEST['string']."'}";
?>

ajaj.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                      "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Dojo AJAJ Demo</title>
	<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
</head>
<body>
	Enter any string: <input type="text" id="my_string" /><br /><br />
	PHP version:  <span id="php_version"></span><br />
	Current time: <span id="time"></span><br />
	Your string:  <span id="string"></span>
	<br /><br />
	<input type="button" id="my_button" value="Get It!" />
	<script type="text/javascript">
	dojo.addOnLoad(function() {
		var my_button = dojo.byId("my_button");
		dojo.connect(my_button, "onclick", function() {
			var string = dojo.byId("my_string").value;
			dojo.xhrGet({
				url: "info.php",
				content: {string: string},
				handleAs: "json",
				load: function(response, ioArgs) {
					dojo.byId("php_version").innerHTML = response.version;
					dojo.byId("time").innerHTML = response.time;
					dojo.byId("string").innerHTML = response.string;
					return response;
				},
				error: function(response, ioArgs) {
					console.error("HTTP status code: ", ioArgs.xhr.status);
					return response;
				}
			});
		});
	});
	</script>
</body>
</html>

Кроме функции dojo.xhrGet есть еще dojo.xhrPost, которая выполнит то же самое, но методом POST.

Демонстрацию выполнения последнего примера можно посмотреть здесь.

Мы рассмотрели основные возможности для работы с Ajax в Dojo, которых обычно вполне достаточно для достижения большинства целей. Но еще, что можно изучить в этом направлении - это передачу форм скрипту на php (например, как загрузить файл с помощью формы на сервер). Но это я оставлю до следующего раза.

Остальные параметры рассмотренных функций Вы сможете изучить самостоятельно в справочной системе по API в Dojo.

Удачи! :)



Теги: , ,


Читайте также:



16 Ответов на “Ajax в Dojo”

  1. Георгий

    Спасибо за полезную статью!
    Буду рад видеть еще статьи про Dojo.

  2. novice

    Незачто, на здоровье! 😉

  3. dobs

    Спасибо за статейку, просто и понятно. Жду про загрузку файлов…

  4. novice

    2dobs: Про загрузку файлов уже написана статья.

  5. Inilus

    Всё замечательно, только русский текст посредствам dojo.xhrGet не передается ((
    Может есть решение этой проблемы?

  6. Inilus

    Ага, на сайте dojo был такой вопрос.
    Рекомендация использовать енкодирование utf-8, вопрос теперь в том, как бы это корректно сделать? Может кто-нить поможет?

  7. novice

    2 Inilus: у меня в примере к этой статье вроде передача русских символов работает. Кодировка utf-8 вообще считается универсальной, поэтому с ней проблем обычно не возникает. У меня в блоге используется именно она. Чтобы передавать и отображать информацию в utf-8 в страничке, нужно поставить мета-тег:

    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

    Только учтите, что при этом нужно контент страницы держать в utf-8.

  8. Vadim

    Замечательно. А как на счет утечки памяти если у клиента приложение должно работать сутками?

  9. novice

    Хм, хороший вопрос. Видимо, должен быть какой-то механизм очистки памяти, как в Java - сборщик мусора.

  10. Inilus

    2novice: Спасибо!

  11. Arthur

    Статья не плохая, хотя я ищу уже в сети битый час информацию по другому вопросу:
    хочу использовать в ZendFramework (но это не важно):
    пробую написать сложную валидацию формы черех отправку запросов dojo.xhrPost (с соответсвующей обработкой на PHP).
    Интересует имеются ли какие-либо встроенные средства в DOJO - чтобы валидация ппроходила через запрос и Json ответ…

  12. Recent Links Tagged With "byid" - JabberTags

    […] public links >> byid WatiN API - ClearCookies Saved by julioenparis on Tue 18-11-2008 Ajax в Dojo Saved by BeetleBailey on Mon 10-11-2008 JavaScript getElementById Issues and How To Fix Saved by […]

  13. Василий

    Спасибо, полезная информация.

  14. Василий

    в ZendFramework есть отдельный клас для работы с Json,
    там надо будет вставить в контролеере всего две строчки чтоб из Json сделать обычный массив.
    приблизительно такие:
    require_once ‘Zend/Json.php';
    $arrayJson = Zend_Json::decode($this->_request->getParam(‘Json’));

    [ссылка]

  15. Zabuhailo

    PHP так же имеет собственные средства работы с JSON:
    json_encode()
    json_decode()

  16. Витя Ш.

    PHP так же имеет собственные средства работы с JSON:
    json_encode()
    json_decode()

    имеет после того как библиотечку закомпилишь, не на всех хостингах она стоит.


© Copyright. . I-Novice. All Rights Reserved. Terms | Site Map