Question

我在互联网上搜索如何在ajax请求后修改我的HTML页面。我发现了许多不同的解决方案，我不知道使用哪种解决方案。以下是我考虑的选项：（顺便说一句，我不是在使用jQuery，而是从AJAX开始）

服务器使用一些“echo”在PHP中构建所有DOM，我们只在客户端使用innerHTML = xhr.responseText。
服务器构建XML文档，JavaScript使用XML文件来更改DOM。对于第二个解决方案，我不知道该怎么做。

您知道使用哪种解决方案吗？我会忘记其他一些解决方案吗？

Answer 1

使用echo作为innerHTML，请求让人们在您的代码中注入各种有趣的内容。

在游戏的这一点上，您可能应该使用JSON来回发送消息，并编写JS，这将创建您希望在浏览器中看到的内容。

如果我正在创建一个消息系统，我可能会这样：

浏览器内 （无样式）

• Norguard  
  My message
  2012-10-02 10pm

• Norguard
  Message 2
  2012-10-02 11pm

<强> HTML

<!-- basic idea of what I'm working with in the end result -->
<ul id="message-list">
    <li><span class="username">Norguard</span><p class="content">My Message</p><time datetime="2012-10-02T22:00:00.000Z" pubdate>2012-10-02 10pm</time>
</ul>

JS （程序）

// This might be a really basic implementation of functions to display messages
var Messager = {
    parent : document.getElementById("message-list"),
    update : function () { /* get messages from server */ },
    buildMessage : function (message) {
        var frag = document.createDocumentFragment,
            name = document.createElement("span"),
            body = document.createElement("p"),
            time = document.createElement("time");

        name.className = "username";
        body.className = "content";
        time.setAttribute("pubdate", "pubdate");

        name.innerText = message.userName;
        body.innerText = message.content;
        time.setAttribute("datetime", message.timestamp);
        time.innerText = message.friendlyDate;

        frag.appendChild(name);
        frag.appendChild(body);
        frag.appendChild(time);

        return frag;
    },

    buildMessages = function (messages) {
        var parentFrag = document.createDocumentFragment(),
            messenger = this;

        messages.forEach(function (message) {
            var li = document.createElement("li"),
                messageFrag = messenger.buildMessage(message);
            li.appendChild(messageFrag);
            parentFrag.appendChild(li);
        });

        return parentFrag;
    },

    writeMessages = function (newMessages) {
        this.domElement.appendChild(newMessages);
        // or do whatever sorting is required, et cetera
    }
};

JS （结果处理）

// this might be like what your XHR callback looks like (this is really basic)
xhr.onreadystatechange = function () {
    if (!this.readyState === 4 && (!this.status == 200 || !this.status == 302)) { return; }

    var json = "",
        data = "",
        messages;

    json = this.responseText;
    data = JSON.parse(json);
    messages = Messager.buildMessages(data);
    Messager.writeMessages(messages);
};

JSON （响应文字）

// What your JSON response would be
[
    {
        "username"  : "Norguard",
        "content"   : "My message",
        "timestamp" : "2012-10-02T22:00:00.000Z",
        "friendlyDate" : "2012-10-02 10pm"
    }, {
        "username"  : "Norguard",
        "content"   : "Message 2",
        "timestamp" : "2012-10-02T23:00:00.000Z",
        "friendlyDate" : "2012-10-02 11pm"
    }
]

请注意，您不应该在JSON中添加友好日期，而应该使用JS和每条消息中的时间戳转换为用户的本地时间... ......但这是一个如何通过尽可能少的装饰来完成整个包装的演示。

从PHP中，您可以以任何存储方式获取您的消息（数据库，csv，不同的文本文件......从Twitter流式传输......等等），您可以将它们全部放入在数组中。

<强> PHP

// Your PHP for the data above might look like this:
$msgArray = array(

    array( "username" => "Norguard",
           "content"  => "My message",
           "timestamp" => "2012-10-02T22:00:00.000Z",
           "friendlyDate" => "2012-10-02 10pm"        ),

    array( "username" => "Norguard",
           "content"  => "Message 2",
           "timestamp" => "2012-10-02T22:00:00.000Z",
           "friendlyDate" => "2012-10-02 11pm"        )
);

$jsonData = json_encode($msgArray);

echo $jsonData;

这可能有错误 - 我没有在代码板中写这个，我只是在这里做了，在我的头顶。

它也不是100％完整的代码。例如，我没有涉及设置XMLHttpRequest，或者进行任何事件处理，或者执行任何UI操作（例如按时间戳排序消息，删除重复项或添加更新按钮）。

这只是将JSON数据从PHP获取到JS（Chrome / FF / Safari /更新的IE）的必要条件，以及将这些数据放入HTML并将其放入页面的非常简单的策略。

Answer 2

“最干净的方式”imo是使用跨浏览器解决方案将对象返回到您的响应逻辑。你可以使用echo，但这将是“肮脏的方式”imo haha。

我建议通过ajax调用查看返回的json对象。

使用AJAX修改DOM的最简洁方法是什么？

2 个答案: