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

回答

相關問題