| |
|
|
| | Подскажите кто-ньть как можно организовать самый простой пример скрипта добавления сообщения без перезагрузки????
Вообще не догоняю как это все сделано...понимаю что яваскрипт, но не понимаю как... | |
| |
|
|
| |
|
|
| |
для: l-mariachi
(22.05.2008 в 21:40)
| | | Ajax - это клиент-серверная технология, поэтому она не может быть в чистом виде сделана на "яваскрипт". Для взаимодействия клиента с сервером по этой технологии есть готовые JS-решения, например, это есть в библиотеках: prototype.js; jquery.js.
Ниже дан пример, который не заставит вас думать о таких "страшных" вещах как XMLHttpRequest, не париться с проблемами кодировки..., но тем не менее, этот пример показывает механизм взаимодействия с сервером для обмена данными без перезагрузки всей страницы, хотя использует для этого всего два события JS и рабочий на всех браузерах. И так, например, есть страница со следующим содержимым:
<html>
<head>
<title>Small AJAX</title>
</head>
<body>
<table width="100%" cellpadding="8" cellspacing="1" bgcolor="#000000">
<tr>
<td colspan="3" bgcolor="#BEBEBE"><h3>Head</h1></td>
</tr>
<tr bgcolor="#ffffff">
<td>
<p><strong>Left mehu</strong></p>
<p><strong>Left content</strong></p>
</td>
<td valign="top">
<iframe src="form.php?frm=1"
onLoad="window.document.getElementById('formdt').innerHTML =
userform.document.body.innerHTML;"
frameborder=0 width=0 height=0 name="userform" id="userform"></iframe><div id="formdt"
style="border: 1px solid #000;"></div>
</td>
<td>
<p><strong>Right content</strong></p>
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#BEBEBE"><strong>Footer</strong></td>
</tr>
</table>
</body>
</html
|
На этой странице помещен элемент IFRAME (плавающий фрейм, далее просто фрейм, контейнер). Именно он будет использоваться в качестве контейнера для обмена данными с сервером, а все остальное содержимое страницы будет оставаться неизменным. При первой загрузке этой страницы, фрейм посылает запрос к странице прописанной у него в атрибуте src - "form.php?frm=1". Содержимое файла примера form.php следующее:
<?php
//инициализация переменных
$errors = "";
$user = isset($_POST["user"]) ? trim($_POST["user"]) : "";
$mail = isset($_POST["mail"]) ? trim($_POST["mail"]) : "";
$text = isset($_POST["text"]) ? trim($_POST["text"]) : "";
//если получены данные из формы, проверка
if (isset($_POST["complet"])) {
if (empty($user)) $errors .= " <font color=\"#FF0000\">The name field is not filled</font><br>";
if (empty($mail)) $errors .= " <font color=\"#FF0000\">The e-mail is not entered</font><br>";
if (empty($text)) $errors .= " <font color=\"#FF0000\">Enter your message</font>";
//перенаправление после удачного заполнения
if (empty($errors)) header("location: complete.php?usr=$user");
}
//вывод в браузер по умолчанию и ошибках
if (isset($_GET['frm']) || !empty($errors)) {
$output = "$errors
<FORM action=\"form.php\" method=\"post\" onsubmit=\"this.setAttribute('target','userform');\">
<table cellpadding=\"4\">
<tr>
<td align=\"right\">User:</td>
<td><input size=\"39\" type=\"text\" name=\"user\" value=\"$user\" /></td>
</tr>
<tr>
<td align=\"right\">E-mail:</td>
<td><input size=\"39\" type=\"text\" name=\"mail\" value=\"$mail\" /></td>
</tr>
<tr>
<td align=\"right\" valign=\"top\">Text:</td>
<td><textarea cols=\"30\" rows=\"4\"name=\"text\" value=\"$text\"></textarea></td>
</tr>
<tr>
<td colspan=\"2\" align=\"right\"><input type=\"submit\" name=\"complet\" value=\"Send\" /></td>
</tr>
</table>
</form>";
//отдаем во фрейм клента
echo $output;
//примечание
//exit;
}
?>
|
При получении этим скриптом GET-параметра "frm", в контейнер будет отдана переменная $output, которая, как видно, содержит таблицу с формой, значениями которой служат инициализированные ранее переменные. Эта же форма будет отдана при ошибках заполнения формы, но в этом случае, источником запроса будет служить сама форма. По событию onsubmit формы (ее отправке) указывается получатель - фрейм (userform), который в свою очередь, при получении данных от сервера, переписывает их в элемент DIV страницы. Именно этот элемент определяет стиль - местоположение, оформление и т.п. полученного от сервера. Вот собственно и весь механизм. Но этим простым способом можно организовать на странице, например: динамический вывод содержимого корзины клиента; оформление форм, осбоенно когда оформление происходит поэтапно, определяемое, например, от выбора опшенов многих списков; на этом примере можно построить Гостевую книгу и т.д., и т.п..
Примечание: Если после сценария определяющего вывод в браузер (контейнер), далее в скрипте следует код, который также делает вывод в браузер и может быть выполнен, то обязательно после выдачи в контейнер, нужно применять exit() (заремировано в примере). Иначе браузер клиента получит исключение и будет закрыт. Это происходит потому, что дальнейшее выполнение кода фактически будет создавать новый экземпляр страницы, будет заново распределятся память под объекты страницы, и контейнер, которому отосланы данные сервером, существовать уже не будет - такого смещения адреса в памяти браузера уже не будет. | |
| |
|
|
| |
|
|
| |
для: l-mariachi
(22.05.2008 в 21:40)
| | | Заходите к Дмитрию Котерову - примеров уйма, а библиотека отличная | |
| |
|
|
| |
|
|
| |
для: mihdan
(23.05.2008 в 10:28)
| | | Начинал AJAX с библиотекой Котерова. Не рекомендую. | |
| |
|
|
| |
|
|
| |
для: Lstasss
(23.05.2008 в 13:40)
| | | Угу. Громоздкая по нынешним временам.
Используйте JQuery. Там всё в одну строчку делается.
Вот кусок кода (из одного из моих проектов) который удаляет фотку (после успешного удаления контейнер с фоткой плавно исчезает):
JavaScript frontend:
function removePhoto(id){
$.getJSON('/core/handler/ajax.php?mode=json&handler=cabinet/account/removePhoto',
{key:id},
function(data){$('#'+data.key).fadeOut('slow');});
}
|
PHP backend
<?
$jqueryHelper = helper::load('jquery');
$data = $jqueryHelper->charset_decode($_REQUEST);
$result = component::load('cabinet','account')->removePhoto($data);
echo $jqueryHelper->json($result);
?>
|
Вот и всё ;-) Весь аякс при использовании jquery сводится к правильному преобразованию кодировки. | |
| |
|
|
| |
|
|
| |
для: Axxil
(23.05.2008 в 14:48)
| | | Спасибо, попробуем... | |
| |
|
|
