Question

我有一个页面需要单击表中的数字然后从数据库中相应地读取另一个表。我曾经使用ASP gridview来生成第二个表。然后我尝试使用jquery ajax。当我需要请求20,000条记录时，jquery ajax非常慢（加载大约6秒），而asp gridview要快得多。

ASPX.VB

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _
 <WebMethod()> _
    Public Shared Function GetOrderDetail(ByVal id As String) As String
    Dim orderNum As Integer = Integer.Parse(id)
    Dim sbTable As New StringBuilder
    Dim sql As New StringBuilder

    sql.Append("SELECT oh.[ORDERNO], od.[STYLE], s.[STYLEDESC],od.[COLOR], c.[COLORDESC], od.[SIZE],")
    sql.Append(" SUM(CONVERT(DECIMAL(12,0),od.[TOTALQTY])) AS 'Item_Total', och.[TRACKINGNO]")
    sql.Append(" FROM [OrderHeader] AS oh INNER JOIN [test1] AS ocd")
    sql.Append(" ON oh.[ORDERNO] = ocd.[ORDERNO] INNER JOIN [test2] AS och")
    sql.Append(" ON ocd.[FKEY] = och.[PKEY] INNER JOIN [test3] AS od")
    sql.Append(" ON oh.[ORDERNO] = od.[ORDERNO] INNER JOIN [test4] as s")
    sql.Append(" ON s.[STYLE] = od.[STYLE] INNER JOIN [test5] AS c")
    sql.Append(" ON c.[COLOR] = od.[COLOR]")
    sql.Append(" WHERE od.[ORDERNO] =")
    sql.Append(orderNum)
    sql.Append(" GROUP BY oh.[ORDERNO], od.[STYLE], s.[STYLEDESC],od.[COLOR], c.[COLORDESC], od.[SIZE], och.[TRACKINGNO]")

    sql.Append("select [ORDERNO] from [oabcd].[dbo].[OrderHeader] where [ORDERNO] =")
    sql.Append(orderNum)

    Dim connMain As Data.SqlClient.SqlConnection
    Dim cmdMain As Data.SqlClient.SqlCommand
    Dim rdrMain As Data.SqlClient.SqlDataReader
    connMain = New Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("SsssConnectionString").ConnectionString)
    connMain.Open()
    cmdMain = New Data.SqlClient.SqlCommand(sql.ToString(), connMain)
    rdrMain = cmdMain.ExecuteReader()
    Dim bAlt As Boolean = True
    If rdrMain.HasRows Then
        sbTable.Append("<table class = 'orderDetailTable'>")
        sbTable.Append("<thead>")
        sbTable.Append("<tr>")

        sbTable.Append("<th>")
        sbTable.Append("Order Number")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Item")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Color")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Size")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Item Total")
        sbTable.Append("</th>")

        sbTable.Append("<th>")
        sbTable.Append("Tracking Number")
        sbTable.Append("</th>")

        sbTable.Append("</tr>")
        sbTable.Append("</thead>")

        sbTable.Append("<tbody>")
        While rdrMain.Read()

            sbTable.Append("<tr>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("ORDERNO"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("STYLEDESC"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("COLORDESC"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("Size"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("Item_Total"))
            sbTable.Append("</td>")
            sbTable.Append("<td>")
            sbTable.Append(rdrMain.Item("TRACKINGNO"))
            sbTable.Append("</td>")
            sbTable.Append("</tr>")
        End While
        sbTable.Append("</tbody>")
        sbTable.Append("</table>")
    End If
    rdrMain.Close()
    cmdMain.Dispose()
    connMain.Close()
    connMain.Dispose()


    Return sbTable.ToString()

End Function

JS

                     $('.orderNumber').on('click', function () {
                    var orderNum = $(this).text();
                    console.log(orderNum);

                    $.ajax({
                        type: "POST",
                        url: "Order.aspx/GetOrderDetail",
                        data: "{'id' :'" + orderNum + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            $('#orderDetail').html(result.d);
                            $('.orderDetailTable').dataTable({

                            });
                        },
                        error: function (xhr, status, error) {
                            // Display a generic error for now.
                            alert("Ajax Read Detail Error!");
                        }
                    });
                });

我返回了一个非常大的字符串（包含20,000条记录）。我的问题是：有没有办法改进代码，如返回其他类型？或者只是从asp GetOrderDetail()函数生成html而不返回任何内容？什么能使请求更快？谢谢。

Answer 1

我没有返回包含整个表信息的纯字符串，而是返回了Table类List Row。

ASPX.VB

上半部分未复制到此处

 rdrMain = cmdMain.ExecuteReader()
    Dim records As New Table
    If rdrMain.HasRows Then

        While rdrMain.Read()
            Dim row As New Row
            row.OrderNum() = Trim(rdrMain.Item("ORDERNO"))
            row.Style() = Trim(rdrMain.Item("STYLEDESC"))
            row.Color() = Trim(rdrMain.Item("COLORDESC"))
            row.Size() = Trim(rdrMain.Item("SIZE"))
            row.Total() = Integer.Parse(Trim(rdrMain.Item("Item_Total")))
            row.Tracking() = Trim(rdrMain.Item("TRACKINGNO"))
            records.RowList.Add(row)
        End While
    End If

    rdrMain.Close()
    cmdMain.Dispose()
    connMain.Close()
    connMain.Dispose()

    Return records
Public Class Row
...
End Class
Public Class Table
...
End Class

<强> JS

 var r = new Array(), j = -1;
                            var html = "<table class ='orderDetailTable'><thead><tr><th class = 'orderDetailNum'>Order</th><th>Style</th>\
            <th>Color</th><th>Size</th><th>Total</th><th>Tracking Number</th></tr></thead><tbody>"
                            for (var key = 0, size = data.d.RowList.length; key < size; key++) {
                                r[++j] = '<tr><td class = "orderDetailNum">';
                                r[++j] = data.d.RowList[key].OrderNum;
                                r[++j] = '</td><td class = "orderStyle">';
                                r[++j] = data.d.RowList[key].Style;
                                r[++j] = '</td><td class = "orderColor">';
                                r[++j] = data.d.RowList[key].Color;
                                r[++j] = '</td><td class = "orderSize">';
                                r[++j] = data.d.RowList[key].Size;
                                r[++j] = '</td><td class = "orderTotal">';
                                r[++j] = data.d.RowList[key].Total;
                                r[++j] = '</td><td class = "orderTracking">';
                                r[++j] = data.d.RowList[key].Tracking;
                                r[++j] = '</td></tr>';
                            }
                            html = html + r.join("") + "</tbody></table>";

                            $('#orderDetail').html(html);

似乎更快一点点。但与ASP GridView相比，仍然比20,000行慢。不知道LINQ的性能。也许需要更改查询。

Ajax请求太慢了

1 个答案: