Ajax 요청이 너무 느립니다.

Question

테이블에서 숫자를 클릭 한 다음 데이터베이스에서 다른 테이블을 읽어야하는 페이지가 있습니다. 두 번째 테이블을 생성하기 위해 ASP 그리드 뷰를 사용했습니다. 그런 다음 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 레코드를 포함) 매우 큰 문자열을 반환. 내 질문은 : 반환 다른 유형의 코드를 향상시킬 수있는 방법이 있습니까? 아니면 아무 것도 그냥 HTML을 생성 asp에서 GetOrderDetail() 함수를 반환하지? 요청을 더 빨리 할 수있는 것은 무엇입니까? 감사.

Answer 1

전체 테이블 정보가 포함 된 일반 문자열을 반환하는 대신 List이 인 Table 클래스를 반환했습니다.

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와 비교해도 2 만 줄의 속도는 여전히 느립니다. LINQ의 성능을 알지 못합니다. 쿼리를 변경해야 할 수도 있습니다.