0

複数のリクエストをキューに入れる機能を備えたランニングリストを作成しようとしています。私は単一のリクエストを行うことができ、リターンを正しいDIVに追加することができます。しかし、2つ以上のリクエストを行うと、最初のリクエストが返される前に、最初のGETがWebサーバーによって破棄され（プロジェクトの制約...）、2番目のリターンが最初のリクエストのDIVに挿入されます。

編集：関連するリクエストが正しいDIVに追加されるようにしたいと思います。GETリクエストがWebサーバーによって終了された場合は、error:{textStatus}設定に関数を追加し、divにストックテキストを追加して、ユーザーにエラーを警告します。

jQueryプラグイン「Transform」を使用しています。

JS：

<script type="text/javascript">
    $(function() {
        var evtIncrmt = 0
        $("#searchForm").submit(function (event) { 
            event.preventDefault();
            evtIncrmt = evtIncrmt + 1

            var $form = $(this),
                //term = $form.find('input[name="cmdtextbox"]').val(),
                url = $form.attr('action');
                cmdInput = "<M ID=\"Input_MSGID\"><R ID=\"AscString_RECID\">OPD</R></M>"

            $( "#listContainer" ).prepend( $(document.createElement( "div" ))
                .attr({ id: evtIncrmt + "entry",  title: "photo by a cohen" })
                .text( "This is Event Number " + evtIncrmt )
            );
            $( "#" + evtIncrmt + "entry" ).append( $(document.createElement( "div" ))
                .attr({ id: evtIncrmt + "entryXmlReturn",  title: "review by w mitchell" })
                .text(  "Waiting for response. . " )
            );
            console.log("event increment before ajax call" + evtIncrmt);
            $.ajax({
                type: "GET",
                timeout: 120000,  /* 2mins */
                context: "#" + evtIncrmt + "entryXmlReturn",
                url: url,
                data: { 
                    XMLString: cmdInput ,
                    uqid: evtIncrmt
                },
                dataType: "text",
                success: function (xmlReturn) {
                    console.log("event increment inside transform" + evtIncrmt);
                    $( "#" + evtIncrmt + "entryXmlReturn" ).transform({
                        xmlstr: xmlReturn,
                        xsl: { url: "xsl/StaticStyle.xsl" }
                    });
                }
            });
        });
    });
</script>

html：

<html>
    <body>
        <div class="links">
            <form action="/" id="searchForm">
                <input type="input" name="cmdtextbox" value="OPD" />
                <input type="submit" value="Search" />
            </form>
        </div>
        <div id="loadHTMLajax"></div>
        <div id="listContainer">
            <div id="2staticEntry">This is entry two.</div>
            <div id="1staticEntry">Hello oldest entry number ONE</div>
        </div>
    </body>
</html>

意図したとおりに機能しないことに加えて、この機能を作成する際にベストプラクティスを使用しなかったと確信しています。コードをより適切に記述できる領域を見つけた場合は、遠慮なく批判してください。

これはstackoverflowコミュニティへの私の最初の質問です。こんにちは、そして私が長年にわたってこのリソースから得たすべての匿名の使用に感謝します。

4

2 に答える 2

0

Zzzz、ご意見ありがとうございます。それは私を正しい方向に動かしました。XMLデータを取得する方法を再評価しました。.transform funcがAJAX呼び出し自体を実行するときに、AJAX呼び出しを行っていたことがわかりました。別の関数で呼び出し、2つのajaxメソッド間で呼び出しの一意のIDを渡すことができなかったため、参照が失われました。変換メソッドだけを使用して、ページがWebサーバーから返されるときに割り当ての整合性を維持できます。

以下は修正されたコードです。以下のコードの要約：

//code above unchanged
console.log("event increment before ajax call" + evtIncrmt);

$("#" + evtIncrmt + "entryXmlReturn").transform({
    //async:false,
    success: function () {
        alert("Transform succeeded");
    },
    xml: {
        url: "/",
        data: { 
            XMLString: cmdInput ,
            uqid: evtIncrmt
        },
        //timeout: 120000  /* 2mins */
        success: function () {
            console.log("xml " + evtIncrmt + ' succeeded');
        }
    },
    xsl: {
        url: "xsl/StaticStyle.xsl",
        success: function () {
            console.log("xsl " + evtIncrmt + ' succeeded');
        }
    }
});

Webサーバーへの複数の呼び出しでまだ問題があります。しかし、実際には一度に1つのリクエストしか作成できず、各AJAX呼び出しを線形に行うことができるため、キューを使用することにしました。

それが機能するようになれば、コード化されたキュー関数で返信できますが、少し話題から外れるので、ここでのエチケットはわかりません...

私はstackoverflowの答えを参照しています：javascript関数をキューに保存するにはどうすればよいですか...

于 2011-08-22T13:44:07.577 に答える
0

おそらく、変数 evtIncrmtl をまったくインクリメントしていないので、リクエストが失敗したと言うと、成功関数になると仮定します..

ところで、ここにはさまざまなハード依存関係があり、応答は常に特定の順序に従いますが、これは正しくありません。 1 と 2 は失敗したリクエストですが、.. したがって、このアプローチはちょっと間違っています..

正しいアプローチは、div の ID (または div no) をサーバーに送信し、同じ ID を応答の一部として送り返すことです。データ型はテキストであるため、これを"json" (サーバー側のスクリプト言語については、google から abt json を調べてください) を入力すると、応答は次のようになります。

{
"divId": "2staticEntry",  //"divCount" :2 //divid or its equivalent
xmlReturn: "<your old txt>"
}

今、このjsonを解析します..jsでjsonを解析するabtを読んでください。最も簡単な方法は eval() を使用することですが、お勧めしません..

解析したら、返されたオブジェクトを次のように使用できます。

var obj= eval(respnse);  //or equivalent 
obj.divId   //represents your div to be updated
$( "#" + evtIncrmt + "entryXmlReturn" ).transform({
                        xmlstr: obj.xmlReturn,
                        xsl: { url: "xsl/StaticStyle.xsl" }
                    });

それが理にかなっていることを願っています..

于 2011-08-21T21:06:45.970 に答える