Ajax请求太慢

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

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

     $('.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？任何可以使请求更快的东西？谢谢。

来源

2013-08-23 Quentin

与任何优化问题一样，在修复问题之前，您需要知道什么是缓慢的。您可以使用像Chrome的开发人员工具“网络”标签这样的工具来获取有关时间到了哪里的更多详细信息。它将打破查找/连接，等待第一个字节和接收数据之间的时间。这会给你一个线索，以确定需要解决的问题。 – slashingweapon

也许不会立即返回20K记录并实现分页？ –

它看起来不像你正在返回json数据。看起来你正在返回表格数据，这将会更大，并且需要更长的时间才能完成。 – slashingweapon

而不是返回一个普通的字符串与整个表信息，我返回Table类是List 。

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相比，20000行仍然很慢。不知道LINQ的性能。可能需要更改查询。

来源

2013-08-27 16:07:56 Quentin

回答

相关问题