Отправляет email-рассылки с помощью сервиса Sendsay

Web-Мастеринг - с нуля до профи

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Бизнес и карьера в интернете" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Елена Иванова

Статистика

4.017 подписчиков
0 за неделю
←   Все выпуски   →

Познавательное программирование Программирование AJAX


Познавательное программирование

(comp.soft.prog.urisprog)

Выпуск 36


Здравствуйте, Уважаемые подписчики!

Простой пример использования AJAX

AJAX (от англ. Asynchronous JavaScript and XML — «асинхронный JavaScript и XML») — это подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения могут быть сделаны более быстрыми и удобными.

Сейчас я приведу коды простого примера использования технологии AJAX

Это код index.htm

 
<html>
<body>
<title>ajax calculator</title>
<script language="JavaScript" src="JSHttpRequest/JSHttpRequest.js"></script>
<script language="JavaScript">
var is_ie = (/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent));
function GID(id) { return (is_ie) ? document.all[id] : document.getElementById(id); }
function Calcul(val, val2) {
   var nameBlock = 'container';
   var req = new JSHttpRequest();
   req.onreadystatechange = function() { if (req.readyState == 4) { GID(nameBlock).innerHTML = req.responseJS.res; } }
   req.caching = false;
   req.open('GET', 'action.php', true);
   req.send({ a: val, b: val2 });
}
</script>
</body>
<h1>ajax calculator</h1>
<form name="form" method="post" action="action.php" />
<input type="text" name="a" id="a" />&nbsp;+&nbsp;
<input type="text" name="b" id="b" />
<input type="button" value="=" onClick="Calcul(document.form.a.value, document.form.b.value);" />
</form>
<div id="container"></div>
 
</html>

А это action.php

 
<?php
 
include_once('JSHttpRequest/JSHttpRequest.php');
$JSHttpRequest = new JSHttpRequest("windows-1251");
 
$a = $_REQUEST['a'];
$b = $_REQUEST['b'];
 
$ret = $a + $b;
 
$_RESULT = array(
 "a"   => $a,
 "b"   => $b,
 "res" => $ret,
);
 
?>

Для правильной работы необходимо подключить библиотеку JSHttpRequest

Теперь пара комментариев по поводу кода. Этот код осуществляет обычное суммирование данных пришедших с полей формы и выводит результат в блок с идентификатором container. Особенность лишь в том, что обработка результатов пришедших с формы идет не синхронно (по порядку) как это делалось раньше, а асинхронно (на лету) с использованием библиотеки JSHttpRequest

1. При нажатии на кнопку формы происходит вызов функции Calcul(); в которую передаются значения полей формы - document.form.a.value, document.form.b.value

2. В функции Calcul() задается имя блока контейнера получателя информации var nameBlock = 'container';

3. Далее создается объект класса JSHttpRequest var req = new JSHttpRequest();
У этого класса есть следующие свойства

Свойство Описание
onreadystatechange обработчик события, которое происходит при каждой смене состояния объекта
readyState возвращает текущее состояние объекта (0 — неинициализирован, 1 — открыт, 2 — отправка данных, 3 — получение данных и 4 — данные загружены)
responseText текст ответа на запрос
responseXML текст ответа на запрос в виде XML, который затем может быть распарсен посредством DOM
status возвращает HTTP-статус в виде числа (404 — «Not Found», 200 — «OK» и т. д.)
statusText возвращает статус в виде строки («Not Found», «OK» и т. д.)

Таким образом следующий код проверят загружены ли данные и если данные загружены он присваевает контейнеру с именем nameBlock результат отработки скрипта обработчика. В данном случае скриптом обработчиком является файл action.php в котором происходит суммирование значений полей формы.

 
   req.onreadystatechange = function() { if (req.readyState == 4) { GID(nameBlock).innerHTML = req.responseJS.res; } }
   req.caching = false;
   req.open('GET', 'action.php', true);
   req.send({ a: val, b: val2 });
 

4. Таким образом в контейнер с именем container подгружаются сумма значений полей формы но загрузка происходит не последовательно с ожиданием отработки файла action.php а асинхронно за счет асинхронной передачи данных в скрипт (req.responseJS.res), не по методу POST, а по методу GET.

Скачать пример ajax.zip



Все вопросы, пожелания и предложения ведущему рассылки, прошу слать на e-mail: urisff@inbox.ru

Все статьи публикуются здесь только с разрешения (или рекомендации) автора.

Если вы хотите опубликовать здесь свою статью, то сделайте это, переслав её мне (желательно в виде html, причём без картинок).

В случае, если вы будете использовать приведённые в этой рассылке материалы, не забудьте сделать ссылку на эту рассылку.

Ведущий рассылки:
Набатников Иван, urisff@inbox.ru
http://www.tireal.com

В избранное