Полезное для программистов:

Фриланс
Новости
Статьи
   
Рубрики:


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

Поиск:
Для тех, кто не знает, теперь модно использовать сверх динамичные страницы.
То есть страницы, которые получают или отправляют данные на сервер без перезагрузки самой себя, практически незаметно для пользователя.

для этого есть три (и ещё один, но о нём позже) способа:
  • HttpRequest ( ActiveX Microsoft.XMLHTTP для MSIE или XMLHttpRequest для Firefox )
    MSIE 6.0+, Firefox 1.0+, Netscape 7+
  • Загрузка php-обработчика, как внешнего скрипта ( <script src="loader.php?param=value"></script> )
    MSIE 5.5+, Opera 7+
  • Использование невидимого iFrame ( нульфрейма )
    MSIE 5.5+, Opera 7+, Firefox 1.0+, Mozilla 0.9+, Netscape 7+
вот пример работы всех этих трёх путей:

http://alx.com.ru/stats/dataload/test.html

Код

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
body {overflow:auto;margin:10px;font-family:Verdana;font-size:11px;}
</style>

<script>
// загрузка данных с сервера без прямого обновления страницы
// использование ActiveX Microsoft.XMLHTTP для MSIE или XMLHttpRequest() для Firefox

var xmlDoc = null;

function http_request()
{if (typeof window.ActiveXObject != 'undefined' )
{xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc.onreadystatechange = process;
}
else
{xmlDoc = new XMLHttpRequest();
xmlDoc.onload = process;
}
xmlDoc.open("GET", "HttpRequest.php?act=" + document.getElementById("param1").value, true);
xmlDoc.send(null);
}

function process()
{if (xmlDoc.readyState == 4)
{document.getElementById('res').innerHTML += xmlDoc.responseText;
}
}
</script>

<script src="" id="dataloader"></script>
<script>
// загрузка данных с сервера без прямого обновления страницы
// загрузка в src тега <script> php-файла

function change_src()
{var link = "change_src.php?&act=" + document.getElementById("param1").value + "&rand=" + Math.random();
var old_s = document.getElementById('dataloader');
if (old_s)
{old_s.parentNode.removeChild(old_s);
}
var s = document.createElement('script');
s.setAttribute('type', 'text/javascript');
s.src = link;
s.id = 'dataloader';
document.getElementsByTagName('head')[0].appendChild(s);
}
</script>

<script>
// загрузка данных с сервера без прямого обновления страницы
// обновление невидимого iFrame ( нульфрейма )

function iframe()
{top.frames['myframe'].document.location.href = "iframe.php?&act=" + document.getElementById("param1").value
}
</script>

<script language="JavaScript" src="dk_JsHttpRequest/Js.js"></script>
<script>
// загрузка данных с сервера без прямого обновления страницы
// с использованием библиотек Subsys_JsHttpRequest ( разработчик - "dk lab" | http://dklab.ru/ )

function dk_JsHttpRequest(force)
{var query = '' + document.getElementById('param1').value;
var req = new Subsys_JsHttpRequest_Js();
req.onreadystatechange = function()
{if (req.readyState == 4)
{if (req.responseJS)
{document.getElementById('res').innerHTML +=
'md5('+(req.responseJS.q||'undefined')+') = ' + (req.responseJS.md5||'undefined') + '<br>';
}
}
}
req.caching = true;
req.open('POST', 'dk_JsHttpRequest.php?test=abc', true);
req.send({ q: query, test:303 });
}
</script>

</head>

<body>
<iframe name="myframe" id="myframe" width="0" height="0" style="visibility:hidden;"></iframe>
<b>Запрос :</b> <input type="text" id="param1" />
<br><br><br>
<input type="button" value="Subsys_JsHttpRequest" onclick="dk_JsHttpRequest(true)" /> // MSIE 5.5+, Opera 7+, Firefox 1.0+, Netscape 7+
<br><br><br>
<input type="button" value="HttpRequest" onclick="http_request()" /> // MSIE 6.0+, Firefox 1.0+, Netscape 7+
<br><br>
<input type="button" value="PHP в <script>" onclick="change_src()" /> // MSIE 5.5+, Opera 7-, Firefox 1.0+, Mozilla 0.9+, Netscape 7-,
<br><br>
<input type="button" value="iFrame" onclick="iframe()" /> // MSIE 5.5+, Opera 7+, Firefox 1.0+, Mozilla 0.9+, Netscape 7+
<br><br><br>
<div id="res" style="background:#6699cc;border:1px solid darkblue;color:white;font-family:Verdana;font-size:11px;padding:10px;width:400px;height:300px;overflow:auto;">
</div></script>
</body>
</html>


а вот соодержимое всех трех php-обработчиков:

HttpRequest.php
Код

<?
$act = $_GET['act'];
echo "md5({$act}) = ".md5($act)."<br>";
?>


change_src.php
Код

<?
$act = $_GET['act'];
echo "document.getElementById('res').innerHTML += 'md5({$act}) = ".md5($act)."<br>'";
?>


iframe.php
Код

