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

Alx

Дата 15.1.2006, 00:36 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

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

для этого есть три (и ещё один, но о нём позже) способа:

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`е браузеров отображаются прелоадеры.

Что касается третьего способа, то он практически выбывает из борьбы за выживание, но у первых двух тоже свой большой недостаток - некроссбраузерность.
К счастью есть выход, а именно метод, объединяющий первые два способа и работающий на высоких скоростях во всех браузерах!
Метод этот - [b]Subsys_JsHttpRequest[/b], разработанный 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

У дачи!

:notify

--------------------

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »