Вопрос № 126328: Здравствуйте!
Скажите, каким образом можно подгружать с сервера часть страницы, не перезагружая её всю? Видел на нескольких сайтах устроенное таким образом выпадающее меню. Навёл - подгрузилось.
Мне ближе РНР, но здесь без JS, по-моему, ...
Вопрос № 126.328
Здравствуйте!
Скажите, каким образом можно подгружать с сервера часть страницы, не перезагружая её всю? Видел на нескольких сайтах устроенное таким образом выпадающее меню. Навёл - подгрузилось.
Мне ближе РНР, но здесь без JS, по-моему, не обошлось.
Отправлен: 07.03.2008, 11:40
Вопрос задал: magnifiko (статус: 1-ый класс)
Всего ответов: 5 Мини-форум вопроса >>> (сообщений: 1)
Отвечает: Константин Павлов
Здравствуйте, magnifiko!
Вы отновительно правы. Эту возможность обеспечивает AJAX
AJAX — сокращение от «Asynchronous JavaScript And XML». Суть этой технологии состоит в том, что web-страница с помощью JavaScript асинхронно (т.е. не ожидая немедленного ответа) получает с сервера XML-файл с данными, которые она может разобрать и затем модифицировать документ в браузере соответствующим образом. Основой технологии AJAX является объект XmlHttpRequest, в Internet Explorer он заменен ActiveX-объектом Microsoft.XMLHTTP (в современных версиях — Msxml2.XMLHTTP). С его помощью можно, не перезагружая
страницу, отослать на сервер GET- или POST-запрос, после изменения состояния объекта получить присланный сервером на запрос XML-файл, выделить из него содержимое и поступить с ним как подобает.
Вот ознакомительная статья о нем
http://www.mycomputer.ua/text/10441
http://www.mycomputer.ua/text/10553
Ну и поиск по ключевому слову AJAX http://www.yandex.ru/yandsearch?rpt=rad&text=ajax
Ответ отправил: Константин Павлов (статус: 3-ий класс)
Ответ отправлен: 07.03.2008, 12:02 Оценка за ответ: 5
Отвечает: Errandir
Здравствуйте, magnifiko!
Вот вам неплохой сайт про AJAX: http://www.ajaxa.net/
Удачи.
--------- Si vox est - canta!
Ответ отправил: Errandir (статус: 8-ой класс)
Ответ отправлен: 07.03.2008, 12:12 Оценка за ответ: 5
Отвечает: Иван Сергеевич
Здравствуйте, magnifiko!
Для этого можно использовать две технологии - ajax и JSON. Они используют в принципе одинаковый механизм обмена данными:
1. С помощью javascript создается объект типа httpRequest (в разных браузерах он будет называться по-разному, есть механизм определения имени доступного объекта). Для него создается обработчик (т.е. функция, распоряжающаяся полученным ответом или предпринимающая действия, если получена ошибка). Поэтому алгоритмы называются асинхронными: после запроса браузер не ждет ответа от сервера, а продолжает работу.
2. Серверная часть обрабатывает полученный запрос (если мы говорим про php, то обычно это получение переменных POST и выполнение действий с ними).
3. Обычно вывод скрипта (echo, html-тэги и прочее) и является ответом, получаемым Вашей страницей (обработчиком).
Различие в том, что ajax изначально нацелен на передачу XML-структур в качестве ответа (но можно и голый текст передавать), а JSON передает javascript-структуры (т.е. js-массив, например, массив пунктов меню и соответсвующих им линков)
Оба механизма могут решить Ваши проблемы, выбирайте сами, что удобнее. Ссылки в приложении. Для обоих методов существуют дополнительные библиотеки (например, хорошая библиотека jsHttpRequest от Котерова)
Применительно к Вашей проблеме я бы сделал так:
На исходной странице загружается меню с коренными пунктами. При наведении/клике по пункту меню подгружается (через ajax) список дочерних пунктов (используя id выделенного пункта). Для этого серверный скрипт должен возвращать список подменю (в виде XML - тогда нужна будет его последующая обработка javascript'ом, что тяжеловато, либо в виде готового HTML - этот вариант удобнее). Далее вы создаете динамически DIV с полученными пунктами меню и отрисовываете под текущим. В дальнейшем это меню уже будет подгружаться
непосредственно из html, так как объект подменю уже создан (необходимо делать проверку существования подменю в функции вызова ajax).
Что касается применения JSON'а, то тут придется из полученной переменной формировать html-код по каждому пункту и добавлять его в опять-таки динамически созданный DIV.
Это если вы делаете меню через DIV'ы. Если через список (UL/LI) и таблицы стилей, то вместо DIV'а надо динамически менять указанный список - тоже ничего страшного.
Если возникнут дополнительные вопросы, пишите, поможем чем сможем :)
Приложение:
Ответ отправил: Иван Сергеевич (статус: 3-ий класс)
Ответ отправлен: 07.03.2008, 12:29 Оценка за ответ: 5
Отвечает: M@gi$†e® !!! Здравствуйте, magnifiko! Собственно, это и называется AJAX. Подробнее можно прочитать здесь: Рассмотрение технологий AJAX Освоение AJAX Использование AJAX с PHP и Sajax Генерирование JSON из XML для использования с AJAX Создание быстрых web-сайтов
[ ссылки в приложении ]
Приложение:
--------- Aquila non Capta Muscas
Ответ отправил: M@gi$†e® (статус: 9-ый класс)
Ответ отправлен: 07.03.2008, 13:40 Оценка за ответ: 5
Отвечает: Serge R. Bochkareff
Здравствуйте, magnifiko!
Вы правы, это все основано на javascript.
Есть два пути реализации:
1. xmlHTTPrequest
2. С помощью разбора пришедших данных в невидимом iframe
Все это называется AJAX ( Типа модная тенденция - web2.0 )
Ответ отправил: Serge R. Bochkareff (статус: 2-ой класс)
Ответ отправлен: 07.03.2008, 14:03 Оценка за ответ: 5 Комментарий оценки: Всем спасибо за ссылки. Извините, что не всё прокомментировал. Слишком много информации. Буду изучать.