<?
$act = $_GET['act'];
echo "<script>top.document.getElementById('res').innerHTML += 'md5({$act}) = ".md5($act)."<br>';</script>";
?>


все три способа имеют свои преимущества и недостататки.

XMLHttpRequest
+ имеет самую высокую скорость выполнения
+ незаметен для пользователя (никаких прелоадеров в statusbar`е)
- поддерживается только MSIE 6.0+, Firefox и Netscape 7+
- не сработает, если в MSIE отключена обработка ActiveX
Загрузка php-обработчика, как внешнего скрипта
+ имеет хорошую скорость выполнения
+ работает в MSIE 5.5+, Opera 7, Firefox 1.0+, Mozilla 0.9+, Netscape 7
- не работает в Opera 8 и Netscape 8
- в браузерах отображается preloader
Использование невидимого iFrame
+ работает во всех браузерах
+ после запроса php файл может работать самостоятельно
- имеет низкую скорость выполнения
- загрязняет историю браузера
- в statusbar`е браузеров отображаются прелоадеры.

Что касается третьего способа, то он практически выбывает из борьбы за выживание, но у первых двух тоже свой большой недостаток - некроссбраузерность.
К счастью есть выход, а именно метод, объединяющий первые два способа и работающий на высоких скоростях во всех браузерах!
Метод этот - Subsys_JsHttpRequest, разработанный dk lab.

на странице разработчика, посвещённой данному методу, не очень хорошие примеры, много лишнего, трудно проникнуться сутью. однако сделать это стоит, если хотите использовать все возможности этого набора библиотек для обхода всех глюков и багов.
я же всё это дело упростил до нашего примера. посмотреть его можно тут - http://alx.com.ru/stats/dataload/test.html.

вот, что ещё есть в файле test.html:

Код

<script language="JavaScript" src="dk_JsHttpRequest/Js.js"></script>
<script>
// загрузка данных с сервера без прямого обновления страницы
// с использованием библиотек Subsys_JsHttpRequest ( разработчик - "dk lab" | http://dklab.ru/ )

function dk_JsHttpRequest(force)
{var query = '' + document.getElementById('param1').value;
var req = new Subsys_JsHttpRequest_Js();
req.onreadystatechange = function()
{if (req.readyState == 4)
{if (req.responseJS)
{document.getElementById('res').innerHTML +=
'md5('+(req.responseJS.q||'undefined')+') = ' + (req.responseJS.md5||'undefined') + '<br>';
// получить строку, возвращаемую обработчиком,
// можно обратившись к классу : req.responseJS.{имя параметра}
}
}
}
req.caching = true; // разрешаем кэширование
req.open('POST', 'dk_JsHttpRequest.php?test=abc', true);
req.send({ q: query, test:303 });
}
</script>


а вот содержимое php-файла, выполняющего обработку запроса:
Код

<?
require_once "dk_JsHttpRequest/config.php";
require_once "dk_JsHttpRequest/Php.php";

$JsHttpRequest =& new Subsys_JsHttpRequest_Php("windows-1251");

// $_RESULT - массив, в котором будет содержаться вся выдаваемая браузеру информация.
// можно создавать любое количество элементов и присваивать им любые строки.

$_RESULT = array(
"q" => $_REQUEST['q'],
"md5" => md5($_REQUEST['q']),
);
?>


+ папка dk_JsHttpRequest, в которой находятся JS- и PHP-библиотеки.

скачать всю эту красоту можно тут - http://alx.com.ru/stats/dataload/dataloaders.rar

У дачи!

smile
Автор: Alx
Сайт: http://alx.com.ru/






Просмотров: 7838

 

 

Новые статьи:


Популярные:
  1. Как сделать цикличным проигрывание MIDI-файла?
  2. Создание AVI файла из рисунков
  3. Как устройство "отключить в данной конфигурации"?
  4. Kто в данный момент присоединен через Сеть?
  5. Как узнать количество доступной памяти?
  6. Как реализовать в RichEdit разноцветный текст?
  7. Как скрыть свое приложение от ProcessViewer
  8. Как программно нажать/скрыть/показ кнопку "Start"?
  9. Модуль работы с ресурсами в PE файлах
10. Функции вызова диалоговых окон выбора
11. Проверка граматики средствами Word'а из Delphi.
12. Модуль для упрощенного вызова сообщений
13. Функции для записи и чтение своих данных в, ЕХЕ- файле
14. Рекурсивный просмотр директорий
15. Network Traffic Monitor
16. Разные модули
17. Универсальная функция для обращения к любым экспортируем функциям DLL
18. Библиотека от VladS
19. Протектор для UPX'а
20. Еще об ICQ, сообщения по контакт листу?
21. Использование открытых интерфейсов
22. Теория и практика использования RTTI
23. Работа с TApplication
24. Примеры использования Drag and Drop для различных визуальных компонентов
25. Что такое порт? Правила для работы с портами
26. Симфония на клавиатуре
27. Загрузка DLL
28. Исправление автоинкремента
29. Взаимодействие с чужими окнами
30. Проверить дубляжи в столбце


 

 

 
 
На главную