Что лучше использовать?
Здравствуйте, Уважаемые форумчане.
В ajax’е я не мастер, поэтому и обращаюсь к вам за советом. Есть условие: 1) Шаблон в три колонки, в центральной выводится весь контент (генерируемый связкой PHP+MySQL ) 2) В первой колонке находится блок Авторизация(генерируемый отдельным файлом PHP) И задача: 1) В центральной колонке выводится список юзеров и напротив каждого из них появляется кнопка(ссылка),после нажатия на которую на сервер должны отсылаться данные. 2) Скрипт обработчик должен вернуть результат в виде всплывающего окошка (с кнопкой «Закрыть» и результатом в виде текста) 3) Во время появления этого всплывающего окошка, должен обновиться блок Авторизация Хочу сразу сказать, перечитал кучу материала, поэтому как передавать данные с помощью Ajax я примерно представляю, сложность заключается в том, как сделать вывод в красивое всплывающее окошко и при этом обновить данные в другой части сайта. Вопрос: Как лучше решать эту задачу?(дайте плиз совет или пример) Мои варианты: 1) Писать с чистого листа всё самому 2) Использовать библиотеку prototype + какое-нибудь дополнение к ней p.s. Чуть не забыл сказать, главное чтобы такую задачу можно было выполнять на разных страницах |
Цитата:
|
На время всё равно.
Главное сделать всё так,чтобы работало. :) Если есть другие варианты или ссылки для чтения,то предлагайте. |
Если время есть, тогда лучший вариант сделать все самому ;) со всякими prototype и jQuery еще успеете наиграться, и будет лучше, если вы к этому времени уже будете знать, как они работают и что там происходит.
|
Тогда подскажите плизз,где можно почитать про классы в ajax, про то как можно сделать красивое всплывающее окошко с полученными данными от php-скрипта.
|
Цитата:
|
Riim,
Точно вы всё правильно поняли :) Сори, просто привык к php уже. За ссылочку спс,сейчас буду читать. А насчёт всплывающего окошка, у вас не найдётся примера или ссылочки?(Сори за наглость) |
|
Всё, пока вопросов больше нет, всем огромное спасибо за помощь.
Пойду теперь читать и переваривать :) |
Подскажите плизз как лучше организовать вывод полученных(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". Заранее очень благодарен!! |
var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP",
"Microsoft.XMLHTTP");
необходимость в таком количестве вариантов сомнительна: "MSXML2.XMLHTTP" соответствует msxml3.dll ("MSXML2.XMLHTTP.3.0"), а у "Microsoft.XMLHTTP" только одна версия (1.0), которая опять же указывет на ту же msxml3.dll, из чего можно предположить, что его оставили для совместимости Цитата:
|
данные о пользователе например скрипт будет выводить :
<div>
Новостей: 30<br />
Комментариев: 600<br />
</div>
Вот именно вопрос организации, для меня сложен. Хотелось бы, чтобы окошко было универсальным, т.е. можно было размещать его на любой странице. А примерный код самого окошка:
<div id="layer_message">
<div id="header_mess">Сюда можно было бы подставлять заголовок</div>
<div id="text_mess">А сюда текст</div>
</div>
Но проблема заключается в том,что я не знаю как передать из php, две разные переменные, чтобы они подставились в код окошка. p.s. Дошло,:) один из вариантов(но если у вас есть лучше, то с радостью выслушаю) - это генерировать окошко в php документе и выводить с помощью конструкции echo. Но тут возник другой вопрос,как после получения ajax'ом результатов, можно вывести окошко? |
Как генерировать окно с помощью php? При загрузке страницы? Тогда в него все равно надо будет подставить результаты ajax-запроса. Генерировать в ajax-запросе? Если окно будет выводится еще и без ajax-запросов, то будет 2 версии (javascript, php): при изменении одной надо будет корректировать другую (так делать не стоит)
1) можно генерировать изначально невидимый каркас с помощью php, а содержимое подставлять с помощью javascript. Но тогда код, относящийся к окну будет в 3-х файлах (php-шаблон, javascript, css) и надо будет не забывать, кроме подключения js, css еще нарисовать каркас в страничке 2) можно сделать, чтобы разметка создавалась js-скриптом, т.е. примерно так
function msg( content ) {
// создаем разметку окна, назначаем обработчики
// (закрытие окна) и присоединяем окно к документу,
// если еще не сделали этого (можно создавать каркас
// один раз, а потом просто менять содержимое)
// подставляем содержимое (content)
// показываем окно
}
|
Цитата:
|
Если я всё правильно понял, то второй вариант мне больше подходит.
Пример: файл load.php echo "Какой-то текст"; ajax'ом получаю этот текст Но возникло ещё пара вопросов: 1) Как мне вызвать эту функцию создающую окошко, после получения ответа ajax'ом(если можно, то кратенький пример опишите пожалуйста) 2) Как мне сделать подстановку Заголовка и текста в окно, т.е. как ajax'ом определить, что из полученных данных относится к заголовку окна, а что является текстом окна? (тут без примера не обойтись, т.к. я в ajax'е начинающий) |
1) так же, как любую другую функцию
2) чтобы передать несколько значений можно использовать JSON:
$o = array('a' => 1, 'b' => 'asd');
echo json_encode($o);
var o = eval( '('+xhr.responseText+')' );
|
Огромное спасибо за ответы.
Пойду шаманить :) |
В общем, написал вроде простенькую функцию по созданию окошка, но не могу написать функцию удаления окошка, код привёл ниже.
Помогите кто-нибудь, пожалуйста. код файла message.js:
function newmess(title,text)
{
// получаем заголовок и текст
this.title = title;
this.text = text;
// Ширина рабочей области
this.getDocumentWidth = function()
{
return (window.innerWidth)?window.innerWidth:((document.all)?document.documentElement.offsetWidth:null);
}
// Высота рабочей области
this.getDocumentHeight = function()
{
return (window.innerHeight)?window.innerHeight:((document.all)?document.documentElement.offsetHeight:null);
}
// Создаём окошко в памяти
this.layer = document.createElement("div");
this.layer.className = "layermess";
this.layer.id = "layermess";
this.layer.style.top = (this.getDocumentHeight()/2)-150 + "px";
this.layer.style.left = (this.getDocumentWidth()/2)-150 + "px";
this.header = document.createElement("div");
this.header.className = "header";
this.header.id = "header";
// Как сделать чтобы див со словом "Закрыть", работал при клике на нём?(строка ниже не работает :( )
this.header.innerHTML = this.title + "<div onclick=\"this.close()\">Закрыть</div>";
//-------------------------------------------
this.message = document.createElement("div");
this.message.className = "message";
this.message.id = "message";
this.message.innerHTML = this.text;
//this.layer.style.visibility = "visible";
// Вставляем окошко в html страницу
this.layer.appendChild(this.header);
this.layer.appendChild(this.message);
this.dialog = document.getElementById("all");
this.dialog.appendChild(this.layer);
this.close = function()
{
alert("Проверка");
this.layers = document.getElementById("layermess");
this.layers.style.visibility = "hidden";
};
}
файл index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Тестируем окошко</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="message.js"></script>
<script type="text/javascript">
function ShowMessage(title,text)
{
wnd = new newmess(title,text);
return wnd;
}
</script>
</head>
<body>
<div onclick="ShowMessage('Тест','Привет Мир!');">Открыть</div>
<div onclick="wnd.close();">Закрыть</div>
<div id="all"></div>
</body>
</html>
И если можно, то скажите, пожалуйста, правильно ли я вообще написал скрипт, т.к. на js первый раз писал, хорошо, что есть сайт и этот форум, очень много полезной инфы. |
1) this тут как минимум не обязателен, не вижу смысла пихать все в объект, если ты потом пользуешься разве что this.layer
2) close может получить доступ к layer следующим образом:
function a() {
var layer = ...;
function b() {
// здесь можно использовать layer
}
}
3) если делаешь "класс", то лучше методы в прототип добавлять, при твоем подходе для каждого объекта будет создаваться своя функция
function msg(){ ... }
msg.prototype.method1 = function() { ... }
4) с помощью document.createElement можно создать внешний контейнер, а все содержимое добавить с помощью innerHTML 5) getDocumentWidth, getDocumentHeight можно вынести из объекта (функции), это скорее функции общего назначения. Кроме того, какой-то там нестандартный способ определения размеров. Можешь посмотреть, как в некоторых фреймворках поступают 6) внутри атрибута this указывает на соответствующий элемент. Можно этот div создать с помощью createElement и назначить обработчик через свойство onclick |
Огромное спасибо, за советы, ответы и подсказки :)
Буду дальше разбираться, потом может выложу тут код своего окошка,вдруг кому пригодится. |
| Часовой пояс GMT +3, время: 16:10. |