Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Что лучше использовать? (https://javascript.ru/forum/dom-window/4332-chto-luchshe-ispolzovat.html)

infocean 12.07.2009 13:49

Что лучше использовать?
 
Здравствуйте, Уважаемые форумчане.
В ajax’е я не мастер, поэтому и обращаюсь к вам за советом.

Есть условие:
1) Шаблон в три колонки, в центральной выводится весь контент (генерируемый связкой PHP+MySQL )
2) В первой колонке находится блок Авторизация(генерируемый отдельным файлом PHP)

И задача:
1) В центральной колонке выводится список юзеров и напротив каждого из них появляется кнопка(ссылка),после нажатия на которую на сервер должны отсылаться данные.
2) Скрипт обработчик должен вернуть результат в виде всплывающего окошка (с кнопкой «Закрыть» и результатом в виде текста)
3) Во время появления этого всплывающего окошка, должен обновиться блок Авторизация

Хочу сразу сказать, перечитал кучу материала, поэтому как передавать данные с помощью Ajax я примерно представляю, сложность заключается в том, как сделать вывод в красивое всплывающее окошко и при этом обновить данные в другой части сайта.

Вопрос: Как лучше решать эту задачу?(дайте плиз совет или пример)
Мои варианты:
1) Писать с чистого листа всё самому
2) Использовать библиотеку prototype + какое-нибудь дополнение к ней

p.s. Чуть не забыл сказать, главное чтобы такую задачу можно было выполнять на разных страницах

Riim 12.07.2009 15:04

Цитата:

Сообщение от infocean
Вопрос: Как лучше решать эту задачу?(дайте плиз совет или пример)
Мои варианты:
1) Писать с чистого листа всё самому
2) Использовать библиотеку prototype + какое-нибудь дополнение к ней

Зависит от того сколько времени вы готовы этому уделить.

infocean 12.07.2009 15:18

На время всё равно.
Главное сделать всё так,чтобы работало. :)
Если есть другие варианты или ссылки для чтения,то предлагайте.

Octane 12.07.2009 15:45

Если время есть, тогда лучший вариант сделать все самому ;) со всякими prototype и jQuery еще успеете наиграться, и будет лучше, если вы к этому времени уже будете знать, как они работают и что там происходит.

infocean 12.07.2009 15:49

Тогда подскажите плизз,где можно почитать про классы в ajax, про то как можно сделать красивое всплывающее окошко с полученными данными от php-скрипта.

Riim 12.07.2009 15:53

Цитата:

Сообщение от infocean
где можно почитать про классы в ajax

Классы в ajax? Как то странно звучит. Видимо имеется в виду OOP в javascript-е: http://forum.htmlbook.ru/index.php?showtopic=8646

infocean 12.07.2009 16:09

Riim,
Точно вы всё правильно поняли :)
Сори, просто привык к php уже.
За ссылочку спс,сейчас буду читать.
А насчёт всплывающего окошка, у вас не найдётся примера или ссылочки?(Сори за наглость)

Riim 12.07.2009 17:08

http://www.leigeber.com/2008/04/cust...-dialog-boxes/

infocean 12.07.2009 17:14

Всё, пока вопросов больше нет, всем огромное спасибо за помощь.
Пойду теперь читать и переваривать :)

infocean 13.07.2009 17:59

Подскажите плизз как лучше организовать вывод полученных(c помощью ajax) данных (из файла load.php) во всплывающее окошко.

Вот примерный код

файл index.html

<html>
<head>
<title>Тест</title>
<link href="templates/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="load.js"></script>
</head>
<body>
<div id="masthead">
</div>
<div id="top_nav">
	<span lang="ru">шапка</span></div>
<div id="container">
	<div id="left_col">
		<div>Привет infocean</div>
		<div>
			Новостей: 30<br />
			Комментариев: 600<br />
		</div>
	</div>
	<div id="right_col">
	</div>
	<div id="page_content">
		<table><tr>
		<td>Ник: infocean</td>
		<td><input type="hidden" id="idmen" value="1" /><a href="#" onclick="process()">НАЖАТЬ СЮДА!!!</a></td>
		</tr></table>
		<table><tr>
		<td>Ник: test</td>
		<td><input type="hidden" id="idmen" value="2" /><a href="#" onclick="process()">НАЖАТЬ СЮДА!!!</a></td>
		</tr></table>
		<table><tr>
		<td>Ник: test-2</td>
		<td><input type="hidden" id="idmen" value="3" /><a href="#" onclick="process()">НАЖАТЬ СЮДА!!!</a></td>
		</tr></table>
	</div>
</div>
<div id="footer">
</div>
</body>
</html>


файл load.js

var xmlHttp = AjaxObject();

// Создаём объект XMLHttpRequest
function AjaxObject() 
{
  // переменная для хранения ссылки на объект XMLHttpRequest
  var xmlHttp;
  // эта часть кода работает везде,кроме IE6
  try
  {
    // пытаемся создать объект XMLHttpRequest
    xmlHttp = new XMLHttpRequest();
  }
  catch(e) 
  {
    // предпологаем,что в качестве браузера используется IE6 или ниже
    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                    "MSXML2.XMLHTTP.5.0",
                                    "MSXML2.XMLHTTP.4.0",
                                    "MSXML2.XMLHTTP.3.0",
                                    "MSXML2.XMLHTTP",
                                    "Microsoft.XMLHTTP");
    // пытаемся создать объект любой из версий данных в массиве
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++) 
    {
      try 
      { 
        // пытаемся создать объект XMLHttpRequest
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      } 
      catch (e) {}
    }
  }
  // возвращаем созданный объект или выводим сообщение об ошибке
  if (!xmlHttp)
	  alert("Error creating the XMLHttpRequest object.");
  else 
    return xmlHttp;
}

function process()
{
  if (xmlHttp)
  {
    try
    {
	  name = encodeURIComponent(document.getElementById("idmen").value);
      xmlHttp.open("GET", "load.php?name="+name, true);
      xmlHttp.onreadystatechange = handleServerResponse;
      xmlHttp.send(null);
    }
    catch(e)
    {
      displayError(e.toString());
    }
  }
}

function handleServerResponse() 
{
  page_content = document.getElementById("page_content");
  if (xmlHttp.readyState == 1)
  {
    page_content.innerHTML += "Request status: 1 (loading) <br/>";
  }
  else if (xmlHttp.readyState == 2)
  {
    page_content.innerHTML += "Request status: 2 (loaded) <br/>";
  }
  else if (xmlHttp.readyState == 3)
  {
    page_content.innerHTML += "Request status: 3 (interactive) <br/>";
  }
  else if (xmlHttp.readyState == 4) 
  {
    if (xmlHttp.status == 200) 
    {
      try
      {
        response = xmlHttp.responseText;
        page_content.innerHTML += "Request status: 4 (complete). Server said: <br/>";
        page_content.innerHTML += response;
      }
      catch(e)
      {
        alert("Error reading the response: " + e.toString());
      }
    } 
    else
    {
      alert("There was a problem retrieving the data:\n" + xmlHttp.statusText);
    }
  }
}


файл load.php

получает $_GET['name'], обрабатывает, выполняет запросы в базу, после чего в зависимости от условий выводит с помощью конструкции echo сообщение.

После выдачи пользователю сообщения,надо обновить всё, что есть в диве с id="left_col".

Заранее очень благодарен!!


Часовой пояс GMT +3, время: 05:24.