0

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

  1. 服务器使用一些“回声”在 PHP 中构建所有 DOM，我们只innerHTML = xhr.responseText在客户端使用。

  2. 服务器构建一个 XML 文档，JavaScript 使用 XML 文件更改 DOM。对于第二个解决方案，我不知道该怎么做。

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

4

2 回答 2

1

使用echoasinnerHTML是乞求人们在你的代码中注入各种有趣的东西。

在游戏的这一点上，您可能应该使用 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/newer IE）的基本必需品，以及将这些数据放入 HTML 并将其放入页面的非常简单的策略。

于 2012-10-02T21:52:27.467 回答
0

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

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

于 2012-10-02T19:57:39.777 回答