什么是使用AJAX修改DOM的最干净方法

Question

I've search other the internet how to modify my HTML page after an ajax request. I've found many different solutions and I don't know which one to use. Here are the options I consider: (by the way, I'm not using jQuery and I'm starting in AJAX)

1. The server build all the the DOM in PHP with some "echo" and we just use innerHTML = xhr.responseText on client side.

2. The server build an XML document and JavaScript use the XML file to change the DOM. For this second solution, I'm not sure how to do it.

Do you know which solution to use? And do I forget some other solutions?

Answer 1

Using echo as innerHTML is begging to have people inject all kinds of fun stuff into your code.

At this point in the game, you should probably be using JSON to send messages back and forth, and writing JS which will create what you want to see in the browser.

If I were creating a messaging system, I might go like this:

In-Browser (unstyled)

• 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 (program)

// 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 (result-handling)

// 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 (response-text)

// 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"
    }
]

Note that you shouldn't do things like put friendly dates in your JSON, and instead, you should convert into the user's local time, using JS and the timestamp in each message... ...but this is a demonstration of how to get through the whole package with as few frills as possible.

From PHP, you would get your messages in whatever way they were stored (database, csv, different text files... ...streamed from Twitter... ...whatever), and you'd put them all in an array.

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;

There may well be errors in this -- I didn't write this in a code-pad, I just did it here, off the top of my head.

It's also not meant to be 100% complete code. I didn't cover setting up the XMLHttpRequest, for instance, or doing any event-handling, or doing any UI stuff (like sorting the messages by timestamp, or removing duplicates or adding an update button).

This is sort of just the bare-necessities of getting JSON data from PHP into JS (Chrome/FF/Safari/newer IE), and a very simple strategy for putting that data in HTML, and putting it into the page.

Answer 2

The "cleanest way" imo is to use cross browser solution that returns an object to your response logic. You can use echo but that would be the "dirty way" imo haha.

I would suggest looking at returning json objects via ajax calls.