Question

我有一个有趣的项目，我有一个问题。您可以在下面的jank设计中看到外观： enter image description here

我计划利用各种技术。给你一个想法：

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作为内容，并使用NOLOH内置的Comet支持进行聊天。

点击此处查看功能示例：http://www.noloh.com/Demos/StackOverflow1

从下面发布的基本代码（所有代码）和github here中可以看到，您只需布置对象，并告诉他们您想要做什么。 NOLOH负责其余部分，处理所有跨浏览器问题，客户端 - 服务器问题以及您可以想象的大多数其他事项。

注意：这只是处理它的众多方法之一，我可以使用不同的布局类型，更简洁的语法，类变量而不是本地和外部CSS，但我觉得一个简单的方法会使事情更清晰。此外，很抱歉使用笨拙的雅虎网址，因为它是最容易获得的。


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 Token functions，我可以自由添加（{3}} :: GetToken），以便应用程序可收藏。

您可以免费注册免费的NOLOH沙箱，并将代码复制到沙盒中并随意使用。一种方法是将MarkupRegion更改为EditRegion，以便您具有自动编辑就地功能。

免责声明：我是NOLOH的联合创始人

我应该使用哪些技术将内容加载到动态div中？

2 个答案: