0

他のインターネットで、ajaxリクエストの後にHTMLページを変更する方法を検索しました。私は多くの異なる解決策を見つけました、そして私はどれを使うべきかわかりません。私が検討するオプションは次のとおりです:(ちなみに、私はjQueryを使用しておらず、AJAXを使用しています）

  1. サーバーは、いくつかの「エコー」を使用してPHPですべてのDOMを構築し、innerHTML = xhr.responseTextクライアント側で使用します。

  2. サーバーはXMLドキュメントを作成し、JavaScriptはXMLファイルを使用してDOMを変更します。この2番目の解決策では、その方法がわかりません。

使用するソリューションを知っていますか？そして、私は他のいくつかの解決策を忘れますか？

4

2 に答える 2

1

echoasを使用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処理（タイムスタンプによるメッセージの並べ替え、重複の削除、更新ボタンの追加など）については説明しませんでした。

これは、PHPからJS（Chrome / FF / Safari /新しいIE）にJSONデータを取得するための最低限の必要条件であり、そのデータをHTMLに入れてページに入れるための非常に簡単な戦略です。

于 2012-10-02T21:52:27.467 に答える
0

「最もクリーンな方法」のimoは、オブジェクトを応答ロジックに返すクロスブラウザーソリューションを使用することです。エコーを使用することもできますが、それは「汚い方法」のimohahaになります。

ajax呼び出しを介してjsonオブジェクトを返すことを検討することをお勧めします。

于 2012-10-02T19:57:39.777 に答える