Какие технологии я должен использовать для загрузки контента в динамический div?

Question

У меня есть интересный проект, и у меня есть вопрос.Вы можете посмотреть на мой дизайн джанка ниже:

У меня есть множество технологий, которые я планирую использовать.Чтобы дать вам представление:

• node.js (для различных серверов)
• WebSockets (для клиента чата и некоторого контента, который я бы предпочел не раскрывать)
• canvas (для части #content)

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

По моему вопросу, на странице, которую я выложил выше, единственное, что я хочу изменить (кроме обновления функции чата), это контент.Я хотел бы загрузить разделы «Домашняя страница», «О нас», «Контакты» и «Логин» моего сайта в часть страницы #content.

Теперь у меня есть инстинкт сказать:Лучший способ достичь этой цели - через AJAX, но я не уверен.Так как я мог бы просто настроить некоторые файлы с HTML-кодом, который я хотел бы отобразить, и затем нажать на них, загрузить их в раздел #content.

Это лучший способ для использования?Я ищу практичность и производительность.

Извините за странный вопрос.

Спасибо!

Answer 1

Если вы хотите загружать эти разделы динамически, ajax - единственный путь.Я бы определенно воспользовался библиотекой JavaScript, чтобы справиться с внутренними задачами по созданию вызовов ajax для вас, так как написать эту часть с нуля может быть сложно в кросс-браузерной манере.Я очень рекомендую jQuery для этого: http://jquery.com/

Я видел, как вы упомянули WebSockets.WebSockets может быть полезен для разгрузки некоторой интенсивной обработки JS, но его нельзя использовать для взаимодействия с DOM (например, для доступа к элементам HTML, изменения их содержимого, получения значений форм и т. Д.).

Answer 2

В качестве альтернативы вы можете решить не изучать AJAX или работать с внешними библиотеками Comet, и использовать что-то вроде NOLOH , которое решает все эти проблемы сантехники, позволяя вам сосредоточиться на своем приложении.,Например, я взял на себя смелость создать настоящее приложение NOLOH на основе вашего макета, который автоматически использует AJAX для содержимого и использует встроенную поддержку Comet для чата NOLOH.

Нажмите здесь для примера работы:http://www.noloh.com/Demos/StackOverflow1

Как вы можете видеть из самого основного кода (всего кода), опубликованного ниже, и на github здесь , вы просто размещаете свои объекты и говорите им, что выхотели бы сделать.NOLOH позаботится обо всем остальном и решит все кросс-браузерные проблемы, проблемы клиент-сервер и большинство других вещей, которые вы можете себе представить.

ПРИМЕЧАНИЕ. Это только один из многих способов решения этой проблемы, я мог быиспользовал разные типы макетов, более лаконичный синтаксис, переменные класса вместо локальных и внешних CSS, но я чувствовал, что простой подход сделает вещи более понятными.Кроме того, извините за использование громоздкого URL-адреса Yahoo, поскольку он был наиболее доступным.

require_once('/NOLOH/NOLOH.php');

class StackOverflowExample extends WebPage
{
    function __construct()
    {
        parent::WebPage('StackOverflow 5672167');
        $nav = new Panel(0, 0, 600, 30);
        $chat = new Panel(0, $nav->Bottom, 200, 500);
        $content = new MarkupRegion('', $chat->Right, $chat->Top, 400, 350);
        $rooms = new Panel($content->Left, $content->Bottom, 400, 150);
        $footer = new Panel(0, $chat->Bottom, 600, 50);

        $chat->BackColor = Color::LightGreen;
        $content->BackColor = Color::Yellow;
        $rooms->BackColor = Color::Orange;
        $footer->BackColor = Color::Gray;

        $this->Controls->AddRange($nav, $chat, $content, $rooms, $footer);

        $sections = array('HOME', 'ABOUT', 'CONTACT', 'LOGIN');

        foreach($sections as $section)
            $nav->Controls->Add(new Link(null, $section, 0, 5))
                ->Click = new ServerEvent($this, 'LoadSection', $content, $section);

        $nav->Controls->AllCSSMarginRight = '5px';
        $nav->Controls->AllLayout = Layout::Relative;
        $nav->CSSTextAlign = 'right';

        //Comet (Listener), Bind to Yahoo Flickr API through YQL
        $this->Controls->Add($listener = new Listener(
            'http://query.yahooapis.com/v1/public/yql?q=select%20source%20from%20flickr.photos.sizes%20WHERE%20photo_id%20in%20(select%20id%20from%20flickr.photos.recent)%20and%20label%3D%22Thumbnail%22',
            new ServerEvent($this, 'LoadImage', $chat)));

        //Default Section
        $this->LoadSection($content, URL::GetToken('section', 'HOME'));
    }
    function LoadSection($contentPanel, $section)
    {
        $section = strtolower($section);
        if(file_exists($file = 'Content/' . $section))
        {
            $contentPanel->Text = file_get_contents($file);
            URL::SetToken('section', $section);
        }
    }
    function LoadImage($chat)
    {
        foreach(simplexml_load_string(Listener::$Data)->results->size as $photo)
        {
            $url = $photo['source'];
            $chat->Controls->Add($image = new Image((string)$url, rand(0, $chat->Width), rand(0, 200), 100, 100));
            Animate::Top($image, $chat->Height - $image->Height, 3000);
            Animate::Opacity($image, Animate::Oblivion, 3000);
        }
    }
}

В качестве альтернативы, вы можете использовать NOLOH NavHandler Nodule, чтобы ваш контент можно было добавлять в закладки без вас.не нужно беспокоиться о реализации базовых функций токена NOLOH , которые я позволил себе добавить сюда (URL :: GetToken), чтобы приложение стало доступным для закладки.

Вы свободныподписаться на бесплатную песочницу NOLOH, скопировать код в свою песочницу и поиграть с ним.Одним из способов было бы изменить MarkupRegion на EditRegion, чтобы у вас были возможности автоматического редактирования на месте.

Отказ от ответственности: я являюсь соучредителем NOLOH